设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 廖晗瑞
123下一页
返回列表 发新帖
楼主: 廖晗瑞
打印 上一主题 下一主题

廖晗瑞

[复制链接]
廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
11#
 楼主| 发表于 2024-8-14 19:12:48 | 只看该作者
能不能帮我设计多个地图、增加皮肤，并添加合适的音效，做成一个完整的游戏
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
12#
发表于 2024-8-14 19:14:09 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:12
能不能帮我设计多个地图、增加皮肤，并添加合适的音效 ...


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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <style>
  8.         /* CSS 样式 */
  9.         body {
  10.             display: flex;
  11.             flex-direction: column;
  12.             justify-content: center;
  13.             align-items: center;
  14.             height: 100vh;
  15.             margin: 0;
  16.             font-family: Arial, sans-serif;
  17.             background-color: #f0f0f0;
  18.         }
  19.         #gameCanvas {
  20.             border: 2px solid #000;
  21.             background-color: #fff;
  22.         }
  23.         .controls {
  24.             margin-bottom: 20px;
  25.         }
  26.         button {
  27.             padding: 10px 20px;
  28.             font-size: 16px;
  29.             margin: 5px;
  30.             cursor: pointer;
  31.         }
  32.     </style>
  33. </head>
  34. <body>

  36.     <div class="controls">
  37.         <button id="startButton">开始游戏</button>
  38.         <button id="pauseButton" style="display:none;">暂停</button>
  39.         难度:
  40.         <select id="difficulty">
  41.             <option value="easy">简单</option>
  42.             <option value="normal">普通</option>
  43.             <option value="hard">困难</option>
  44.         </select>
  45.         地图:
  46.         <select id="map">
  47.             <option value="map1">地图1</option>
  48.             <option value="map2">地图2</option>
  49.             <option value="map3">地图3</option>
  50.         </select>
  51.         皮肤:
  52.         <select id="skin">
  53.             <option value="default">默认</option>
  54.             <option value="blue">蓝色</option>
  55.             <option value="red">红色</option>
  56.         </select>
  57.     </div>

  59.     <canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
  60.     <div class="info">
  61.         最高得分: <span id="highScore">0</span>
  62.         时间: <span id="time">0</span> 秒
  63.     </div>

  65.     <audio id="eatSound">
  66.         <source src="eat.mp3" type="audio/mpeg">
  67.     </audio>
  68.     <audio id="crashSound">
  69.         <source src="crash.mp3" type="audio/mpeg">
  70.     </audio>

  72.     <script src="snake.js"></script>
  73. </body>
  74. </html>
复制代码


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

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

  1. const canvas = document.getElementById('gameCanvas');
  2. const context = canvas.getContext('2d');

  4. const box = 20;
  5. let snake, food, direction, score, game, gameInterval, timeCounter;
  6. let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
  7. let timeElapsed = 0;

  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. const skins = {
  16.     default: { snake: 'black', food: 'red' },
  17.     blue: { snake: 'blue', food: 'lightblue' },
  18.     red: { snake: 'red', food: 'orange' }
  19. };

  21. // 定义多个地图的障碍物位置
  22. const maps = {
  23.     map1: [
  24.         { x: 60, y: 60 }, { x: 80, y: 60 }, { x: 100, y: 60 },
  25.         { x: 60, y: 200 }, { x: 80, y: 200 }, { x: 100, y: 200 }
  26.     ],
  27.     map2: [
  28.         { x: 140, y: 140 }, { x: 160, y: 140 }, { x: 180, y: 140 },
  29.         { x: 140, y: 280 }, { x: 160, y: 280 }, { x: 180, y: 280 }
  30.     ],
  31.     map3: [
  32.         { x: 260, y: 260 }, { x: 280, y: 260 }, { x: 300, y: 260 },
  33.         { x: 260, y: 100 }, { x: 280, y: 100 }, { x: 300, y: 100 }
  34.     ]
  35. };

  37. let obstacles = [];

  39. document.getElementById('startButton').addEventListener('click', startGame);
  40. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  42. function startGame() {
  43.     document.getElementById('startButton').style.display = 'none';
  44.     document.getElementById('pauseButton').style.display = 'block';
  45.     document.getElementById('gameCanvas').style.display = 'block';

  47.     resetGame();
  48.     const difficulty = document.getElementById('difficulty').value;
  49.     gameInterval = difficultySettings[difficulty];
  50.     game = setInterval(drawGame, gameInterval);
  51.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  52. }

  54. function pauseGame() {
  55.     if (game) {
  56.         clearInterval(game);
  57.         clearInterval(timeCounter);
  58.         game = null;
  59.         timeCounter = null;
  60.         document.getElementById('pauseButton').innerText = '继续';
  61.     } else {
  62.         const difficulty = document.getElementById('difficulty').value;
  63.         gameInterval = difficultySettings[difficulty];
  64.         game = setInterval(drawGame, gameInterval);
  65.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  66.         document.getElementById('pauseButton').innerText = '暂停';
  67.     }
  68. }

  70. function resetGame() {
  71.     snake = [{ x: 9 * box, y: 10 * box }];
  72.     food = generateFood();
  73.     score = 0;
  74.     direction = undefined;
  75.     timeElapsed = 0;
  76.     document.getElementById('time').innerText = timeElapsed;
  77.     loadMap(); // 加载选中的地图
  78. }

  80. document.addEventListener('keydown', changeDirection);

  82. function changeDirection(event) {
  83.     const keyPressed = event.keyCode;
  84.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  85.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  86.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  87.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  88. }

  90. function drawGame() {
  91.     context.clearRect(0, 0, canvas.width, canvas.height);

  93.     const skin = document.getElementById('skin').value;
  94.     const colors = skins[skin];

  96.     for (let i = 0; i < snake.length; i++) {
  97.         context.fillStyle = i === 0 ? 'green' : colors.snake;
  98.         context.fillRect(snake[i].x, snake[i].y, box, box);
  99.     }

  101.     context.fillStyle = colors.food;
  102.     context.fillRect(food.x, food.y, box, box);
  103.    
  104.     drawObstacles();

  106.     let snakeX = snake[0].x;
  107.     let snakeY = snake[0].y;

  109.     if (direction === 'LEFT') snakeX -= box;
  110.     if (direction === 'UP') snakeY -= box;
  111.     if (direction === 'RIGHT') snakeX += box;
  112.     if (direction === 'DOWN') snakeY += box;

  114.     if (snakeX === food.x && snakeY === food.y) {
  115.         score++;
  116.         updateHighScore();
  117.         document.getElementById('eatSound').play(); // 播放吃声音
  118.         food = generateFood();
  119.     } else {
  120.         snake.pop();
  121.     }

  123.     let newHead = { x: snakeX, y: snakeY };

  125.     if (snakeX < 0) snakeX = canvas.width - box;
  126.     if (snakeY < 0) snakeY = canvas.height - box;
  127.     if (snakeX >= canvas.width) snakeX = 0;
  128.     if (snakeY >= canvas.height) snakeY = 0;

  130.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  131.         clearInterval(game);
  132.         clearInterval(timeCounter);
  133.         document.getElementById('crashSound').play(); // 播放撞墙声音
  134.         alert('游戏结束');
  135.         return;
  136.     }

  138.     snake.unshift(newHead);

  140.     context.fillStyle = 'black';
  141.     context.font = '20px Arial';
  142.     context.fillText(`得分: ${score}`, 5, canvas.height - 5);
  143. }

  145. function collision(head, array) {
  146.     for (let i = 0; i < array.length; i++) {
  147.         if (head.x === array[i].x && head.y === array[i].y) {
  148.             return true;
  149.         }
  150.     }
  151.     return false;
  152. }

  154. function updateHighScore() {
  155.     if (score > highScore) {
  156.         highScore = score;
  157.         localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
  158.         document.getElementById('highScore').innerText = highScore;
  159.     }
  160. }

  162. function updateTime() {
  163.     timeElapsed++;
  164.     document.getElementById('time').innerText = timeElapsed;
  165. }

  167. function generateFood() {
  168.     let newFood;
  169.     do {
  170.         newFood = {
  171.             x: Math.floor(Math.random() * 19 + 1) * box,
  172.             y: Math.floor(Math.random() * 19 + 1) * box
  173.         };
  174.     } while (collision(newFood, snake) || collision(newFood, obstacles));
  175.     return newFood;
  176. }

  178. function loadMap() {
  179.     const selectedMap = document.getElementById('map').value;
  180.     obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
  181. }

  183. function drawObstacles() {
  184.     context.fillStyle = 'grey';
  185.     for (let i = 0; i < obstacles.length; i++) {
  186.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  187.     }
  188. }
复制代码


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

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
13#
 楼主| 发表于 2024-8-14 19:16:21 | 只看该作者
帮我完成三个部分的制作，让它变成一个可以运行的游戏
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
14#
发表于 2024-8-14 19:17:11 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:16
帮我完成三个部分的制作，让它变成一个可以运行的游戏 ...


好的，我们将贪吃蛇游戏的三个部分（多地图、皮肤选择和音效）组合在一起，完成一个可以运行的完整版本。以下是完整的HTML、CSS和JavaScript代码。

### HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <style>
  8.         /* CSS 样式 */
  9.         body {
  10.             display: flex;
  11.             flex-direction: column;
  12.             justify-content: center;
  13.             align-items: center;
  14.             height: 100vh;
  15.             margin: 0;
  16.             font-family: Arial, sans-serif;
  17.             background-color: #f0f0f0;
  18.         }
  19.         #gameCanvas {
  20.             border: 2px solid #000;
  21.             background-color: #fff;
  22.         }
  23.         .controls {
  24.             margin-bottom: 10px;
  25.         }
  26.         button {
  27.             padding: 10px 20px;
  28.             font-size: 16px;
  29.             margin: 5px;
  30.             cursor: pointer;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="controls">
  36.         <button id="startButton">开始游戏</button>
  37.         <button id="pauseButton" style="display:none;">暂停</button>
  38.         难度:
  39.         <select id="difficulty">
  40.             <option value="easy">简单</option>
  41.             <option value="normal">普通</option>
  42.             <option value="hard">困难</option>
  43.         </select>
  44.         地图:
  45.         <select id="map">
  46.             <option value="map1">地图1</option>
  47.             <option value="map2">地图2</option>
  48.             <option value="map3">地图3</option>
  49.         </select>
  50.         皮肤:
  51.         <select id="skin">
  52.             <option value="default">默认</option>
  53.             <option value="blue">蓝色</option>
  54.             <option value="red">红色</option>
  55.         </select>
  56.     </div>
  57.     <canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>
  58.     <p>最高得分: <span id="highScore">0</span></p>
  59.     <p>时间: <span id="time">0</span> 秒</p>

  61.     <!-- 添加音效 -->
  62.     <audio id="eatSound" src="eat.mp3"></audio>
  63.     <audio id="crashSound" src="crash.mp3"></audio>

  65.     <script src="snake.js"></script>
  66. </body>
  67. </html>
复制代码


### JavaScript部分（snake.js）

  1. const canvas = document.getElementById('gameCanvas');
  2. const context = canvas.getContext('2d');

  4. const box = 20; // 每个格子的大小
  5. let snake, food, direction, score, game, gameInterval, timeCounter;
  6. let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
  7. let timeElapsed = 0;

  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. const skins = {
  16.     default: { snake: 'black', food: 'red' },
  17.     blue: { snake: 'blue', food: 'lightblue' },
  18.     red: { snake: 'red', food: 'orange' }
  19. };

  21. // 定义多个地图的障碍物位置
  22. const maps = {
  23.     map1: [],
  24.     map2: [
  25.         { x: 6 * box, y: 6 * box }, { x: 6 * box, y: 7 * box },
  26.         { x: 6 * box, y: 8 * box }, { x: 6 * box, y: 9 * box }
  27.     ],
  28.     map3: [
  29.         { x: 1 * box, y: 1 * box }, { x: 2 * box, y: 1 * box },
  30.         { x: 3 * box, y: 1 * box }, { x: 4 * box, y: 1 * box },
  31.         { x: 5 * box, y: 1 * box }, { x: 6 * box, y: 1 * box }
  32.     ]
  33. };

  35. let obstacles = [];

  37. document.getElementById('startButton').addEventListener('click', startGame);
  38. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  40. function startGame() {
  41.     document.getElementById('startButton').style.display = 'none';
  42.     document.getElementById('pauseButton').style.display = 'block';
  43.     document.getElementById('gameCanvas').style.display = 'block';

  45.     resetGame();
  46.     const difficulty = document.getElementById('difficulty').value;
  47.     gameInterval = difficultySettings[difficulty];
  48.     game = setInterval(drawGame, gameInterval);
  49.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  50. }

  52. function pauseGame() {
  53.     if (game) {
  54.         clearInterval(game);
  55.         clearInterval(timeCounter);
  56.         game = null;
  57.         timeCounter = null;
  58.         document.getElementById('pauseButton').innerText = '继续';
  59.     } else {
  60.         const difficulty = document.getElementById('difficulty').value;
  61.         gameInterval = difficultySettings[difficulty];
  62.         game = setInterval(drawGame, gameInterval);
  63.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  64.         document.getElementById('pauseButton').innerText = '暂停';
  65.     }
  66. }

  68. function resetGame() {
  69.     snake = [{ x: 9 * box, y: 10 * box }];
  70.     food = generateFood();
  71.     score = 0;
  72.     direction = undefined;
  73.     timeElapsed = 0;
  74.     document.getElementById('time').innerText = timeElapsed;
  75.     loadMap(); // 加载选中的地图
  76. }

  78. document.addEventListener('keydown', changeDirection);

  80. function changeDirection(event) {
  81.     const keyPressed = event.keyCode;
  82.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  83.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  84.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  85.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  86. }

  88. function drawGame() {
  89.     context.clearRect(0, 0, canvas.width, canvas.height);

  91.     const skin = document.getElementById('skin').value;
  92.     const colors = skins[skin];

  94.     for (let i = 0; i < snake.length; i++) {
  95.         context.fillStyle = i === 0 ? 'green' : colors.snake;
  96.         context.fillRect(snake[i].x, snake[i].y, box, box);
  97.     }

  99.     context.fillStyle = colors.food;
  100.     context.fillRect(food.x, food.y, box, box);

  102.     drawObstacles();

  104.     let snakeX = snake[0].x;
  105.     let snakeY = snake[0].y;

  107.     if (direction === 'LEFT') snakeX -= box;
  108.     if (direction === 'UP') snakeY -= box;
  109.     if (direction === 'RIGHT') snakeX += box;
  110.     if (direction === 'DOWN') snakeY += box;

  112.     if (snakeX === food.x && snakeY === food.y) {
  113.         score++;
  114.         updateHighScore();
  115.         document.getElementById('eatSound').play(); // 播放吃声音
  116.         food = generateFood();
  117.     } else {
  118.         snake.pop();
  119.     }

  121.     let newHead = { x: snakeX, y: snakeY };

  123.     if (snakeX < 0) snakeX = canvas.width - box;
  124.     if (snakeY < 0) snakeY = canvas.height - box;
  125.     if (snakeX >= canvas.width) snakeX = 0;
  126.     if (snakeY >= canvas.height) snakeY = 0;

  128.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  129.         clearInterval(game);
  130.         clearInterval(timeCounter);
  131.         document.getElementById('crashSound').play(); // 播放撞墙声音
  132.         alert('游戏结束');
  133.         return;
  134.     }

  136.     snake.unshift(newHead);

  138.     context.fillStyle = 'black';
  139.     context.font = '20px Arial';
  140.     context.fillText(`得分: ${score}`, 5, canvas.height - 5);
  141. }

  143. function collision(head, array) {
  144.     for (let i = 0; i < array.length; i++) {
  145.         if (head.x === array[i].x && head.y === array[i].y) {
  146.             return true;
  147.         }
  148.     }
  149.     return false;
  150. }

  152. function updateHighScore() {
  153.     if (score > highScore) {
  154.         highScore = score;
  155.         localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
  156.         document.getElementById('highScore').innerText = highScore;
  157.     }
  158. }

  160. function updateTime() {
  161.     timeElapsed++;
  162.     document.getElementById('time').innerText = timeElapsed;
  163. }

  165. function generateFood() {
  166.     let newFood;
  167.     do {
  168.         newFood = {
  169.             x: Math.floor(Math.random() * 19 + 1) * box,
  170.             y: Math.floor(Math.random() * 19 + 1) * box
  171.         };
  172.     } while (collision(newFood, snake) || collision(newFood, obstacles));
  173.     return newFood;
  174. }

  176. function loadMap() {
  177.     const selectedMap = document.getElementById('map').value;
  178.     obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
  179. }

  181. function drawObstacles() {
  182.     context.fillStyle = 'grey';
  183.     for (let i = 0; i < obstacles.length; i++) {
  184.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  185.     }
  186. }
复制代码


### 安装和运行游戏

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
15#
 楼主| 发表于 2024-8-14 19:21:03 | 只看该作者
可不可以再整理一下三个部分
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
16#
发表于 2024-8-14 19:23:39 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:21
可不可以再整理一下三个部分


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

### HTML部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <h1>贪吃蛇游戏</h1>
  11.     <div class="controls">
  12.         <button id="startButton">开始游戏</button>
  13.         <button id="pauseButton" style="display:none;">暂停</button>
  14.         <label for="difficulty">难度: </label>
  15.         <select id="difficulty">
  16.             <option value="easy">简单</option>
  17.             <option value="normal">普通</option>
  18.             <option value="hard">困难</option>
  19.         </select>
  20.         <label for="map">地图: </label>
  21.         <select id="map">
  22.             <option value="map1">地图1</option>
  23.             <option value="map2">地图2</option>
  24.             <option value="map3">地图3</option>
  25.         </select>
  26.         <label for="skin">皮肤: </label>
  27.         <select id="skin">
  28.             <option value="default">默认</option>
  29.             <option value="blue">蓝色</option>
  30.             <option value="red">红色</option>
  31.         </select>
  32.     </div>
  33.     <canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
  34.     <p>最高得分: <span id="highScore">0</span></p>
  35.     <p>时间: <span id="time">0</span> 秒</p>
  36.     <audio id="eatSound" src="eat.mp3"></audio>
  37.     <audio id="crashSound" src="crash.mp3"></audio>
  38.     <script src="snake.js"></script>
  39. </body>
  40. </html>
复制代码


### CSS部分（style.css）

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6.     height: 100vh;
  7.     margin: 0;
  8.     font-family: Arial, sans-serif;
  9.     background-color: #f0f0f0;
  10. }

  12. #gameCanvas {
  13.     border: 2px solid #000;
  14.     background-color: #fff;
  15. }

  17. .controls {
  18.     margin-bottom: 20px;
  19. }

  21. button {
  22.     padding: 10px 20px;
  23.     font-size: 16px;
  24.     margin: 5px;
  25.     cursor: pointer;
  26. }
复制代码


### JavaScript部分（snake.js）

  1. const canvas = document.getElementById('gameCanvas');
  2. const context = canvas.getContext('2d');

  4. const box = 20;
  5. let snake, food, direction, score, game, gameInterval, timeCounter;
  6. let highScore = localStorage.getItem('highScore') || 0;
  7. let timeElapsed = 0;

  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. const skins = {
  16.     default: { snake: 'black', food: 'red' },
  17.     blue: { snake: 'blue', food: 'lightblue' },
  18.     red: { snake: 'red', food: 'orange' }
  19. };

  21. const maps = {
  22.     map1: [{ x: 5 * box, y: 5 * box }, { x: 10 * box, y: 10 * box }],
  23.     map2: [{ x: 7 * box, y: 7 * box }, { x: 12 * box, y: 12 * box }],
  24.     map3: [{ x: 9 * box, y: 9 * box }, { x: 14 * box, y: 14 * box }]
  25. };

  27. let obstacles = [];

  29. document.getElementById('startButton').addEventListener('click', startGame);
  30. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  32. function startGame() {
  33.     document.getElementById('startButton').style.display = 'none';
  34.     document.getElementById('pauseButton').style.display = 'block';
  35.     document.getElementById('gameCanvas').style.display = 'block';

  37.     resetGame();
  38.     const difficulty = document.getElementById('difficulty').value;
  39.     gameInterval = difficultySettings[difficulty];
  40.     game = setInterval(drawGame, gameInterval);
  41.     timeCounter = setInterval(updateTime, 1000);
  42. }

  44. function pauseGame() {
  45.     if (game) {
  46.         clearInterval(game);
  47.         clearInterval(timeCounter);
  48.         game = null;
  49.         timeCounter = null;
  50.         document.getElementById('pauseButton').innerText = '继续';
  51.     } else {
  52.         const difficulty = document.getElementById('difficulty').value;
  53.         gameInterval = difficultySettings[difficulty];
  54.         game = setInterval(drawGame, gameInterval);
  55.         timeCounter = setInterval(updateTime, 1000);
  56.         document.getElementById('pauseButton').innerText = '暂停';
  57.     }
  58. }

  60. function resetGame() {
  61.     snake = [{ x: 9 * box, y: 10 * box }];
  62.     food = generateFood();
  63.     score = 0;
  64.     direction = undefined;
  65.     timeElapsed = 0;
  66.     document.getElementById('time').innerText = timeElapsed;
  67.     loadMap();
  68. }

  70. document.addEventListener('keydown', changeDirection);

  72. function changeDirection(event) {
  73.     const keyPressed = event.keyCode;
  74.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  75.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  76.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  77.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  78. }

  80. function drawGame() {
  81.     context.clearRect(0, 0, canvas.width, canvas.height);

  83.     const skin = document.getElementById('skin').value;
  84.     const colors = skins[skin];

  86.     for (let i = 0; i < snake.length; i++) {
  87.         context.fillStyle = i === 0 ? 'green' : colors.snake;
  88.         context.fillRect(snake[i].x, snake[i].y, box, box);
  89.     }

  91.     context.fillStyle = colors.food;
  92.     context.fillRect(food.x, food.y, box, box);

  94.     drawObstacles();

  96.     let snakeX = snake[0].x;
  97.     let snakeY = snake[0].y;

  99.     if (direction === 'LEFT') snakeX -= box;
  100.     if (direction === 'UP') snakeY -= box;
  101.     if (direction === 'RIGHT') snakeX += box;
  102.     if (direction === 'DOWN') snakeY += box;

  104.     if (snakeX === food.x && snakeY === food.y) {
  105.         score++;
  106.         updateHighScore();
  107.         document.getElementById('eatSound').play();
  108.         food = generateFood();
  109.     } else {
  110.         snake.pop();
  111.     }

  113.     let newHead = { x: snakeX, y: snakeY };

  115.     if (snakeX < 0) snakeX = canvas.width - box;
  116.     if (snakeY < 0) snakeY = canvas.height - box;
  117.     if (snakeX >= canvas.width) snakeX = 0;
  118.     if (snakeY >= canvas.height) snakeY = 0;

  120.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  121.         clearInterval(game);
  122.         clearInterval(timeCounter);
  123.         document.getElementById('crashSound').play();
  124.         alert('游戏结束');
  125.         return;
  126.     }

  128.     snake.unshift(newHead);

  130.     context.fillStyle = 'black';
  131.     context.font = '20px Arial';
  132.     context.fillText(`得分: ${score}`, 5, canvas.height - 5);
  133. }

  135. function collision(head, array) {
  136.     for (let i = 0; i < array.length; i++) {
  137.         if (head.x === array[i].x && head.y === array[i].y) {
  138.             return true;
  139.         }
  140.     }
  141.     return false;
  142. }

  144. function updateHighScore() {
  145.     if (score > highScore) {
  146.         highScore = score;
  147.         localStorage.setItem('highScore', highScore);
  148.         document.getElementById('highScore').innerText = highScore;
  149.     }
  150. }

  152. function updateTime() {
  153.     timeElapsed++;
  154.     document.getElementById('time').innerText = timeElapsed;
  155. }

  157. function generateFood() {
  158.     let newFood;
  159.     do {
  160.         newFood = {
  161.             x: Math.floor(Math.random() * 19 + 1) * box,
  162.             y: Math.floor(Math.random() * 19 + 1) * box
  163.         };
  164.     } while (collision(newFood, snake) || collision(newFood, obstacles));
  165.     return newFood;
  166. }

  168. function loadMap() {
  169.     const selectedMap = document.getElementById('map').value;
  170.     obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
  171. }

  173. function drawObstacles() {
  174.     context.fillStyle = 'grey';
  175.     for (let i = 0; i < obstacles.length; i++) {
  176.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  177.     }
  178. }
复制代码


### 安装和运行游戏

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
17#
 楼主| 发表于 2024-8-14 19:25:31 | 只看该作者
怎么添加音效
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
18#
发表于 2024-8-14 19:26:19 | 只看该作者
廖晗瑞 发表于 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代码，在适当的位置添加音效播放逻辑。

  1. const canvas = document.getElementById('gameCanvas');
  2. const context = canvas.getContext('2d');

  4. const box = 20; // 每个格子的大小
  5. let snake, food, direction, score, game, gameInterval, timeCounter;
  6. let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
  7. let timeElapsed = 0;

  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. const skins = {
  16.     default: { snake: 'black', food: 'red' },
  17.     blue: { snake: 'blue', food: 'lightblue' },
  18.     red: { snake: 'red', food: 'orange' }
  19. };

  21. // 定义多个地图的障碍物位置
  22. const maps = {
  23.     map1: [],
  24.     map2: [
  25.         { x: 5 * box, y: 5 * box },
  26.         { x: 15 * box, y: 15 * box }
  27.     ],
  28.     map3: [
  29.         { x: 7 * box, y: 7 * box },
  30.         { x: 13 * box, y: 13 * box },
  31.         { x: 9 * box, y: 9 * box }
  32.     ]
  33. };

  35. let obstacles = [];

  37. document.getElementById('startButton').addEventListener('click', startGame);
  38. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  40. function startGame() {
  41.     document.getElementById('startButton').style.display = 'none';
  42.     document.getElementById('pauseButton').style.display = 'block';
  43.     document.getElementById('gameCanvas').style.display = 'block';

  45.     resetGame();
  46.     const difficulty = document.getElementById('difficulty').value;
  47.     gameInterval = difficultySettings[difficulty];
  48.     game = setInterval(drawGame, gameInterval);
  49.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  50. }

  52. function pauseGame() {
  53.     if (game) {
  54.         clearInterval(game);
  55.         clearInterval(timeCounter);
  56.         game = null;
  57.         timeCounter = null;
  58.         document.getElementById('pauseButton').innerText = '继续';
  59.     } else {
  60.         const difficulty = document.getElementById('difficulty').value;
  61.         gameInterval = difficultySettings[difficulty];
  62.         game = setInterval(drawGame, gameInterval);
  63.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  64.         document.getElementById('pauseButton').innerText = '暂停';
  65.     }
  66. }

  68. function resetGame() {
  69.     snake = [{ x: 9 * box, y: 10 * box }];
  70.     food = generateFood();
  71.     score = 0;
  72.     direction = undefined;
  73.     timeElapsed = 0;
  74.     document.getElementById('time').innerText = timeElapsed;
  75.     loadMap(); // 加载选中的地图
  76. }

  78. document.addEventListener('keydown', changeDirection);

  80. function changeDirection(event) {
  81.     const keyPressed = event.keyCode;
  82.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  83.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  84.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  85.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  86. }

  88. function drawGame() {
  89.     context.clearRect(0, 0, canvas.width, canvas.height);

  91.     const skin = document.getElementById('skin').value;
  92.     const colors = skins[skin];

  94.     for (let i = 0; i < snake.length; i++) {
  95.         context.fillStyle = i === 0 ? 'green' : colors.snake;
  96.         context.fillRect(snake[i].x, snake[i].y, box, box);
  97.     }

  99.     context.fillStyle = colors.food;
  100.     context.fillRect(food.x, food.y, box, box);

  102.     drawObstacles();

  104.     let snakeX = snake[0].x;
  105.     let snakeY = snake[0].y;

  107.     if (direction === 'LEFT') snakeX -= box;
  108.     if (direction === 'UP') snakeY -= box;
  109.     if (direction === 'RIGHT') snakeX += box;
  110.     if (direction === 'DOWN') snakeY += box;

  112.     if (snakeX === food.x && snakeY === food.y) {
  113.         score++;
  114.         updateHighScore();
  115.         document.getElementById('eatSound').play(); // 播放吃声音
  116.         food = generateFood();
  117.     } else {
  118.         snake.pop();
  119.     }

  121.     let newHead = { x: snakeX, y: snakeY };

  123.     if (snakeX < 0) snakeX = canvas.width - box;
  124.     if (snakeY < 0) snakeY = canvas.height - box;
  125.     if (snakeX >= canvas.width) snakeX = 0;
  126.     if (snakeY >= canvas.height) snakeY = 0;

  128.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  129.         clearInterval(game);
  130.         clearInterval(timeCounter);
  131.         document.getElementById('crashSound').play(); // 播放撞墙声音
  132.         alert('游戏结束');
  133.         return;
  134.     }

  136.     snake.unshift(newHead);

  138.     context.fillStyle = 'black';
  139.     context.font = '20px Arial';
  140.     context.fillText(`得分: ${score}`, 5, canvas.height - 5);
  141. }

  143. function collision(head, array) {
  144.     for (let i = 0; i < array.length; i++) {
  145.         if (head.x === array[i].x && head.y === array[i].y) {
  146.             return true;
  147.         }
  148.     }
  149.     return false;
  150. }

  152. function updateHighScore() {
  153.     if (score > highScore) {
  154.         highScore = score;
  155.         localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
  156.         document.getElementById('highScore').innerText = highScore;
  157.     }
  158. }

  160. function updateTime() {
  161.     timeElapsed++;
  162.     document.getElementById('time').innerText = timeElapsed;
  163. }

  165. function generateFood() {
  166.     let newFood;
  167.     do {
  168.         newFood = {
  169.             x: Math.floor(Math.random() * 19 + 1) * box,
  170.             y: Math.floor(Math.random() * 19 + 1) * box
  171.         };
  172.     } while (collision(newFood, snake) || collision(newFood, obstacles));
  173.     return newFood;
  174. }

  176. function loadMap() {
  177.     const selectedMap = document.getElementById('map').value;
  178.     obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
  179. }

  181. function drawObstacles() {
  182.     context.fillStyle = 'grey';
  183.     for (let i = 0; i < obstacles.length; i++) {
  184.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  185.     }
  186. }
复制代码


### 安装和运行游戏

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

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

我不想要音效，能不能帮我去除音效
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
20#
发表于 2024-8-14 19:29:03 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:28
我不想要音效，能不能帮我去除音效


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

### HTML部分




   
   
    贪吃蛇游戏
   



    贪吃蛇游戏
   
        开始游戏
        暂停
        难度:
        
            简单
            普通
            困难
        
        地图:
        
            地图1
            地图2
            地图3
        
        皮肤:
        
            默认
            蓝色
            红色
        
   
   
    最高得分: 0
    时间: 0 秒
   
   
   
   


### CSS部分（style.css）

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6.     height: 100vh;
  7.     margin: 0;
  8.     font-family: Arial, sans-serif;
  9.     background-color: #f0f0f0;
  10. }

  12. #gameCanvas {
  13.     border: 2px solid #000;
  14.     background-color: #fff;
  15. }

  17. .controls {
  18.     margin-bottom: 20px;
  19. }

  21. button {
  22.     padding: 10px 20px;
  23.     font-size: 16px;
  24.     margin: 5px;
  25.     cursor: pointer;
  26. }
复制代码


### JavaScript部分（snake.js）

  1. const canvas = document.getElementById('gameCanvas');
  2. const context = canvas.getContext('2d');

  4. const box = 20; // 每个格子的大小
  5. let snake, food, direction, score, game, gameInterval, timeCounter;
  6. let highScore = localStorage.getItem('highScore') || 0; // 从localStorage读取最高得分
  7. let timeElapsed = 0;

  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. const skins = {
  16.     default: { snake: 'black', food: 'red' },
  17.     blue: { snake: 'blue', food: 'lightblue' },
  18.     red: { snake: 'red', food: 'orange' }
  19. };

  21. // 定义多个地图的障碍物位置
  22. const maps = {
  23.     map1: [
  24.         {x: 4 * box, y: 4 * box},
  25.         {x: 5 * box, y: 4 * box},
  26.         {x: 6 * box, y: 4 * box},
  27.         {x: 7 * box, y: 4 * box}
  28.     ],
  29.     map2: [
  30.         {x: 10 * box, y: 10 * box},
  31.         {x: 11 * box, y: 10 * box},
  32.         {x: 12 * box, y: 10 * box}
  33.     ],
  34.     map3: [
  35.         {x: 15 * box, y: 15 * box},
  36.         {x: 16 * box, y: 15 * box}
  37.     ]
  38. };

  40. let obstacles = [];

  42. document.getElementById('startButton').addEventListener('click', startGame);
  43. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  45. function startGame() {
  46.     document.getElementById('startButton').style.display = 'none';
  47.     document.getElementById('pauseButton').style.display = 'block';
  48.     document.getElementById('gameCanvas').style.display = 'block';

  50.     resetGame();
  51.     const difficulty = document.getElementById('difficulty').value;
  52.     gameInterval = difficultySettings[difficulty];
  53.     game = setInterval(drawGame, gameInterval);
  54.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  55. }

  57. function pauseGame() {
  58.     if (game) {
  59.         clearInterval(game);
  60.         clearInterval(timeCounter);
  61.         game = null;
  62.         timeCounter = null;
  63.         document.getElementById('pauseButton').innerText = '继续';
  64.     } else {
  65.         const difficulty = document.getElementById('difficulty').value;
  66.         gameInterval = difficultySettings[difficulty];
  67.         game = setInterval(drawGame, gameInterval);
  68.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  69.         document.getElementById('pauseButton').innerText = '暂停';
  70.     }
  71. }

  73. function resetGame() {
  74.     snake = [{ x: 9 * box, y: 10 * box }];
  75.     food = generateFood();
  76.     score = 0;
  77.     direction = undefined;
  78.     timeElapsed = 0;
  79.     document.getElementById('time').innerText = timeElapsed;
  80.     loadMap(); // 加载选中的地图
  81. }

  83. document.addEventListener('keydown', changeDirection);

  85. function changeDirection(event) {
  86.     const keyPressed = event.keyCode;
  87.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  88.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  89.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  90.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  91. }

  93. function drawGame() {
  94.     context.clearRect(0, 0, canvas.width, canvas.height);

  96.     const skin = document.getElementById('skin').value;
  97.     const colors = skins[skin];

  99.     for (let i = 0; i < snake.length; i++) {
  100.         context.fillStyle = i === 0 ? 'green' : colors.snake;
  101.         context.fillRect(snake[i].x, snake[i].y, box, box);
  102.     }

  104.     context.fillStyle = colors.food;
  105.     context.fillRect(food.x, food.y, box, box);

  107.     drawObstacles();

  109.     let snakeX = snake[0].x;
  110.     let snakeY = snake[0].y;

  112.     if (direction === 'LEFT') snakeX -= box;
  113.     if (direction === 'UP') snakeY -= box;
  114.     if (direction === 'RIGHT') snakeX += box;
  115.     if (direction === 'DOWN') snakeY += box;

  117.     if (snakeX === food.x && snakeY === food.y) {
  118.         score++;
  119.         updateHighScore();
  120.         food = generateFood();
  121.     } else {
  122.         snake.pop();
  123.     }

  125.     let newHead = { x: snakeX, y: snakeY };

  127.     if (snakeX < 0) snakeX = canvas.width - box;
  128.     if (snakeY < 0) snakeY = canvas.height - box;
  129.     if (snakeX >= canvas.width) snakeX = 0;
  130.     if (snakeY >= canvas.height) snakeY = 0;

  132.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  133.         clearInterval(game);
  134.         clearInterval(timeCounter);
  135.         alert('游戏结束');
  136.         return;
  137.     }

  139.     snake.unshift(newHead);

  141.     context.fillStyle = 'black';
  142.     context.font = '20px Arial';
  143.     context.fillText(`得分: ${score}`, 5, canvas.height - 5);
  144. }

  146. function collision(head, array) {
  147.     for (let i = 0; i < array.length; i++) {
  148.         if (head.x === array[i].x && head.y === array[i].y) {
  149.             return true;
  150.         }
  151.     }
  152.     return false;
  153. }

  155. function updateHighScore() {
  156.     if (score > highScore) {
  157.         highScore = score;
  158.         localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
  159.         document.getElementById('highScore').innerText = highScore;
  160.     }
  161. }

  163. function updateTime() {
  164.     timeElapsed++;
  165.     document.getElementById('time').innerText = timeElapsed;
  166. }

  168. function generateFood() {
  169.     let newFood;
  170.     do {
  171.         newFood = {
  172.             x: Math.floor(Math.random() * 19 + 1) * box,
  173.             y: Math.floor(Math.random() * 19 + 1) * box
  174.         };
  175.     } while (collision(newFood, snake) || collision(newFood, obstacles));
  176.     return newFood;
  177. }

  179. function loadMap() {
  180.     const selectedMap = document.getElementById('map').value;
  181.     obstacles = maps[selectedMap] ? [...maps[selectedMap]] : [];
  182. }

  184. function drawObstacles() {
  185.     context.fillStyle = 'grey';
  186.     for (let i = 0; i < obstacles.length; i++) {
  187.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  188.     }
  189. }
复制代码

### 运行游戏

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

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

使用道具 举报

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表