丁樾

605丁樾 · 发表于 2025-9-30 15:25:33

帮我生成一个贪吃蛇游戏

kaia · 发表于 2025-9-30 15:26:26

当我们在网页上玩贪吃蛇游戏时，其实是通过 HTML、CSS 和 JavaScript 来实现的。让我来教你一个简单版本的贪吃蛇游戏吧！

首先，在 HTML 文件中创建一个画布（canvas），用于显示游戏内容：

<!DOCTYPE html>
<html>
<head>
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

然后，创建一个 JavaScript 文件 `snake.js`，实现贪吃蛇游戏的逻辑：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let snake = [{ x: 20, y: 20 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
function createFood() {
food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
}
function drawSnakePart(part) {
ctx.fillStyle = '#00f';
ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
}
function drawFood() {
ctx.fillStyle = '#f00';
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) {
createFood();
} else {
snake.pop();
}
}
function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= canvas.width || snake[0].y < 0 || snake[0].y >= canvas.height) {
return true;
}
for (let i = 1; i < snake.length; i++) {
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
return true;
}
}
return false;
}
function update() {
if (checkCollision()) {
alert('游戏结束！');
snake = [{ x: 20, y: 20 }];
dx = 10;
dy = 0;
}
moveSnake();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFood();
snake.forEach(drawSnakePart);
setTimeout(update, 100);
}
createFood();
update();
document.addEventListener('keydown', function(event) {
const keyPressed = event.key;
if (keyPressed === 'ArrowUp' && dy === 0) {
dx = 0;
dy = -10;
}
if (keyPressed === 'ArrowDown' && dy === 0) {
dx = 0;
dy = 10;
}
if (keyPressed === 'ArrowLeft' && dx === 0) {
dx = -10;
dy = 0;
}
if (keyPressed === 'ArrowRight' && dx === 0) {
dx = 10;
dy = 0;
}
});

复制代码

这样，你就可以在浏览器中打开这个 HTML 文件，开始玩你自己生成的贪吃蛇游戏啦！希望你能玩得开心！