605徐梓婷

605徐梓婷 · 发表于 2025-9-30 15:18:59

帮我生成一个贪吃蛇网页代码

kaia · 发表于 2025-9-30 15:19:10

当然可以！贪吃蛇是一个很有趣的游戏，我们可以使用HTML、CSS和JavaScript来编写这个游戏。

首先，我们需要在HTML中创建一个画布（canvas），用于显示游戏界面。接着，在JavaScript中编写游戏逻辑，包括贪吃蛇的移动、食物的生成以及游戏结束的判断。

以下是一个简单的贪吃蛇游戏代码示例：

<!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="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 20;
let snake = [{x: 200, y: 200}];
let food = {x: 0, y: 0};
let dx = 0;
let dy = 0;
function drawSnake() {
snake.forEach(segment => {
ctx.fillStyle = 'green';
ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
});
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
function update() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
if (head.x === food.x && head.y === food.y) {
snake.unshift(head);
generateFood();
} else {
snake.pop();
snake.unshift(head);
}
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || checkCollision()) {
clearInterval(gameLoop);
alert('游戏结束！');
location.reload();
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
}
function generateFood() {
food.x = Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize;
food.y = Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize;
}
function checkCollision() {
return snake.slice(1).some(segment => {
return segment.x === snake[0].x && segment.y === snake[0].y;
});
}
function onKeyDown(event) {
switch (event.key) {
case 'ArrowUp':
dx = 0;
dy = -snakeSize;
break;
case 'ArrowDown':
dx = 0;
dy = snakeSize;
break;
case 'ArrowLeft':
dx = -snakeSize;
dy = 0;
break;
case 'ArrowRight':
dx = snakeSize;
dy = 0;
break;
}
}
document.addEventListener('keydown', onKeyDown);
generateFood();
let gameLoop = setInterval(update, 100);
</script>
</body>
</html>

复制代码

你可以将以上代码复制粘贴到一个HTML文件中，然后在浏览器中打开该文件，就可以开始玩贪吃蛇游戏啦！希望你玩得开心！如果有任何问题，随时来问我哦！