Làm thế nào để Thêm Sự va chạm vào Trò chơi HTML5 của bạn

Những điều thú vị nhất trong các trò chơi điện tử HTML5 xảy ra khi các thiên thần nhảy lên và va chạm vào nhau. Động cơ game thường có một số công cụ để kiểm tra xem hai sprites có chồng chéo hay không. Đây được gọi là phát hiện va chạm và có thể thực hiện theo một số cách. Ví dụ này sử dụng lược đồ bounding rectangle tiêu chuẩn. Nó không hoàn hảo, nhưng nó rất dễ thực hiện và thường được sử dụng.

Làm thế nào để thiết lập bounding rectangle collisions trong trò chơi của bạn

Hãy xem colTest. html và bạn sẽ thấy một ví dụ đơn giản.

Trong colTest. ví dụ html, người dùng di chuyển critter bằng chuột, và bạn sẽ nhận được một tin nhắn khi critter đang chạm vào hộp ở giữa màn hình.

colTest. html checkCollisions (); . cập nhật (); critter. cập nhật ();} / / cuối cùng cập nhật; checkCollisions chức năng () { if (hộp collidesWith (critter)) { đầu ra. innerHTML = "va chạm"; } khác { đầu ra. innerHTML = "Không va chạm"; } // end if } // end checkCollisions empty

Một số điều thú vị đang xảy ra trong đoạn mã này:

1. Ẩn con trỏ thông thường.

   Khi bạn sẽ có một số đối tượng khác theo sau con chuột, bạn thường muốn ẩn con trỏ mũi tên bình thường. Trong trò chơi đơn giản, sử dụng trò chơi. hideCursor () để giấu con trỏ chuột bên trong màn hình trò chơi.

2. Tạo nhiều hơn một sprite.

   Phải mất hai tiếng để tango, hoặc va chạm. Trong ví dụ này, hộp sẽ vẫn đứng yên, và một con chuột chạy theo con chuột.

3. Cung cấp cho critter phương pháp followMouse ().

   Trong ví dụ này, bạn có critter theo con chuột. Bắt đầu bằng cách tạo phương thức followMouse ().

4. Xác định vị trí của chuột.

   Vị trí con chuột được xác định (bằng SimpleGame.js) với tài liệu. mouseX và tài liệu. các thuộc tính của chuột.

5. Sao chép vị trí chuột đến vị trí critter.

   Sử dụng vị trí x của chuột để đặt vị trí x của con chuột, và lặp lại với y.

6. Gọi phương thức followMouse () của critter () cho mỗi khung.

   Như thường lệ, chức năng update () là nơi mà bạn đặt mã nên xảy ra nhiều lần.

Nếu bạn chơi xung quanh với colTest. trang html, có thể bạn sẽ nhận thấy rằng va chạm không chính xác. Có thể có một đăng ký va chạm ngay cả khi critter không thực sự chạm vào hộp. Điều này rất quan trọng bởi vì simpleGame sử dụng một chương trình gọi là bounding box va chạm .

Điều này có nghĩa là bạn không thực sự kiểm tra để xem hình ảnh có va chạm không, nhưng hình chữ nhật xung quanh hình ảnh có va chạm hay không. Trong ví dụ này, sự khác biệt là nhỏ, nhưng đôi khi bạn sẽ thấy lỗi đáng kể với cơ chế này, đặc biệt với các yếu tố dài và mỏng. Khi một sprite quay, kích thước của hình chữ nhật bao quanh có thể thay đổi.

Sự va chạm từ xa cho trò chơi của bạn

Một hình thức phát hiện va chạm khác được gọi là va chạm xung quanh . Với cơ chế này, bạn chỉ cần tính toán khoảng cách giữa trung tâm của hai sprites, và nếu giá trị đó nhỏ hơn ngưỡng nào đó, bạn coi nó là va chạm. Cách tiếp cận này có hai lợi thế:

• Khoảng cách va chạm là không đổi. Khoảng cách giữa các trung tâm hình ảnh sẽ không thay đổi khi hình ảnh được xoay, ngay cả khi hình ảnh thay đổi kích thước.

• Ngưỡng va chạm có thể thay đổi. Bạn có thể đặt bất kỳ độ nhạy nào bạn muốn. Đặt bán kính va chạm lớn cho các va chạm dễ dàng và một bức ảnh nhỏ hơn khi bạn muốn va chạm được kích hoạt chỉ khi sprite rất gần nhau.

Thư viện SimpleGame Thư viện Sprite có một phương thức distanceTo (), nó tính toán khoảng cách từ một ma tinh này tới một tinh thể khác. Bạn có thể thấy một ví dụ về mã này ở xa. ví dụ html:

khoảng cách. trò chơi html var; hộp var; var critter; var sản lượng; chức năng init () {game = new Scene (); trò chơi. hideCursor (); box = mới Sprite (trò chơi, "simpleBox. png", 50, 50); critter = mới Sprite (trò chơi, "critter. gif", 50, 50); output = tài liệu. getElementById ("xuất"); / / cung cấp hộp hộp vị trí cố định. setPosition (200, 150); cái hộp. setSpeed ​​(0); critter. setPosition (100, 100); critter. setSpeed ​​(0); / / critter kiểm soát bởi chuột critter. followMouse = function () {this. setX (tài liệu mouseX); điều này. setY (tài liệu mouseY);} // end followMouse game. bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); critter. followMouse (); checkDistance (); . cập nhật (); critter. cập nhật ();} / / cuối cùng cập nhật; chức năng checkDistance () { dist = hộp. distanceTo (critter); nếu (dist <50) { đầu ra. innerHTML = "Sự va chạm:" + dist; } khác { đầu ra. innerHTML = "Không va chạm:" + dist; } // end if } // end checkDistance empty

Phương pháp va chạm dựa trên khoảng cách rất giống với phiên bản bounding-rectangle. Tạo một hàm checkDistance () sẽ hoạt động giống như các checkCollisions cũ (). Đây là các bước cho những gì xảy ra trong checkDistance:

1. Tìm khoảng cách giữa hai sprites.

   Sử dụng phương pháp distanceTo () của sprite để xác định khoảng cách giữa hai sprites.

2. Nếu khoảng cách nhỏ hơn ngưỡng nào đó, tính nó như là va chạm.

   Nói chung bạn nên sử dụng chiều rộng của ma trận nhỏ hơn làm điểm bắt đầu cho một ngưỡng va chạm, nhưng bạn có thể điều chỉnh điều này để làm cho va chạm nhiều hơn hoặc ít hơn.

3. Báo cáo tình trạng va chạm.

   Trong ví dụ này, chỉ cần in "va chạm" hoặc "không va chạm", nhưng trong một trò chơi thực sự, va chạm là những kích hoạt cho các hành động khác: tăng điểm số, giảm số lượng cuộc sống, thay đổi tốc độ hoặc vị trí của các yếu tố bị va chạm, hay bất cứ cái gì. (Hy vọng, nó liên quan đến vụ nổ.)