Giới thiệu về trò chơi khủng long chạy

Trò chơi khủng long chạy (hay còn gọi là "Dino Game") là một trò chơi được tích hợp trong trình duyệt Google Chrome， đặc biệt khi người dùng gặp phải kết nối mạng kém hoặc không có mạng. Khi người dùng cố gắng truy cập vào một trang web nhưng không có kết nối Internet， Google Chrome sẽ hiển thị một hình ảnh khủng long T-Rex và yêu cầu người chơi nhấn phím Space để bắt đầu trò chơi.

Trò chơi rất đơn giản， người chơi chỉ cần điều khiển chú khủng long nhảy qua các chướng ngại vật (cây xương rồng) hoặc tránh các động vật khác (như chim). Tuy nhiên， nhờ vào lối chơi đơn giản nhưng đầy thử thách， trò chơi này đã thu hút hàng triệu người chơi trên toàn thế giới.

Mặc dù trò chơi chỉ xuất hiện khi không có kết nối mạng， nhưng nó đã trở thành một trò chơi giải trí hấp dẫn cho nhiều người. Hôm nay， chúng ta sẽ cùng nhau xây dựng phiên bản của trò chơi này từ đầu với việc sử dụng ngôn ngữ lập trình JavaScript， HTML và CSS.

Các công cụ cần thiết

Để tạo ra một trò chơi khủng long chạy， bạn cần sử dụng một số công cụ cơ bản sau:

Trình duyệt web: Mọi trò chơi sẽ được chạy trực tiếp trên trình duyệt của bạn. Google Chrome là trình duyệt phổ biến nhất cho trò chơi này， nhưng bạn cũng có thể sử dụng bất kỳ trình duyệt nào hỗ trợ JavaScript.

Trình soạn thảo mã nguồn: Bạn có thể sử dụng bất kỳ công cụ soạn thảo mã nguồn nào như Visual Studio Code， Sublime Text， hoặc Atom để viết mã cho trò chơi.

Kỹ năng lập trình cơ bản: Để lập trình trò chơi này， bạn cần hiểu cơ bản về HTML， CSS và JavaScript. Nếu bạn chưa biết， đừng lo， bài viết sẽ hướng dẫn bạn từng bước!

Tạo giao diện cơ bản với HTML và CSS

Trước khi bắt đầu lập trình các tính năng trong trò chơi， bạn cần tạo giao diện cơ bản với HTML và CSS. Cấu trúc của trang web sẽ bao gồm một khu vực để hiển thị hình ảnh khủng long và các chướng ngại vật.

Tạo tệp HTML:

Tạo một tệp mới với tên index.html và bắt đầu bằng việc khai báo cấu trúc cơ bản của trang web.

Trò chơi khủng long chạy

Tạo tệp CSS:

Tạo một tệp style.css để tạo kiểu cho các thành phần của trò chơi. Ở đây， chúng ta sẽ tạo một khu vực chơi (game area) và thiết lập các hình ảnh cho khủng long và cây xương rồng.

body {

margin: 0;

padding: 0;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

#gameArea {

width: 600px;

height: 200px;

position: relative;

background-color: #fff;

border: 1px solid #000;

}

#dino {

width: 40px;

height: 40px;

background-color: green;

position: absolute;

bottom: 0;

left: 50px;

}

#cactus {

width: 20px;

height: 40px;

background-color: brown;

position: absolute;

bottom: 0;

right: 0;

}

Giải thích giao diện:

#gameArea là khu vực chơi chính， có kích thước 600x200px.

#dino là khủng long， sẽ có màu xanh và kích thước 40x40px.

#cactus là cây xương rồng， sẽ xuất hiện từ phía bên phải và di chuyển về phía bên trái.

Thêm chức năng nhảy cho khủng long

Bây giờ， chúng ta sẽ thêm chức năng nhảy cho khủng long. Để làm điều này， bạn cần sử dụng JavaScript để điều khiển hành động của khủng long mỗi khi người chơi nhấn phím Space.

Tạo tệp JavaScript:

Tạo một tệp script.js để viết mã điều khiển trò chơi. Bước đầu tiên là viết một hàm để làm cho khủng long nhảy khi nhấn phím Space.

const dino = document.getElementById("dino");

document.addEventListener("keydown"， function(event) {

if (event.code === "Space") {

jump();

}

});

function jump() {

if (dino.classList != "jump") {

dino.classList.add("jump");

setTimeout(function() {

dino.classList.remove("jump");

}， 500);

}

}

CSS cho nhảy:

Tiếp theo， thêm kiểu cho lớp .jump trong tệp style.css. Khi khủng long nhảy， chúng ta sẽ thay đổi vị trí của nó một chút để tạo hiệu ứng nhảy.

.jump {

animation: jump-animation 0.5s forwards;

}

@keyframes jump-animation {

0% {

bottom: 0;

}

50% {

bottom: 80px;

}

100% {

bottom: 0;

}

}

Tạo chướng ngại vật

Bây giờ， chúng ta sẽ tạo chướng ngại vật (cây xương rồng) và làm cho chúng di chuyển từ phải qua trái. Chúng ta cũng sẽ thêm một hàm để kiểm tra va chạm giữa khủng long và chướng ngại vật.

Di chuyển cây xương rồng:

Thêm mã JavaScript để làm cho cây xương rồng di chuyển từ phải qua trái và lặp lại quá trình này.

const cactus = document.getElementById("cactus");

function createCactus() {

let newCactus = document.createElement("div");

newCactus.classList.add("cactus");

newCactus.style.left = "600px";

document.getElementById("gameArea").appendChild(newCactus);

let moveCactus = setInterval(function() {

if (parseInt(newCactus.style.left) <= -20) {

clearInterval(moveCactus);

newCactus.remove();

} else {

newCactus.style.left = parseInt(newCactus.style.left) - 5 + "px";

}

}， 20);

}

setInterval(createCactus， 3000); // Tạo cây xương rồng mới mỗi 3 giây

Kiểm tra va chạm:

Để kiểm tra va chạm giữa khủng long và cây xương rồng， bạn có thể sử dụng mã sau:

function checkCollision() {

let cactus = document.querySelectorAll(".cactus");

cactus.forEach(function(cactus) {

let cactusRect = cactus.getBoundingClientRect();

let dinoRect = dino.getBoundingClientRect();

if (cactusRect.left < dinoRect.right &&

cactusRect.right > dinoRect.left &&

cactusRect.top < dinoRect.bottom &&

cactusRect.bottom > dinoRect.top) {

alert("Game Over!");

location.reload();

}

});

}

setInterval(checkCollision， 20); // Kiểm tra va chạm mỗi 20ms

Tối ưu hóa trò chơi và thêm tính năng

Sau khi hoàn thành phần cơ bản của trò chơi khủng long chạy， chúng ta có thể tiếp tục tối ưu hóa và thêm một số tính năng để làm trò chơi hấp dẫn hơn. Một số cải tiến có thể bao gồm việc thêm điểm số， tăng độ khó theo thời gian， và trang trí giao diện trò chơi.

Thêm tính năng điểm số

Để trò chơi thêm phần thú vị， bạn có thể thêm một bảng điểm hiển thị số điểm người chơi kiếm được. Điểm sẽ được cộng mỗi khi cây xương rồng di chuyển qua khung hình mà không bị va chạm với khủng long.

Hiển thị điểm số:

Thêm một phần tử HTML để hiển thị điểm số của người chơi.

Cập nhật điểm số:

Cập nhật điểm số mỗi khi cây xương rồng vượt qua khung hình mà không bị va chạm với khủng long.

let score = 0;

function updateScore() {

score++;

document.getElementById("score").textContent = "Điểm: " + score;

}

setInterval(updateScore， 1000); // Cập nhật điểm số mỗi giây

Tăng độ khó của trò chơi

Để trò chơi trở nên thú vị hơn， bạn có thể làm cho cây xương rồng di chuyển nhanh hơn khi người chơi có điểm cao. Cách đơn giản là thay đổi tốc độ di chuyển của cây xương rồng theo thời gian.

let speed = 5;

function increaseDifficulty() {

if (score % 10 === 0) {

speed += 1;

}

}

setInterval(increaseDifficulty， 1000); // Tăng độ khó mỗi giây

Tạo giao diện hấp dẫn hơn

Ngoài việc thay đổi màu sắc của các thành phần trong trò chơi， bạn cũng có thể thay thế hình ảnh của khủng long và cây xương rồng bằng các hình ảnh thực tế để tạo giao diện sinh động hơn. Dưới đây là cách bạn có thể sử dụng hình ảnh thay vì các màu sắc đơn giản:

#dino {

width: 50px;

height: 50px;

background-image: url('dino.png');

background-size: cover;

}

.cactus {

width: 30px;

height: 50px;

background-image: url('cactus.png');

background-size: cover;

}

Kết luận

Qua bài viết này， chúng ta đã tạo ra một trò chơi khủng long chạy đơn giản nhưng rất hấp dẫn. Với việc sử dụng HTML， CSS và JavaScript， bạn có thể dễ dàng xây dựng và tùy chỉnh trò chơi này theo ý thích của mình. Chúc bạn thành công và có những giờ phút thư giãn tuyệt vời!