设为首页收藏本站

科学教育

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

廖晗瑞

[复制链接]
廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
跳转到指定楼层
楼主
发表于 2024-8-14 18:58:38 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
帮我做一个完善的贪吃蛇游戏
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
24#
发表于 2024-8-14 22:18:14 | 只看该作者
廖晗瑞 发表于 2024-08-14 22:17
我不想要音效，能不能帮我去除音效


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

### HTML文件
首先，删除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.         body {
  9.             display: flex;
  10.             justify-content: center;
  11.             align-items: center;
  12.             height: 100vh;
  13.             margin: 0;
  14.             font-family: Arial, sans-serif;
  15.             background-color: #f0f0f0;
  16.         }
  17.         #gameCanvas {
  18.             border: 1px solid #000;
  19.             background-color: #fff;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.    
  25.     <canvas id="gameCanvas" width="400" height="400"></canvas>

  27.     <script src="snake.js"></script>
  28. </body>
  29. </html>
复制代码


### 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.     map3: []
  26. };

  28. let obstacles = [];

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

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

  38.     resetGame();
  39.     const difficulty = document.getElementById('difficulty').value;
  40.     gameInterval = difficultySettings[difficulty];
  41.     game = setInterval(drawGame, gameInterval);
  42.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  43. }

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

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

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

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

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

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

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

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

  95.     drawObstacles();

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

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

  105.     if (snakeX === food.x && snakeY === food.y) {
  106.         score++;
  107.         updateHighScore();
  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.         alert('游戏结束');
  124.         return;
  125.     }

  127.     snake.unshift(newHead);

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

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

  143. function updateHighScore() {
  144.     if (score > highScore) {
  145.         highScore = score;
  146.         localStorage.setItem('highScore', highScore); // 保存最高得分到localStorage
  147.         document.getElementById('highScore').innerText = highScore;
  148.     }
  149. }

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

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

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

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


### 总结

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
23#
 楼主| 发表于 2024-8-14 22:17:33 | 只看该作者
kaia 发表于 2024-8-14 19:26
好的，我们来详细讲解一下如何添加音效到贪吃蛇游戏中。

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
22#
 楼主| 发表于 2024-8-14 22:01:22 | 只看该作者
可不可以再帮我整合一下
回复 支持 反对

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
21#
 楼主| 发表于 2024-8-14 21:48:50 | 只看该作者
帮我把地图扩大一点
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
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` 文件，即可运行完整的贪吃蛇游戏。

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

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

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

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

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

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
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` 文件，即可运行游戏。

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

使用道具 举报

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

本版积分规则

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