3 phút để tạo trò chơi bằng JavaScript

Apr 02 2023

Bạn có thể xem mã đầy đủ tại đây https://github.com/phocaplaptrinh/simple-chrome-dinosaur-game Đầu tiên, để vẽ đồ họa trên trang web, HTML cung cấp thẻ có tên <canvas>.

Bạn có thể xem mã đầy đủ tại đâyhttps://github.com/phocaplaptrinh/simple-chrome-dinosaur-game

Đầu tiên, để vẽ đồ họa trên trang web, HTML cung cấp thẻ có tên <canvas>. Vì vậy, mình sẽ sử dụng thư viện two.js, thư viện này giúp mình thao tác với canvas dễ dàng và nhanh chóng hơn.

thư viện two.js

Tôi sẽ nhúng thư viện này vào tệp index.html của mình. Tôi cũng tạo một tệp game.js để viết tất cả mã của mình rồi nhúng vào trang web.

<!DOCTYPE html>
<html>
<head>
    <title>Dinosaur Game</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.8.10/two.min.js"></script>
    <script src="game.js"></script>
</body>
</html>

let screen = new Two({
    width: 500,
    height: 300,
    type: Two.Types.canvas
});
screen.appendTo(document.body);

À suýt quên nói là mình sẽ tạo một mini game khủng long nhảy, tương tự như mini game xuất hiện trên Google Chrome khi không có kết nối internet .

Tiếp theo, tôi sẽ vẽ một con khủng long trên màn hình trò chơi của mình . Tôi đã chuẩn bị một hình ảnh của một con khủng long với kích thước 140 x 140 pixel.

khủng long

Và tôi sẽ đặt con khủng long ở vị trí có tọa độ x là 50 và tọa độ y là 200.

let dinosaur = screen.makeSprite('dinosaur.png', 50, 200);

Để chơi trò chơi, chúng ta cần nhấn nút chơi, phải không?

screen.play();

Tôi sẽ giảm kích thước của nó xuống một nửa.

dinosaur.scale = 0.5;

Tiếp theo, tôi sẽ vẽ mặt đất để làm cho con khủng long đứng trên thay vì lơ lửng trên không. Tôi vẽ một đường thẳng có điểm bắt đầu tại (0, 235) và điểm kết thúc tại (500, 235).

let ground = screen.makeLine(0, 235, 500, 235);

Bây giờ mình sẽ vẽ kẻ thù của khủng long là cây xương rồng . Tôi cũng có một hình ảnh cây xương rồng với kích thước 60 x 140 pixel.

cây xương rồng

Và tôi vẽ nó giống như cách tôi vẽ con khủng long.

let cactus = screen.makeSprite('cactus.png', 400, 200);
cactus.scale = 0.5;

Tiếp theo, tôi cần làm cho cây xương rồng di chuyển sang trái. Tôi sẽ tạo một chức năng cập nhật và gọi nó liên tục.

function update() {

}

screen.bind('update', update);

function update() {
    cactus.position.x -= 5;
}

Vì vậy, tôi muốn đảm bảo rằng khi một cây xương rồng biến mất, một cây xương rồng mới sẽ xuất hiện. Vì vậy, tôi sẽ kiểm tra xem tọa độ x của cây xương rồng có nhỏ hơn 0 nghĩa là nó nằm ngoài màn hình không, tôi sẽ đặt lại tọa độ x của cây xương rồng về vị trí ban đầu.

function update() {
    cactus.position.x -= 5;

    if (cactus.position.x < 0) {
        cactus.position.x = 400;
    }
}

Tuy nhiên, có vẻ kỳ lạ khi cây xương rồng xuất hiện ở giữa màn hình. Vì vậy, tôi sẽ đặt vị trí ban đầu của nó bên ngoài màn hình, ví dụ, ở mức 600.

Chúng tôi vẫn không thể chơi trò chơi. Bây giờ, tôi cần làm cho con khủng long nhảy lên khi tôi nhấn phím cách. Tôi sẽ ghi lại sự kiện nhấn một phím và nếu phím được nhấn là phím cách, tôi sẽ làm cho con khủng long nhảy khoảng 150 pixel.

document.addEventListener('keypress', function(e) {
    if (e.key == ' ') {
        dinosaur.position.y -= 150;
    }
})

Vì vậy, tôi sẽ làm cho con khủng long ngã xuống bằng cách liên tục tăng giá trị tọa độ y của nó.

dinosaur.position.y += 3;

Vì vậy, tôi sẽ đặt ra một điều kiện là con khủng long chỉ bị ngã khi tọa độ y của nó thấp hơn tọa độ ban đầu là 200.

if (dinosaur.position.y <= 200) {
    dinosaur.position.y += 3;
}

if (e.key == ' ' && dinosaur.position.y >= 200) {
    dinosaur.position.y -= 150;
}

Bước cuối cùng là viết điều kiện để kiểm tra xem khi chú khủng long chạm vào cây xương rồng thì trò chơi sẽ dừng lại. Bạn có thể nghĩ về lý do tại sao tôi đã viết nó như thế này.