Game rắn đã quá quen thuộc với chúng ta khi gắn liền với thời đại những chiếc điện thoại trắng đen – khi mà smartphone chưa phổ biến. Hôm nay, mình sẽ hướng dẫn các bạn code lại game huyền thoại này bằng javascript. Đặc biệt, rắn này hoàn toàn không sợ tường nữa, tuy nhiên vẫn sẽ không bất tử nếu như cẵn vào thân.
Đầu tiên, các bạn tạo 1 file HTML tên là index.html
Thêm Css:
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
background: black;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
border: 1px solid white;
}
</style>
Phần body chúng ta tạo 1 canvas với chiều rộng 400 và chiều cao 400
<canvas width="400" height="400" id="game"></canvas>Cuối cùng là script:
<script>
var canvas = document.getElementById("game");
var context = canvas.getContext("2d");
var grid = 16;
var snake = {
x: 160,
y: 160,
dx: grid,
dy: 0,
cells: [],
maxCells: 4,
};
var count = 0;
var apple = {
x: 320,
y: 320,
};
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function loop() {
requestAnimationFrame(loop);
if (++count < 4) {
return;
}
count = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
snake.x += snake.dx;
snake.y += snake.dy;
if (snake.x < 0) {
snake.x = canvas.width - grid;
} else if (snake.x >= canvas.width) {
snake.x = 0;
}
if (snake.y < 0) {
snake.y = canvas.height - grid;
} else if (snake.y >= canvas.height) {
snake.y = 0;
}
snake.cells.unshift({ x: snake.x, y: snake.y });
if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}
context.fillStyle = "red";
context.fillRect(apple.x, apple.y, grid - 1, grid - 1);
context.fillStyle = "green";
snake.cells.forEach(function (cell, index) {
context.fillRect(cell.x, cell.y, grid - 1, grid - 1);
if (cell.x === apple.x && cell.y === apple.y) {
snake.maxCells++;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
for (var i = index + 1; i < snake.cells.length; i++) {
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = grid;
snake.dy = 0;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
}
});
}
document.addEventListener("keydown", function (e) {
if (e.which === 37 && snake.dx === 0) {
snake.dx = -grid;
snake.dy = 0;
} else if (e.which === 38 && snake.dy === 0) {
snake.dy = -grid;
snake.dx = 0;
} else if (e.which === 39 && snake.dx === 0) {
snake.dx = grid;
snake.dy = 0;
} else if (e.which === 40 && snake.dy === 0) {
snake.dy = grid;
snake.dx = 0;
}
});
requestAnimationFrame(loop);
</script>Như vậy chúng ta đã hoàn thành, chạy và cảm nhận thử nào.
Cựu học viên Ironhack Việt Nam – Hiện là full-stack Developer tại All Xone
