曹语彤贪吃蛇

曹语彤 · 发表于 2025-10-10 14:56:36

帮我生成一个贪吃蛇游戏的代码，html,css,js。

kaia · 发表于 2025-10-10 14:56:49

当我们创建一个简单的贪吃蛇游戏时，代码会有一些复杂，但是我会尽量给你解释得简单易懂一些。

首先，我们需要在 HTML 文件中创建一个画布来显示游戏，可以像这样：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

然后，在 CSS 文件中，我们可以设置画布的样式，例如：

#gameCanvas {
display: block;
margin: 0 auto;
background-color: black;
}

复制代码

最后，在 JavaScript 文件中编写游戏逻辑，让贪吃蛇能够移动、吃食物等。这段代码可能会比较长，我会尽量简要地介绍：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 20;
const canvasWidth = 600;
const canvasHeight = 400;
let snake = [{ x: 10, y: 10 }];
let food = { x: 0, y: 0 };
let dx = 0;
let dy = 0;
let score = 0;
function drawSnakePart(snakePart) {
ctx.fillStyle = 'green';
ctx.fillRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
createFood();
} else {
snake.pop();
}
}
function createFood() {
food.x = Math.floor(Math.random() * (canvasWidth / snakeSize)) * snakeSize;
food.y = Math.floor(Math.random() * (canvasHeight / snakeSize)) * snakeSize;
}
function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= canvasWidth / snakeSize ||
snake[0].y < 0 || snake[0].y >= canvasHeight / snakeSize) {
gameOver();
}
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
gameOver();
}
}
}
function gameOver() {
alert('游戏结束！你的得分是：' + score);
snake = [{ x: 10, y: 10 }];
score = 0;
dx = 0;
dy = 0;
createFood();
}
function updateGame() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
moveSnake();
checkCollision();
drawFood();
snake.forEach(drawSnakePart);
setTimeout(() => {
requestAnimationFrame(updateGame);
}, 100);
}
createFood();
updateGame();
document.addEventListener('keydown', (e) => {
const keyPressed = e.key;
if (keyPressed === 'ArrowUp' && dy === 0) {
dx = 0;
dy = -1;
}
if (keyPressed === 'ArrowDown' && dy === 0) {
dx = 0;
dy = 1;
}
if (keyPressed === 'ArrowLeft' && dx === 0) {
dx = -1;
dy = 0;
}
if (keyPressed === 'ArrowRight' && dx === 0) {
dx = 1;
dy = 0;
}
});

复制代码

这就是一个简单的贪吃蛇游戏的代码示例。希望我的解释对你有帮助，如果有任何问题都可以问我哦！