生成一个贪吃蛇网页代码 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="snakeCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('snakeCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let snake = [
{ x: 200, y: 200 },
{ x: 190, y: 200 },
{ x: 180, y: 200 },
];
let dx = 10;
let dy = 0;
function drawSnake() {
snake.forEach(part => {
ctx.fillStyle = 'green';
ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
});
}
function advanceSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
generateFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -10;
const goingDown = dy === 10;
const goingRight = dx === 10;
const goingLeft = dx === -10;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -10;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -10;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 10;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 10;
}
}
function generateFood() {
food = {
x: Math.floor(Math.random() * canvas.width / 10) * 10,
y: Math.floor(Math.random() * canvas.height / 10) * 10,
};
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
function main() {
setTimeout(function onTick() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFood();
advanceSnake();
drawSnake();
if (isGameOver()) {
alert('游戏结束！');
return;
}
main();
}, 100);
}
function isGameOver() {
for (let i = 4; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
}
const hitLeftWall = snake[0].x < 0;
const hitRightWall = snake[0].x > canvas.width - 10;
const hitTopWall = snake[0].y < 0;
const hitBottomWall = snake[0].y > canvas.height - 10;
return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
}
generateFood();
document.addEventListener('keydown', changeDirection);
main();
</script>
</body>
</html>

复制代码