nix
117 lines
2.8 KiB
HTML
Executable File
117 lines
2.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Snake Game</title>
|
||
<style>
|
||
body {
|
||
background: #111;
|
||
color: #fff;
|
||
font-family: sans-serif;
|
||
text-align: center;
|
||
}
|
||
canvas {
|
||
background: #222;
|
||
display: block;
|
||
margin: 20px auto;
|
||
border: 2px solid #fff;
|
||
}
|
||
h1 {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Snake 🐍</h1>
|
||
<canvas id="game" width="400" height="400"></canvas>
|
||
<p>Use arrow keys to move. Eat the food, don’t hit yourself!</p>
|
||
<script>
|
||
const canvas = document.getElementById("game");
|
||
const ctx = canvas.getContext("2d");
|
||
|
||
const grid = 20;
|
||
let count = 0;
|
||
|
||
let snake = {
|
||
x: 160,
|
||
y: 160,
|
||
dx: grid,
|
||
dy: 0,
|
||
cells: [],
|
||
maxCells: 4
|
||
};
|
||
|
||
let food = {
|
||
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;
|
||
|
||
ctx.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();
|
||
|
||
ctx.fillStyle = "red";
|
||
ctx.fillRect(food.x, food.y, grid-1, grid-1);
|
||
|
||
ctx.fillStyle = "lime";
|
||
snake.cells.forEach((cell, index) => {
|
||
ctx.fillRect(cell.x, cell.y, grid-1, grid-1);
|
||
|
||
if (cell.x === food.x && cell.y === food.y) {
|
||
snake.maxCells++;
|
||
food.x = getRandomInt(0, 20) * grid;
|
||
food.y = getRandomInt(0, 20) * grid;
|
||
}
|
||
|
||
for (let 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;
|
||
food.x = getRandomInt(0, 20) * grid;
|
||
food.y = getRandomInt(0, 20) * grid;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
document.addEventListener("keydown", e => {
|
||
if (e.key === "ArrowLeft" && snake.dx === 0) {
|
||
snake.dx = -grid; snake.dy = 0;
|
||
} else if (e.key === "ArrowUp" && snake.dy === 0) {
|
||
snake.dy = -grid; snake.dx = 0;
|
||
} else if (e.key === "ArrowRight" && snake.dx === 0) {
|
||
snake.dx = grid; snake.dy = 0;
|
||
} else if (e.key === "ArrowDown" && snake.dy === 0) {
|
||
snake.dy = grid; snake.dx = 0;
|
||
}
|
||
});
|
||
|
||
requestAnimationFrame(loop);
|
||
</script>
|
||
</body>
|
||
</html>
|