Làm thế nào để Thêm chuyển động thực tế vào Trò chơi HTML5 của bạn - những con cần

Hãy nhìn vào không gian. html. Trò chơi đơn giản này cung cấp một ví dụ điển hình cho việc chuyển động thực tế tới trò chơi HTML5 của bạn. Nó sử dụng các chương trình điều khiển nổi tiếng trong các trò chơi cổ điển Asteroids và Spacewar! Mặc dù tiểu hành tinh được biết đến hơn, Spacewar! là một trò chơi sớm hơn và có ảnh hưởng hơn.)

Nhấp vào đây để có trải nghiệm đầy đủ.

Làm thế nào để thêm một vector lực vào đối tượng trò chơi của bạn

Con tàu được điều khiển bởi các phím mũi tên, nhưng hiệu quả của Newton dễ nhìn thấy trong không gian hơn trên mặt đất (không có lực cản pesky để có được trong cách). Các phím mũi tên trái và phải quay tàu, nhưng chúng không ảnh hưởng đến chuyển động của tàu. Mũi tên lên bắn ra một tên lửa, bổ sung một vector lực theo hướng tàu hiện đang đối mặt.

Đây là mã:

tàu var space; trò chơi var; chức năng Ship () {tShip = Mới Sprite (trò chơi, "ship. png", 25, 25); tShip. setSpeed ​​(3); tShip. checkKeys = function () {if (keysDown [K_LEFT]) { điều này. thay đổiImgAngleBy (-5); } if (keysDown [K_RIGHT]) { điều này. thay đổiImgAngleBy (5); } if (keysDown [K_UP]) { điều này. addVector (điều này. getImgAngle (),.1); }} / / end function return tShip;} // hàm định nghĩa đối tượng init () {game = new Scene (); ship = ship mới (); trò chơi. setBG ("đen"); trò chơi. bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); tàu. checkKeys (); tàu. update ();} // end update

Làm thế nào để mô phỏng không gian trong trò chơi của bạn

Đây là tóm tắt:

1. Bắt đầu ví dụ theo cách thông thường.

   Giống như hầu hết các bản demo đơn giản, hãy bắt đầu bằng một hình tượng và một cảnh. Bởi vì con tàu sẽ có một phương pháp tùy chỉnh, bạn làm cho nó một đối tượng duy nhất.

2. Cho tàu một phương pháp checkKeys ().

   Phương pháp checkKeys () tìm kiếm các bấm phím và thay đổi hành vi của con tàu.

3. Thay đổi góc ảnh.

   Một sprite thực sự có hai góc nhìn khác nhau. Nó có thể có một góc mà nó chỉ (gọi là imgAngle trong simpleGame) và góc nó di chuyển (gọi là moveAngle). Khi bạn thay đổi góc, bạn đang thay đổi cả hai chuyển động và các góc hình ảnh trên giả định rằng các đối tượng sẽ chỉ đi theo hướng nó phải đối mặt.

   Đối với các ví dụ đơn giản, điều này là tốt, nhưng nhiều loại chuyển động đòi hỏi phải tách rời hình ảnh và góc độ chuyển động. Phương thức changeImgAngleBy () cho phép bạn thay đổi hướng mà hình ảnh đang trỏ mà không thay đổi góc độ chuyển động. (Có một phương thức changeMotionAngle (), nhưng nó không được sử dụng rất thường xuyên.)

4. Thêm một vector lực để mô phỏng lực đẩy.

   Khi người dùng nhấn mũi tên lên, tàu sẽ bắn tên lửa chính. Điều này cho biết thêm một vector lực nhỏ theo hướng mà tàu hiện đang đối mặt. Sử dụng phương thức getImgAngle () để xác định hướng mà con tàu đang phải đối mặt và sử dụng giá trị này để chỉ định vị trí cần thêm lực.

   Bởi vì mã này đang xảy ra trong vòng lặp hoạt hình và được khuếch đại khi phím mũi tên được giữ xuống, chỉ cần một lực rất nhỏ.