Snake mini game là gì?
Snake mini game mô phỏng một chú rắn di chuyển trong một lưới ô vuông.
Mỗi lần rắn ăn được thức ăn, độ dài của nó tăng lên một đơn vị và điểm số cũng tăng theo.
Người chơi điều khiển hướng di chuyển bằng các phím mũi tên hoặc tổ hợp phím tương đương.
Mục tiêu là đạt được điểm số càng cao càng tốt mà không va chạm vào tường hoặc thân rắn.
Phiên bản cơ bản có thể chạy hoàn toàn trên trình duyệt, chỉ cần sử dụng phần tử <canvas> của HTML5 để vẽ rắn, thức ăn và nền trò chơi.
Cấu trúc HTML cơ bản của Snake mini game
Để xây dựng một Snake mini game đơn giản, cần chuẩn bị một phần tử canvas để vẽ trò chơi và một số phần tử hiển thị thông tin như điểm số và nút điều khiển.
Ví dụ cấu trúc HTML tối giản:
<div class="snake-game">
<h2>Snake mini game</h2>
<canvas id="snake-canvas" width="400" height="400"></canvas>
<p>Điều khiển bằng các phím mũi tên để di chuyển rắn.</p>
<p>Điểm số: <span id="snake-score">0</span></p>
<button id="snake-restart" type="button">Chơi lại</button>
</div>
Phần tử <canvas> là khu vực chính để trò chơi diễn ra. Điểm số được hiển thị trong thẻ <span>, còn nút Chơi lại giúp người chơi khởi động lại trò chơi khi thua.
CSS cơ bản cho khu vực trò chơi
Snake mini game cần một khu vực hiển thị rõ ràng, với canvas có đường viền và nội dung được căn giữa gọn gàng. Ví dụ CSS dưới đây giúp định dạng giao diện đơn giản cho trò chơi.
.snake-game {
max-width: 420px;
margin: 16px 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#snake-canvas {
display: block;
border: 1px solid #e5e7eb;
background: #111827;
margin-bottom: 8px;
}
.snake-game p {
margin: 4px 0;
}
Trong ví dụ này, canvas được đặt nền tối để rắn và thức ăn nổi bật hơn, đồng thời thêm đường viền mỏng để người chơi dễ nhận biết khu vực trò chơi.
Viết JavaScript điều khiển Snake mini game
JavaScript là phần quan trọng nhất của Snake mini game. Trò chơi cần các thành phần chính sau:
- Một lưới ô vuông, mỗi ô có kích thước cố định.
- Một mảng lưu vị trí các đoạn thân rắn.
- Một vị trí thức ăn ngẫu nhiên trong lưới.
- Vòng lặp trò chơi để di chuyển rắn, kiểm tra va chạm và cập nhật điểm.
- Xử lý sự kiện bàn phím để đổi hướng di chuyển.
Ví dụ JavaScript cơ bản cho Snake mini game:
(function() {
var canvas = document.getElementById("snake-canvas");
var ctx = canvas.getContext("2d");
var scoreEl = document.getElementById("snake-score");
var restartBtn = document.getElementById("snake-restart");
var gridSize = 20;
var tileCount = canvas.width / gridSize;
var snake;
var direction;
var food;
var score;
var loopId;
function initGame() {
snake = [
{ x: 8, y: 10 },
{ x: 7, y: 10 },
{ x: 6, y: 10 }
];
direction = { x: 1, y: 0 };
score = 0;
scoreEl.textContent = score;
placeFood();
if (loopId) {
clearInterval(loopId);
}
loopId = setInterval(gameLoop, 120);
}
function placeFood() {
food = {
x: Math.floor(Math.random() * tileCount),
y: Math.floor(Math.random() * tileCount)
};
}
function gameLoop() {
var head = {
x: snake[0].x + direction.x,
y: snake[0].y + direction.y
};
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
endGame();
return;
}
for (var i = 0; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
endGame();
return;
}
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
scoreEl.textContent = score;
placeFood();
} else {
snake.pop();
}
draw();
}
function draw() {
ctx.fillStyle = "#111827";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ef4444";
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
for (var i = 0; i < snake.length; i++) {
ctx.fillStyle = i === 0 ? "#22c55e" : "#4ade80";
ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
}
}
function endGame() {
clearInterval(loopId);
ctx.fillStyle = "rgba(15, 23, 42, 0.8)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f9fafb";
ctx.font = "20px system-ui";
ctx.textAlign = "center";
ctx.fillText("Trò chơi kết thúc", canvas.width / 2, canvas.height / 2);
ctx.font = "14px system-ui";
ctx.fillText("Nhấn Chơi lại để bắt đầu ván mới", canvas.width / 2, canvas.height / 2 + 24);
}
function handleKey(event) {
var key = event.key;
if (key === "ArrowUp" && direction.y !== 1) {
direction = { x: 0, y: -1 };
} else if (key === "ArrowDown" && direction.y !== -1) {
direction = { x: 0, y: 1 };
} else if (key === "ArrowLeft" && direction.x !== 1) {
direction = { x: -1, y: 0 };
} else if (key === "ArrowRight" && direction.x !== -1) {
direction = { x: 1, y: 0 };
}
}
document.addEventListener("keydown", handleKey);
restartBtn.addEventListener("click", initGame);
initGame();
})();Đoạn mã trên xây dựng đầy đủ một vòng lặp trò chơi với khả năng di chuyển rắn theo hướng phím mũi tên, ăn thức ăn, tăng điểm và kết thúc trò chơi khi va chạm.
Demo Snake mini game
Ví dụ dưới đây là một demo hoạt động trực tiếp của Snake mini game. Người đọc có thể sử dụng các phím mũi tên để điều khiển rắn, ăn thức ăn để tăng điểm và tránh va vào tường hoặc thân rắn.
Demo Snake mini game
Điều khiển bằng các phím mũi tên trên bàn phím.
Điểm số: 0
Mở rộng tính năng cho Snake mini game
Từ phiên bản cơ bản, Snake mini game có thể được mở rộng theo nhiều hướng:
- Thêm các cấp độ tốc độ khác nhau và tăng tốc theo điểm số.
- Hiển thị bảng điểm cao nhất bằng cách lưu dữ liệu trong
localStorage. - Thêm âm thanh khi ăn thức ăn hoặc khi trò chơi kết thúc.
- Thiết kế lại màu sắc và chủ đề cho phù hợp với phong cách giao diện riêng.
Kết luận
Snake mini game là một ví dụ điển hình để luyện tập tư duy thuật toán và kỹ năng lập trình JavaScript với canvas.
Trò chơi này kết hợp thao tác với mảng, xử lý sự kiện bàn phím, vẽ đồ họa 2D và quản lý vòng lặp trò chơi.
Từ nền tảng cơ bản, người học có thể dần mở rộng và tinh chỉnh để biến Snake mini game thành một dự án giải trí nhỏ nhưng đầy tính ứng dụng và thú vị.
Bình luận