添加贪吃蛇游戏功能 - 科学教育

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20; // 每个方格的大小
let snake = [{ x: 200, y: 200 }]; // 初始蛇的位置
let direction = { x: 0, y: -gridSize }; // 初始蛇的方向
let food = generateFood(); // 初始化食物
function gameLoop() {
moveSnake();
checkCollision();
drawGame();
}
function moveSnake() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
snake.unshift(head); // 在蛇头前插入新的位置
if (head.x === food.x && head.y === food.y) {
food = generateFood(); // 吃到食物后生成新食物
} else {
snake.pop(); // 没有吃到食物就移除尾部
}
}
function checkCollision() {
const head = snake[0];
// 撞墙检测
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
alert('Game Over!'); // 游戏结束
resetGame();
}
// 撞自己检测
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
alert('Game Over!'); // 游戏结束
resetGame();
}
}
}
function drawGame() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 画蛇
ctx.fillStyle = 'green';
snake.forEach(part => ctx.fillRect(part.x, part.y, gridSize, gridSize));
// 画食物
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, gridSize, gridSize);
}
function generateFood() {
const x = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
const y = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
return { x, y };
}
function resetGame() {
snake = [{ x: 200, y: 200 }];
direction = { x: 0, y: -gridSize };
food = generateFood();
}
window.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
direction = { x: 0, y: -gridSize };
break;
case 'ArrowDown':
direction = { x: 0, y: gridSize };
break;
case 'ArrowLeft':
direction = { x: -gridSize, y: 0 };
break;
case 'ArrowRight':
direction = { x: gridSize, y: 0 };
break;
}
});
setInterval(gameLoop, 100);

复制代码