科学教育

标题: 廖晗瑞 [打印本页]

作者: 廖晗瑞 时间: 2024-8-14 18:58
标题: 廖晗瑞
帮我做一个完善的贪吃蛇游戏

作者: kaia 时间: 2024-8-14 18:59
当然可以！让我们一起做一个简单又有趣的贪吃蛇游戏吧。在此之前，你需要一些网页编程的基础知识，比如HTML、CSS和JavaScript。如果你还不熟悉它们，不用担心，我会尽量一步一步讲解，帮助你理解。

### 第一步：创建基本的HTML结构
首先，我们需要创建一个HTML文件，让我们的网页有一个基本的结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
/* 我们后面会在这里写CSS样式 */
</style>
</head>
<body>
<h1>贪吃蛇游戏</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// 我们后面会在这里写JavaScript代码
</script>
</body>
</html>

复制代码

在这个HTML文件中，我们添加了一个`<canvas>`标签，这将是游戏的画布。接下来，我们会使用JavaScript在这个画布上绘制贪吃蛇游戏。

### 第二步：添加CSS样式
我们可以先给画布一些简单的样式，让它看起来美观一些。

<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 1px solid #000;
background-color: #fff;
}
</style>

复制代码

这段CSS代码会让画布在页面中居中显示，并赋予它一个边框和白色背景。

### 第三步：编写JavaScript代码
JavaScript是贪吃蛇游戏的核心部分，我们会在这里实现游戏逻辑。

<script>
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20;
let snake = [];
snake[0] = { x: 9 * box, y: 10 * box };
let food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
}
let score = 0;
let d;
document.addEventListener('keydown', direction);
function direction(event) {
if (event.keyCode == 37 && d != 'RIGHT') {
d = 'LEFT';
} else if (event.keyCode == 38 && d != 'DOWN') {
d = 'UP';
} else if (event.keyCode == 39 && d != 'LEFT') {
d = 'RIGHT';
} else if (event.keyCode == 40 && d != 'UP') {
d = 'DOWN';
}
}
function collision(newHead, array) {
for (let i = 0; i < array.length; i++) {
if (newHead.x == array[i].x && newHead.y == array[i].y) {
return true;
}
}
return false;
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
context.fillStyle = (i == 0) ? 'green' : 'black';
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = 'red';
context.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (d == 'LEFT') snakeX -= box;
if (d == 'UP') snakeY -= box;
if (d == 'RIGHT') snakeX += box;
if (d == 'DOWN') snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
}
} else {
snake.pop();
}
let newHead = {
x: snakeX,
y: snakeY
}
if (snakeX < 0 || snakeY < 0 || snakeX >= 400 || snakeY >= 400 || collision(newHead, snake)) {
clearInterval(game);
alert('游戏结束');
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText('得分: ' + score, 5, canvas.height - 5);
}
let game = setInterval(draw, 100);
</script>

复制代码

### 总结
通过以上的步骤，我们完成了一个简单的贪吃蛇游戏。你可以根据自己的兴趣和需求，进一步完善和改进游戏，比如添加开始界面、暂停功能等。希望你玩得开心，并从中学习到更多的编程知识！如果还有其他问题，欢迎随时提问哦！

作者: 廖晗瑞 时间: 2024-8-14 19:00
帮我再优化一点

作者: kaia 时间: 2024-8-14 19:00

廖晗瑞发表于 2024-08-14 19:00
帮我再优化一点

好的！我们可以进行一些优化，使代码更加简洁、易读，同时增加一些功能和效果。让我们来逐步实现这些优化。

### 第一步：优化HTML结构
HTML部分基本保持不变，但我们可以为画布和样式添加一些更直观的注释和标签。确保我们的HTML文件结构清晰，便于维护和阅读。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
/* CSS 样式 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
// JavaScript 代码将在这里编写
</script>
</body>
</html>

复制代码

### 第二步：优化JavaScript代码
我们将对JavaScript代码进行优化，包括函数组织，变量命名以及逻辑结构。另外，我们可以增加一个开始界面，并在游戏结束后重新开始游戏。

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 设定每个格子的大小
let snake = [
{ x: 9 * box, y: 10 * box }
];
let food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
let score = 0;
let direction;
// 添加事件监听器来控制蛇的移动方向
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : 'black';
context.fillRect(snake[i].x, snake[i].y, box, box);
}
// 绘制食物
context.fillStyle = 'red';
context.fillRect(food.x, food.y, box, box);
// 获取蛇头的当前位置
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// 根据方向更新蛇头的位置
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
// 检查蛇是否吃到食物
if (snakeX === food.x && snakeY === food.y) {
score++;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop(); // 移除蛇尾部
}
// 创建新的蛇头
let newHead = { x: snakeX, y: snakeY };
// 检查是否撞墙或撞到自己
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert('游戏结束');
return;
}
// 将新头添加到蛇的开头
snake.unshift(newHead);
// 显示得分
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText('得分: ' + score, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
// 开始游戏：设置一个定时器，每100毫秒重绘一次画布
let game = setInterval(drawGame, 100);

复制代码

### 第三步：添加开始页面和重新开始功能
我们可以再添加一些代码，让玩家在游戏结束后可以重新开始游戏。这需要修改HTML和JavaScript部分。

HTML部分：

<button id="startButton" onclick="startGame()">开始游戏</button>
<canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>
<style>
#startButton {
display: block;
margin-bottom: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>

复制代码

JavaScript部分：

let game;
document.getElementById('startButton').addEventListener('click', startGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
game = setInterval(drawGame, 100);
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = undefined;
}

复制代码

至此，我们优化了贪吃蛇游戏，增加了一个开始按钮和重新开始功能。在优化后的代码中，我们通过函数组织和更直观的变量命名，使代码更容易阅读和维护。如果你又有更多的创新想法或功能需求，也可以继续扩展这个简单的游戏。希望你能从中学到更多的编程知识，并享受编程的乐趣！如果还有问题，请随时告诉我。

作者: 廖晗瑞 时间: 2024-8-14 19:01
帮我增加一些功能

作者: kaia 时间: 2024-8-14 19:01

廖晗瑞发表于 2024-08-14 19:01
帮我增加一些功能

好的！我们可以添加一些新功能来增强游戏体验。下面列出了一些新增功能：

1. **增加游戏难度设置**：让玩家选择简单、普通和困难模式，不同模式下蛇的移动速度不同。
2. **记录最高得分**：在页面上显示玩家的最高得分，激励玩家挑战更高的分数。
3. **暂停功能**：允许玩家在游戏过程中暂停游戏。

我们将逐步实现这些功能。

### 第一步：修改HTML结构
我们需要增加一些新的按钮和标签到HTML文件中，用于难度选择、显示最高得分以及暂停游戏。

贪吃蛇游戏

      /* CSS 样式 */
      body {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: 100vh;
         margin: 0;
         font-family: Arial, sans-serif;
         background-color: #f0f0f0;
      }
      #gameCanvas {
         border: 2px solid #000;
         background-color: #fff;
      }
      .controls {
         margin-bottom: 20px;
      }
      button {
         padding: 10px 20px;
         font-size: 16px;
         margin: 5px;
         cursor: pointer;
      }

贪吃蛇游戏

      <div class="controls">
         <button id="startButton">开始游戏</button>
         <button id="pauseButton" style="display:none;">暂停</button>
         <label for="difficulty">难度:</label>
         <select id="difficulty">
            <option value="easy">简单</option>
            <option value="normal">普通</option>
            <option value="hard">困难</option>
         </select>
      </div>
      <canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
      <div id="scoreDisplay">最高得分: <span id="highScore">0</span></div>

### 第二步：优化JavaScript代码
接下来，我们需要在JavaScript中实现这些新功能。

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval;
let highScore = 0; // 最高得分
// 难度设置
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
}
function pauseGame() {
if (game) {
clearInterval(game);
game = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
game = setInterval(drawGame, gameInterval);
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = ;
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = undefined;
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
// 绘制蛇
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : 'black';
context.fillRect(snake.x, snake.y, box, box);
}
// 绘制食物
context.fillStyle = 'red';
context.fillRect(food.x, food.y, box, box);
// 获取蛇头的当前位置
let snakeX = snake.x;
let snakeY = snake.y;
// 根据方向更新蛇头的位置
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
// 检查蛇是否吃到食物
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop(); // 移除蛇尾部
}
// 创建新的蛇头
let newHead = { x: snakeX, y: snakeY };
// 检查是否撞墙或撞到自己
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert('游戏结束');
return;
}
// 将新头添加到蛇的开头
snake.unshift(newHead);
// 显示得分
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText('得分: ' + score, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array.x && head.y === array.y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
document.getElementById('highScore').innerText = highScore;
}
}
// 开始游戏：设置一个定时器，每100毫秒重绘一次画布

复制代码

### 总结
通过以上步骤，我们为简单的贪吃蛇游戏增加了难度设置、最高得分记录和暂停功能。通过这些功能的实现，玩家可以有更多的选择和更好的游戏体验。当然还有很多其他的扩展功能，比如音效、皮肤等，你可以尝试自行添加。希望你能从中学到更多的编程知识，并享受编程的乐趣！如果有任何问题，请随时告诉我。

作者: 廖晗瑞 时间: 2024-8-14 19:04
还可以怎么完善游戏与增加功能

作者: kaia 时间: 2024-8-14 19:04

廖晗瑞发表于 2024-08-14 19:04
还可以怎么完善游戏与增加功能

当然，我们还可以添加更多的功能和改进来进一步完善贪吃蛇游戏。以下是一些建议：

### 增加的新功能和优化
1. **计时器**：根据游戏进行时间增加得分。
2. **音效**：在吃到食物或撞墙时播放声音。
3. **蛇的外观**：为蛇和食物添加不同的皮肤或图像。
4. **障碍物**：在游戏中随机生成障碍物增加难度。
5. **边界穿越**：让蛇可以从一个边界穿越到另一个边界。
6. **游戏记录**：保存每次游戏的得分和时间。

我们先来实现部分功能，例如计时器和音效。

### 设置计时器和音效

#### HTML 增加部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<button id="startButton">开始游戏</button>
<button id="pauseButton" style="display:none;">暂停</button>
难度:
<select id="difficulty">
<option value="easy">简单</option>
<option value="normal">普通</option>
<option value="hard">困难</option>
</select>
</div>
<canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
<p>最高得分: <span id="highScore">0</span></p>
<p>时间: <span id="time">0</span> 秒</p>
<audio id="eatSound" src="eat.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>
<script>

复制代码

#### JavaScript 增加部分

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20;
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = 0;
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : 'black';
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = 'red';
context.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play(); // 播放吃声音
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play(); // 播放撞墙声音
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText('得分: ' + score, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}

复制代码

这些代码增加了计时功能，并在吃到食物和撞墙时分别播放声音。你可以根据需要将 `eat.mp3` 和 `crash.mp3` 文件放置在项目中。

### 更多功能的扩展建议
如果你还想进一步丰富游戏，可以尝试以下功能：
1. **边界穿越**：在蛇超过边界时，让它从对面的边界出来。
2. **障碍物**：在画布上随机放置一些障碍物，蛇碰到障碍物即失败。
3. **多层次地图**：设计多个地图，每个地图有不同的难度和障碍物布置。
4. **存档功能**：允许玩家在游戏中暂停并保存当前的游戏状态，下次可以继续玩。
5. **积分排行榜**：将玩家的得分记录下来并展示排行榜。

通过不断尝试和扩展，你会发现贪吃蛇游戏可以变得非常丰富和有趣，同时也能学到更多的编程知识，如果有任何问题，随时告诉我哦！

作者: 廖晗瑞 时间: 2024-8-14 19:09
帮我把你提的建议添加到游戏里，并完善成一个完整的游戏

作者: kaia 时间: 2024-8-14 19:09

廖晗瑞发表于 2024-08-14 19:09
帮我把你提的建议添加到游戏里，并完善成一个完整的游 ...

好的，让我们来一步一步实现这些功能，最终形成一个完整的贪吃蛇游戏。

### 增加边界穿越
我们首先实现边界穿越功能。蛇在画布边缘移动时，不是撞墙结束游戏，而是从对面的边界出来。

### 实现障碍物
在游戏中添加一些障碍物，当蛇撞到障碍物时，游戏结束。

### 增加积分排行榜
保存玩家的得分，并展示排行榜。

### 完整游戏代码

#### HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<button id="startButton">开始游戏</button>
<button id="pauseButton" style="display: none;">暂停</button>
难度:
<select id="difficulty">
<option value="easy">简单</option>
<option value="normal" selected>普通</option>
<option value="hard">困难</option>
</select>
</div>
最高得分: <span id="highScore">0</span><br>
时间: <span id="time">0</span> 秒<br>
<canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>
<audio id="eatSound" src="eat.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>
<script src="snake.js"></script>
</body>
</html>

复制代码

#### JavaScript代码（snake.js）

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20;
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = 0;
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const obstacles = []; // 存储障碍物的位置
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
generateObstacles(); // 生成障碍物
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : 'black';
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = 'red';
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play(); // 播放吃声音
food = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play(); // 播放撞墙声音
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText('得分: ' + score, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateObstacles() {
obstacles.length = 0;
// 生成 5 个随机障碍物
for (let i = 0; i < 5; i++) {
let obstacle = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
obstacles.push(obstacle);
}
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 总结
通过以上步骤，我们逐步实现了以下功能：
1. 边界穿越：蛇可以从一个边界穿越到另一个边界。
2. 障碍物：在游戏中随机生成障碍物，蛇撞到障碍物即游戏结束。
3. 积分和计时器：记录玩家得分和游戏时间。
4. 音效：在吃到食物或撞墙时播放声音。
5. 难度设置和暂停功能：玩家可以选择难度并在游戏中暂停。

你可以根据自己的需求继续扩展，比如设计多个地图、增加皮肤、更丰富的音效等。如果有任何问题，请随时告诉我！希望你享受编程和游戏的乐趣！

作者: 廖晗瑞 时间: 2024-8-14 19:12
能不能帮我设计多个地图、增加皮肤，并添加合适的音效，做成一个完整的游戏

作者: kaia 时间: 2024-8-14 19:14

廖晗瑞发表于 2024-08-14 19:12
能不能帮我设计多个地图、增加皮肤，并添加合适的音效 ...

好的，我们来进一步完善贪吃蛇游戏，添加多个地图、皮肤以及音效。我们将分几个步骤进行：

1. **设计多个地图**：不同地图具有不同的障碍物布局。
2. **皮肤选择**：玩家可以选择蛇和食物的皮肤。
3. **添加音效**：为吃到食物和撞墙等事件添加合适的音效。

### 第一步：修改HTML结构

我们需要增加地图和皮肤的选择控件，以及音效文件的引用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
/* CSS 样式 */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<button id="startButton">开始游戏</button>
<button id="pauseButton" style="display:none;">暂停</button>
难度:
<select id="difficulty">
<option value="easy">简单</option>
<option value="normal">普通</option>
<option value="hard">困难</option>
</select>
地图:
<select id="map">
<option value="map1">地图1</option>
<option value="map2">地图2</option>
<option value="map3">地图3</option>
</select>
皮肤:
<select id="skin">
<option value="default">默认</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
</select>
</div>
<canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
<div class="info">
最高得分: <span id="highScore">0</span>
时间: <span id="time">0</span> 秒
</div>
<audio id="eatSound">
<source src="eat.mp3" type="audio/mpeg">
</audio>
<audio id="crashSound">
<source src="crash.mp3" type="audio/mpeg">
</audio>
<script src="snake.js"></script>
</body>
</html>

复制代码

### 第二步：面向JavaScript代码进行改进（snake.js）

#### 定义地图和皮肤资源

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20;
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [
{ x: 60, y: 60 }, { x: 80, y: 60 }, { x: 100, y: 60 },
{ x: 60, y: 200 }, { x: 80, y: 200 }, { x: 100, y: 200 }
],
map2: [
{ x: 140, y: 140 }, { x: 160, y: 140 }, { x: 180, y: 140 },
{ x: 140, y: 280 }, { x: 160, y: 280 }, { x: 180, y: 280 }
],
map3: [
{ x: 260, y: 260 }, { x: 280, y: 260 }, { x: 300, y: 260 },
{ x: 260, y: 100 }, { x: 280, y: 100 }, { x: 300, y: 100 }
]
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play(); // 播放吃声音
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play(); // 播放撞墙声音
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 关于音效文件
确保在项目根目录中准备好 `eat.mp3` 和 `crash.mp3` 文件，用于吃到食物和撞墙时的音效。

### 完整总结
通过上述步骤，我们完成了以下功能：
1. **多个地图**：玩家可以选择不同的地图，每个地图具有不同的障碍物布局。
2. **皮肤选择**：玩家可以选择不同的皮肤，使蛇和食物颜色不同。
3. **完整的音效**：在吃到食物和撞墙时播放对应的音效。
4. **实现了边界穿越**：蛇可以从一个边界穿越到另一个边界。
5. **保存最高得分**：在本地存储中保存并显示最高得分。

希望你喜欢这个完整的贪吃蛇游戏！如有任何问题或更多需求，请随时告诉我。享受编程和游戏的乐趣吧！

作者: 廖晗瑞 时间: 2024-8-14 19:16
帮我完成三个部分的制作，让它变成一个可以运行的游戏

作者: kaia 时间: 2024-8-14 19:17

廖晗瑞发表于 2024-08-14 19:16
帮我完成三个部分的制作，让它变成一个可以运行的游戏 ...

好的，我们将贪吃蛇游戏的三个部分（多地图、皮肤选择和音效）组合在一起，完成一个可以运行的完整版本。以下是完整的HTML、CSS和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>
<style>
/* CSS 样式 */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls">
<button id="startButton">开始游戏</button>
<button id="pauseButton" style="display:none;">暂停</button>
难度:
<select id="difficulty">
<option value="easy">简单</option>
<option value="normal">普通</option>
<option value="hard">困难</option>
</select>
地图:
<select id="map">
<option value="map1">地图1</option>
<option value="map2">地图2</option>
<option value="map3">地图3</option>
</select>
皮肤:
<select id="skin">
<option value="default">默认</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
</select>
</div>
<canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>
<p>最高得分: <span id="highScore">0</span></p>
<p>时间: <span id="time">0</span> 秒</p>
<audio id="eatSound" src="eat.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>
<script src="snake.js"></script>
</body>
</html>

复制代码

### JavaScript部分（snake.js）

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [],
map2: [
{ x: 6 * box, y: 6 * box }, { x: 6 * box, y: 7 * box },
{ x: 6 * box, y: 8 * box }, { x: 6 * box, y: 9 * box }
],
map3: [
{ x: 1 * box, y: 1 * box }, { x: 2 * box, y: 1 * box },
{ x: 3 * box, y: 1 * box }, { x: 4 * box, y: 1 * box },
{ x: 5 * box, y: 1 * box }, { x: 6 * box, y: 1 * box }
]
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play(); // 播放吃声音
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play(); // 播放撞墙声音
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 安装和运行游戏

1. **创建项目文件**：在一个新文件夹内创建三个文件：`index.html`, `style.css`, 和 `snake.js`。
2. **添加音效**：在项目根目录中放置`eat.mp3` 和 `crash.mp3` 音频文件，这两个文件分别为吃食物和撞墙时播放的音效。
3. **运行游戏**：用你的浏览器打开`index.html` 文件，即可运行游戏。

通过这些步骤，你可以完成一个具有多个地图、皮肤选择和音效的完整贪吃蛇游戏。如果有任何问题或进一步需求，请随时告诉我！享受编程和游戏的乐趣吧！

作者: 廖晗瑞 时间: 2024-8-14 19:21
可不可以再整理一下三个部分

作者: kaia 时间: 2024-8-14 19:23

廖晗瑞发表于 2024-08-14 19:21
可不可以再整理一下三个部分

当然可以！我会将三个部分（多地图、皮肤选择和音效）整合到一个完整的项目中，并确保代码清晰可读。我们分为三部分：HTML、CSS和JavaScript。

### HTML部分

<!DOCTYPE html>
<html lang="zh-CN">
<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>
<h1>贪吃蛇游戏</h1>
<div class="controls">
<button id="startButton">开始游戏</button>
<button id="pauseButton" style="display:none;">暂停</button>
<label for="difficulty">难度: </label>
<select id="difficulty">
<option value="easy">简单</option>
<option value="normal">普通</option>
<option value="hard">困难</option>
</select>
<label for="map">地图: </label>
<select id="map">
<option value="map1">地图1</option>
<option value="map2">地图2</option>
<option value="map3">地图3</option>
</select>
<label for="skin">皮肤: </label>
<select id="skin">
<option value="default">默认</option>
<option value="blue">蓝色</option>
<option value="red">红色</option>
</select>
</div>
<canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
<p>最高得分: <span id="highScore">0</span></p>
<p>时间: <span id="time">0</span> 秒</p>
<audio id="eatSound" src="eat.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>
<script src="snake.js"></script>
</body>
</html>

复制代码

### CSS部分（style.css）

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}

复制代码

### JavaScript部分（snake.js）

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20;
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0;
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
const maps = {
map1: [{ x: 5 * box, y: 5 * box }, { x: 10 * box, y: 10 * box }],
map2: [{ x: 7 * box, y: 7 * box }, { x: 12 * box, y: 12 * box }],
map3: [{ x: 9 * box, y: 9 * box }, { x: 14 * box, y: 14 * box }]
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000);
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000);
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap();
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play();
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play();
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore);
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

作者: 廖晗瑞 时间: 2024-8-14 19:25
怎么添加音效

作者: kaia 时间: 2024-8-14 19:26

廖晗瑞发表于 2024-08-14 19:25
怎么添加音效

好的，我们来详细讲解一下如何添加音效到贪吃蛇游戏中。

### 第一步：准备音效文件

我们需要两个音效文件：
1. `eat.mp3` - 当蛇吃到食物时播放。
2. `crash.mp3` - 当蛇撞墙或撞到身体时播放。

将这两个音效文件放到你的项目根目录中。

### 第二步：在HTML中引入音效文件

我们需要在HTML文件中通过`audio`标签引入这两个音效文件。

贪吃蛇游戏

贪吃蛇游戏

      开始游戏
      暂停
      难度:

         简单
         普通
         困难

      地图:

         地图1
         地图2
         地图3

      皮肤:

         默认
         蓝色
         红色


最高得分: 0
时间: 0 秒


<audio id="eatSound" src="eat.mp3"></audio>
<audio id="crashSound" src="crash.mp3"></audio>

### 第三步：修改JavaScript代码，播放音效

修改JavaScript代码，在适当的位置添加音效播放逻辑。

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [],
map2: [
{ x: 5 * box, y: 5 * box },
{ x: 15 * box, y: 15 * box }
],
map3: [
{ x: 7 * box, y: 7 * box },
{ x: 13 * box, y: 13 * box },
{ x: 9 * box, y: 9 * box }
]
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
document.getElementById('eatSound').play(); // 播放吃声音
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
document.getElementById('crashSound').play(); // 播放撞墙声音
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 安装和运行游戏

1. **创建项目文件**：在一个新文件夹内创建四个文件：`index.html`, `style.css`, `snake.js`，和放置`eat.mp3` 和 `crash.mp3` 音频文件。
2. **运行游戏**：用你的浏览器打开`index.html` 文件，即可运行完整的贪吃蛇游戏并带有音效。

通过上述步骤，你应该已经完成了一个具有多地图、皮肤选择和音效的贪吃蛇游戏。如果还有问题或者进一步的需求，请随时告诉我！享受编程和游戏的乐趣吧！

作者: 廖晗瑞 时间: 2024-8-14 19:28

kaia 发表于 2024-8-14 19:23
当然可以！我会将三个部分（多地图、皮肤选择和音效）整合到一个完整的项目中，并确保代码清晰可读。我们 ...

我不想要音效，能不能帮我去除音效

作者: kaia 时间: 2024-8-14 19:29

廖晗瑞发表于 2024-08-14 19:28
我不想要音效，能不能帮我去除音效

当然可以，我们可以移除音效相关的代码和元素。下面是没有音效的版本。

### HTML部分

贪吃蛇游戏

贪吃蛇游戏

      开始游戏
      暂停
      难度:

         简单
         普通
         困难

      地图:

         地图1
         地图2
         地图3

      皮肤:

         默认
         蓝色
         红色


最高得分: 0
时间: 0 秒

### CSS部分（style.css）

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 2px solid #000;
background-color: #fff;
}
.controls {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
}

复制代码

### JavaScript部分（snake.js）

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [
{x: 4 * box, y: 4 * box},
{x: 5 * box, y: 4 * box},
{x: 6 * box, y: 4 * box},
{x: 7 * box, y: 4 * box}
],
map2: [
{x: 10 * box, y: 10 * box},
{x: 11 * box, y: 10 * box},
{x: 12 * box, y: 10 * box}
],
map3: [
{x: 15 * box, y: 15 * box},
{x: 16 * box, y: 15 * box}
]
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 运行游戏

1. **创建项目文件**：在一个新文件夹内创建三个文件：`index.html`, `style.css`, 和 `snake.js`。
2. **运行游戏**：用你的浏览器打开 `index.html` 文件，即可运行完整的贪吃蛇游戏。

通过这些步骤，你应该已经能够运行一个具有多地图、皮肤选择而且没有音效的完整贪吃蛇游戏。如果有任何问题或进一步的需求，请随时告诉我！享受编程和游戏的乐趣吧！

作者: 廖晗瑞 时间: 2024-8-14 21:48
帮我把地图扩大一点

作者: 廖晗瑞 时间: 2024-8-14 22:01
可不可以再帮我整合一下

作者: 廖晗瑞 时间: 2024-8-14 22:17

kaia 发表于 2024-8-14 19:26
好的，我们来详细讲解一下如何添加音效到贪吃蛇游戏中。

### 第一步：准备音效文件

我不想要音效，能不能帮我去除音效

作者: kaia 时间: 2024-8-14 22:18

廖晗瑞发表于 2024-08-14 22:17
我不想要音效，能不能帮我去除音效

当然可以！我们来移除音效相关的内容。下面是去除音效后的代码：

### HTML文件
首先，删除HTML中引入音效文件的部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#gameCanvas {
border: 1px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>

复制代码

### JavaScript文件
修改JavaScript代码，去除与音效相关的逻辑：

const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
const box = 20; // 每个格子的大小
let snake, food, direction, score, game, gameInterval, timeCounter;
let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
let timeElapsed = 0;
const difficultySettings = {
easy: 150,
normal: 100,
hard: 50
};
const skins = {
default: { snake: 'black', food: 'red' },
blue: { snake: 'blue', food: 'lightblue' },
red: { snake: 'red', food: 'orange' }
};
// 定义多个地图的障碍物位置
const maps = {
map1: [],
map2: [],
map3: []
};
let obstacles = [];
document.getElementById('startButton').addEventListener('click', startGame);
document.getElementById('pauseButton').addEventListener('click', pauseGame);
function startGame() {
document.getElementById('startButton').style.display = 'none';
document.getElementById('pauseButton').style.display = 'block';
document.getElementById('gameCanvas').style.display = 'block';
resetGame();
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
}
function pauseGame() {
if (game) {
clearInterval(game);
clearInterval(timeCounter);
game = null;
timeCounter = null;
document.getElementById('pauseButton').innerText = '继续';
} else {
const difficulty = document.getElementById('difficulty').value;
gameInterval = difficultySettings[difficulty];
game = setInterval(drawGame, gameInterval);
timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
document.getElementById('pauseButton').innerText = '暂停';
}
}
function resetGame() {
snake = [{ x: 9 * box, y: 10 * box }];
food = generateFood();
score = 0;
direction = undefined;
timeElapsed = 0;
document.getElementById('time').innerText = timeElapsed;
loadMap(); // 加载选中的地图
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const keyPressed = event.keyCode;
if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
}
function drawGame() {
context.clearRect(0, 0, canvas.width, canvas.height);
const skin = document.getElementById('skin').value;
const colors = skins[skin];
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i === 0 ? 'green' : colors.snake;
context.fillRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = colors.food;
context.fillRect(food.x, food.y, box, box);
drawObstacles();
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (direction === 'LEFT') snakeX -= box;
if (direction === 'UP') snakeY -= box;
if (direction === 'RIGHT') snakeX += box;
if (direction === 'DOWN') snakeY += box;
if (snakeX === food.x && snakeY === food.y) {
score++;
updateHighScore();
food = generateFood();
} else {
snake.pop();
}
let newHead = { x: snakeX, y: snakeY };
if (snakeX < 0) snakeX = canvas.width - box;
if (snakeY < 0) snakeY = canvas.height - box;
if (snakeX >= canvas.width) snakeX = 0;
if (snakeY >= canvas.height) snakeY = 0;
if (collision(newHead, snake) || collision(newHead, obstacles)) {
clearInterval(game);
clearInterval(timeCounter);
alert('游戏结束');
return;
}
snake.unshift(newHead);
context.fillStyle = 'black';
context.font = '20px Arial';
context.fillText(`得分: ${score}`, 5, canvas.height - 5);
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x === array[i].x && head.y === array[i].y) {
return true;
}
}
return false;
}
function updateHighScore() {
if (score > highScore) {
highScore = score;
localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
document.getElementById('highScore').innerText = highScore;
}
}
function updateTime() {
timeElapsed++;
document.getElementById('time').innerText = timeElapsed;
}
function generateFood() {
let newFood;
do {
newFood = {
x: Math.floor(Math.random() * 19 + 1) * box,
y: Math.floor(Math.random() * 19 + 1) * box
};
} while (collision(newFood, snake) || collision(newFood, obstacles));
return newFood;
}
function loadMap() {
const selectedMap = document.getElementById('map').value;
obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
}
function drawObstacles() {
context.fillStyle = 'grey';
for (let i = 0; i < obstacles.length; i++) {
context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
}
}

复制代码

### 总结

通过删除HTML和JavaScript中与音效相关的代码，你现在有了一个不带音效的贪吃蛇游戏。如果你有其他问题或需要进一步的帮助，请随时告诉我！享受编程的乐趣吧！

欢迎光临科学教育 (http://www.sci-edu.net/)