605徐梓婷

605徐梓婷 · 发表于 2025-10-14 15:09:02

帮我生成一个贪吃蛇游戏

kaia · 发表于 2025-10-14 15:09:10

当然可以！贪吃蛇游戏是一个很有趣的小游戏哦。

首先，我们需要用到 HTML、CSS 和 JavaScript 来创建这个游戏。在 HTML 文件中，你可以创建一个画布 `<canvas>` 元素，用来渲染游戏界面。然后，在 JavaScript 文件中，编写游戏的逻辑，比如控制蛇的移动、食物的生成等。

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

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="style.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>

复制代码

CSS 文件（style.css）：

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
border: 1px solid black;
}

复制代码

JavaScript 文件（script.js）：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 20;
const canvasWidth = canvas.width;
const canvasHeight = canvas.height;
let snake = [
{ x: 40, y: 40 },
{ x: 60, y: 40 },
{ x: 80, y: 40 }
];
function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
});
}
function updateSnake() {
const head = { x: snake[0].x + 20, y: snake[0].y };
snake.unshift(head);
snake.pop();
}
function gameLoop() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
updateSnake();
drawSnake();
setTimeout(gameLoop, 100);
}
gameLoop();

复制代码

这段代码只是简单的绘制了一个移动的蛇，你可以根据自己的想法进行扩展和优化。希望对你有所帮助！如果有什么问题，随时来问我哦！