Hướng dẫn snake game javascript code - mã javascript trò chơi con rắn
Xin chào mọi người hôm nay chúng ta cùng nhau đi tìm hiểu cách để xây dựng một game đơn giản với HTML và JS như thế nào nhé. Trò chơi này rất đơn giản và cũng khá nhiều người biết đến đó là Snake. Bắt đầu thôi HTMLViệc đầu tiên là chúng ta sẽ tạo một tệp index.html như sau
JavascriptTiếp theo thẻ Canvas chúng ta sẽ thêm thẻ script, đây chính là nơi chúng ta xây dựng Javascript để xử lý logic con rắn và render vào canvas. Trước tiên, hãy xác định những gì sẽ xảy ra khi sự kiên window.onload. Chúng ta muốn có được bối cảnh của canvas, chúng ta muốn nhận các sự kiện phím bấm của người chơi và render lại vị trí mới của con rắn cùng miếng mồi thường xuyên.
Sau 8 giây thì chúng ra sẽ vẽ lại một lần. Chúng ta có thể làm nó nhanh hơn bằng cách thay đổi x. InputBây giờ chúng ta cần xác định hàm keyDownEvent. Key codes chính là các phím mũi tên trên bàn phím, bắt đầu bằng phím mũi tên trái và đi theo chiều kim đồng hồ.
nextX và nextY đại diện cho hướng của con rắn. Có nghĩa là nếu chúng ta đi bên trái thì sẽ Y giống nhau nhưng X phải thay đổi. SnakeBây giờ chúng ta sẽ tạo ra con rắn
Giá trị mặc định của con rắn sẽ là 3. Chúng ta sẽ bắt đầu với kích thước con rắn là mặc định. 2 là cơ thể con rắn, nó lẽ là một loạt các vị trí X và Y. snakeX và snakeY là trị trí ban đầu của con rắn.Game worldgame world (khu vực chơi) là nơi mà con rắn và mồi ăn sẽ được hiển thị. Nó được định nghĩa là một grid 20x20 phù hợp với chiều rộng và chiều cao của canvas.
Mồi rắnĐối với mồi rắn chúng ta chỉ cần xác định vị trí X và Y
Cập nhật khu vực chơiSau mỗi lần x chạy chúng ta sẽ phải gọi làm hàm draw. Nó sẽ làm một vài điều. Đầu tiên chúng ta cần di chuyển chon rắn đến vị trí tiếp theo.
Nhưng chúng ta cũng cần kiểm tra xem con rắn có nằm ngoài giới hạn của khu vực chơi không và thiết lập lại vị trí để nó có vẻ xuất hiện từ phía ngược lại
Bây giờ chúng ta cần kiểm tra nếu ở vị trí này con rắn có ăn được miếng mồi không. Nếu có chúng ta cần tăng kích thước của con rắn và tính toán vị trí mới cho miếng mồi.
Tiếp theo chúng ta cần vẽ lại background
Bây giờ là xây dựng con rắn. Nhưng trong khi chúng ta vẽ con rắn, chúng ta phải kiểm tra xem con rắn có cắn vào người nó không. Điều đó có nghĩa là chúng ta phải thiết lập con rắn về kích thước bắt đầu của nó. 0Xây dựng miếng mồi 1Và cuối cùng, chúng ta kiểm tra xem snakeTrail có vượt qua kích thước của con rắn không. Nếu có chúng ta sẽ chuyển trị trí cuối cùng ra khỏi snakeTrail. |