Làm thế nào để Thêm Gravity vào Trò chơi HTML5 của bạn - những con số

Tính toán trọng lực là một phần của các trò chơi video HTML5 ngay từ đầu. Có hai loại lực hấp dẫn cần xem xét. Trong các trò chơi theo phong cách nền tảng, người chơi đang ở gần một hành tinh, và tất cả trọng lực dường như kéo mọi thứ xuống.

Khi bạn biết làm thế nào để thêm vectơ tăng tốc, trọng lực nền tảng thực sự là dễ dàng để làm việc với. Nghĩ về trọng lực như một lực liên tục luôn luôn kéo một lượng nhỏ mỗi khung.

Làm thế nào để thêm tên lửa vào chuyến đi của trò chơi

Ví dụ này có một tính năng thú vị khác. Khi bạn nhấn mũi tên lên, hình ảnh xe sẽ được đổi thành hình ảnh khác với ngọn lửa.

Mã cho ví dụ hoverCar được hiển thị ở đây một cách toàn bộ:

hoverCar. html var xe; var city; trò chơi var; chức năng Car () {tCar = mới Sprite (trò chơi, "hoverCar. png", 70, 50); tCar. setSpeed ​​(0); tCar. hSpeed ​​= 0 tCar. checkKeys = function () {tCar. changeImage ("hoverCar. png"); if (keysDown [K_LEFT]) { điều này. hSpeed ​​- = 1 } nếu (keysDown [K_RIGHT]) { này. hSpeed ​​+ = 1 } nếu (keysDown [K_UP]) { điều này. addVector (0, 5); điều này. changeImage ("hoverCarThrust. png") ;} điều này. thay đổiXby (điều này hSpeed.); } // end checkKeys tCar. checkGravity = function () { if (this.y> 580) { điều này. setPosition (điều này x, 580); } khác { điều này. addVector (180,.1); } // end if } // end checkGravity return tCar;} // end xe def chức năng init () {game = new Scene (); xe = xe mới (); city ​​= new Sprite (trò chơi, "city. png", 800, 600); thành phố. setSpeed ​​(0); thành phố. setPosition (400, 300); trò chơi. bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); thành phố. cập nhật (); xe hơi. checkKeys (); xe hơi. checkGravity (); xe hơi. update ();} // end update

Làm thế nào để sử dụng vector lực trong game của bạn

Gravity thực sự khá đơn giản. Nó chỉ đơn giản là một vector lực. Các phần thú vị khác của ví dụ này liên quan đến việc thay đổi chuyển động theo chiều ngang mà không thay đổi góc nhìn của xe và điều chỉnh hình ảnh để cho biết thruster. Dưới đây là các bước:

1. Tạo hai hình ảnh khác nhau.

   Sử dụng trình chỉnh sửa hình ảnh của bạn để tạo hai phiên bản khác nhau của hình ảnh.

2. Tạo một sprite bình thường.

   Giống như hầu hết các xe sprites, bạn cần một checkKeys () phương pháp. Điều này được thiết lập theo cách thông thường, nhưng hành vi hơi khác một chút.

3. Đặt hình ảnh là mặc định.

   Hình ảnh mặc định không có thrusters. Sử dụng phương thức changeImage () để làm hình ảnh mặc định. Khi các thrusters được bật, hình ảnh sẽ được thay đổi.

4. Sử dụng một biến để điều khiển tốc độ ngang.

   Bạn có thể tạo biến hSpeed ​​để quản lý tốc độ ngang của xe.

5. Đặt các mũi tên trái và phải để sửa đổi hSpeed.

   Các phím mũi tên trái và phải làm thay đổi biến hSpeed.

6. Sử dụng thay đổiXby để đặt tốc độ ngang.

   Sau khi kiểm tra tất cả các phím, thay đổi giá trị x của xe sang giá trị hiện tại của hSpeed.

7. Mũi tên lên sẽ thêm một vector lên trên.

   Sử dụng hàm AddVector () hiện nay nổi tiếng để thêm một vector lực nhỏ trở lên khi người dùng nhấn mũi tên lên. Hãy nhớ rằng 0 độ là lên. Chơi với giá trị này để có được lực đẩy bạn muốn cho trò chơi của bạn.

8. Hiển thị các máy đẩy khi mũi tên lên được nhấn.

   Nếu người dùng đang nhấn mũi tên lên, bạn cần hiển thị các máy đẩy. Sử dụng phương pháp changeImage () để đặt hình ảnh của quả táo vào một trong những máy phát tên lửa.

9. Xây dựng phương thức checkGravity ().

   Phương pháp này sẽ được gọi là mỗi khung để bù cho trọng lực.

10. Kiểm tra xem bạn đang ở trên mặt đất hay không.

    Trong ví dụ này, mặt đất được định nghĩa là một giá trị y lớn hơn 580.

11. Nếu bạn không ở trên mặt đất, hãy thêm một vector lực hấp dẫn.

    Bởi vì nó sẽ tích lũy, lực hấp dẫn vector cần phải được khá nhỏ. Bạn sẽ cần phải cân bằng lực của trọng lực và thrusters để có được những hành vi mà bạn muốn. Nếu lực hấp dẫn quá mạnh, các máy đẩy sẽ không hoạt động. Nếu bộ đẩy quá mạnh, chiếc xe chỉ cần bay vào không gian.