Làm thế nào để Thêm Kéo Hiệu ứng vào Trò chơi HTML5 của bạn - núm vú

Nguyên tắc bổ sung vectơ có thể hữu ích cho trò chơi HTML5 theo nhiều cách. Đối với một, nó có thể thêm hiệu ứng kéo và do đó, dẫn đến hành vi chính xác hơn đất-xe. Hãy tưởng tượng chiếc xe của bạn bị mắc kẹt trong một khu phố xấu vào giữa đêm (một lần nữa). Bạn không thể đơn giản thay đổi vị trí của xe trực tiếp. Bạn thậm chí không thể thay đổi chuyển động của nó.

Bạn phải làm gì thay vào đó là thêm một lực. Khi bạn thêm lực, bạn từ từ thêm vào các vector chuyển động. Cuối cùng, chiếc xe bắt đầu di chuyển. Nếu bạn ngừng áp dụng lực, nó cuối cùng sẽ dừng lại vì sức cản của gió và sức cản lăn xe chậm lại.

Các cuộc đua kéo trò chơi

Việc kéo. ví dụ html cho thấy một chiếc xe thực tế tăng tốc từ từ và chậm lại để dừng lại khi máy gia tốc (trong trường hợp này, mũi tên lên) được phát hành.

Bạn thực sự cần phải xem chương trình đang hoạt động để đánh giá hành vi của nó.

Kéo game var; var thuyền; chức năng Car () {tCar = mới Sprite (trò chơi, "xe hơi. png", 100, 50); tCar. checkKeys = function () {console. log (tốc độ này); if (keysDown [K_LEFT]) {this. changeImgAngleBy (-5);} if (keysDown [K_RIGHT]) {this. changeImgAngleBy (5);} if (keysDown [K_UP]) ( điều này. addVector (điều này. imgAngle, 2); } // di chuyển theo hướng hiện tại này. addVector (này. imgAngle, 2);} / / checkKeys cuối cùng tCar. checkDrag = function () { tốc độ = điều này. getSpeed ​​(); tốc độ * =. 95; điều này. setSpeed ​​(tốc độ); } // end checkDrag return tCar;} // end xe def chức năng init () {game = new Scene (); trò chơi. setBG ("# 666666"); xe = xe mới (); trò chơi. bắt đầu ();) / / end init update chức năng () {game. thông thoáng(); xe hơi. checkKeys (); xe hơi. checkDrag (); xe hơi. update ();} // end update Làm thế nào để thực hiện việc kéo trong trò chơi của bạn

Phiên bản này sử dụng một động thái thực tế hơn dựa trên chuyển động. Khi người dùng nhấn vào mũi tên lên, xe sẽ tăng tốc độ. Nếu người dùng rời khỏi mũi tên lên, xe sẽ đạt tốc độ tối đa tự nhiên. Khi người dùng thả mũi tên lên, xe dần dần chậm lại và cuối cùng dừng lại. Force vector là chìa khóa.

Đây là cách hoạt động:

Xây dựng một chiếc xe cơ bản.

1. Tạo một spy tùy chỉnh với một checkKeys () phương pháp, và kiểm tra cho tất cả các phím mũi tên bình thường. Mã để kiểm tra mũi tên trái và phải là chính xác những gì bạn mong đợi.

   Di chuyển về phía trước với một vector lực.

2. Mã để di chuyển về phía trước hơi khác. Thay vì chỉ cần sửa đổi tốc độ trực tiếp, áp dụng một lực theo hướng hiện tại của xe. Sử dụng phương thức getImgAngle () của sprite để xác định hướng xe đang hướng và thêm một lực nhỏ theo hướng đó.

   Tạo một phương pháp checkDrag ().

3. Ô tô không chỉ tiếp tục đi mà không có điện. Gió và đất kháng sẽ làm chậm chúng xuống, và cuối cùng họ sẽ dừng lại. Mô phỏng các lực kéo khác nhau bằng cách thêm một phương thức checkDrag () vào đối tượng của bạn.

   Nhân tốc độ bằng một yếu tố kéo.

4. Ví dụ này, các lực kéo khác nhau sẽ cướp xe của 5 phần trăm tốc độ của mỗi khung. Hãy nhớ rằng các trò chơi đang chạy ở tốc độ 20 khung hình / giây, do đó lực kéo là khá lớn. Bạn có thể đạt được hiệu ứng kéo theo nhiều cách, nhưng cách đơn giản nhất là nhân tốc độ của ô tô bằng một giá trị nhỏ hơn 1.

   Không có phanh!

5. Xe arcade tự tôn có phanh? Nghiêm túc, bạn có thể muốn thêm một mũi tên xuống đầu vào, nhưng nó không cần thiết vì chiếc xe sẽ tự làm chậm.

   Mùa để thưởng thức.

6. Ví dụ này cung cấp phác thảo thô, nhưng bạn có thể sửa đổi một số giá trị để có được chính xác hiệu suất của chiếc xe mà bạn muốn. Bạn có thể mô phỏng một động cơ mạnh hơn (hoặc một khối lượng nhỏ hơn) bằng cách tăng vector lực khi bạn nhấn phím tăng tốc.

   Bạn có thể mô phỏng sự đình chỉ đáp ứng nhanh hơn bằng cách thay đổi tốc độ quay nếu người dùng nhấn mũi tên phải hoặc trái. Bạn cũng có thể mô phỏng một chiếc xe hiệu quả hơn hoặc ít hơn bằng cách thay đổi tỷ lệ kéo. Ngay bây giờ, chiếc xe quay ở tốc độ bất kỳ, nhưng bạn có thể ngăn cản đầu vào trái và phải mũi tên nếu xe dưới một tốc độ nhất định.