设为首页收藏本站

科学教育

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

廖晗瑞

[复制链接]
廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

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

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <style>
  7.         /* 我们后面会在这里写CSS样式 */
  8.     </style>
  9. </head>
  10. <body>
  11.     <h1>贪吃蛇游戏</h1>
  12.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.     <script>
  14.         // 我们后面会在这里写JavaScript代码
  15.     </script>
  16. </body>
  17. </html>
复制代码


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

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

  1. <style>
  2.     body {
  3.         display: flex;
  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.     }
  11.     #gameCanvas {
  12.         border: 1px solid #000;
  13.         background-color: #fff;
  14.     }
  15. </style>
复制代码


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

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

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

  5.     const box = 20;
  6.     let snake = [];
  7.     snake[0] = { x: 9 * box, y: 10 * box };

  9.     let food = {
  10.         x: Math.floor(Math.random() * 19 + 1) * box,
  11.         y: Math.floor(Math.random() * 19 + 1) * box
  12.     }

  14.     let score = 0;

  16.     let d;

  18.     document.addEventListener('keydown', direction);

  20.     function direction(event) {
  21.         if (event.keyCode == 37 && d != 'RIGHT') {
  22.             d = 'LEFT';
  23.         } else if (event.keyCode == 38 && d != 'DOWN') {
  24.             d = 'UP';
  25.         } else if (event.keyCode == 39 && d != 'LEFT') {
  26.             d = 'RIGHT';
  27.         } else if (event.keyCode == 40 && d != 'UP') {
  28.             d = 'DOWN';
  29.         }
  30.     }

  32.     function collision(newHead, array) {
  33.         for (let i = 0; i < array.length; i++) {
  34.             if (newHead.x == array[i].x && newHead.y == array[i].y) {
  35.                 return true;
  36.             }
  37.         }
  38.         return false;
  39.     }

  41.     function draw() {
  42.         context.clearRect(0, 0, canvas.width, canvas.height);

  44.         for (let i = 0; i < snake.length; i++) {
  45.             context.fillStyle = (i == 0) ? 'green' : 'black';
  46.             context.fillRect(snake[i].x, snake[i].y, box, box);
  47.         }

  49.         context.fillStyle = 'red';
  50.         context.fillRect(food.x, food.y, box, box);

  52.         let snakeX = snake[0].x;
  53.         let snakeY = snake[0].y;

  55.         if (d == 'LEFT') snakeX -= box;
  56.         if (d == 'UP') snakeY -= box;
  57.         if (d == 'RIGHT') snakeX += box;
  58.         if (d == 'DOWN') snakeY += box;

  60.         if (snakeX == food.x && snakeY == food.y) {
  61.             score++;
  62.             food = {
  63.                 x: Math.floor(Math.random() * 19 + 1) * box,
  64.                 y: Math.floor(Math.random() * 19 + 1) * box
  65.             }
  66.         } else {
  67.             snake.pop();
  68.         }

  70.         let newHead = {
  71.             x: snakeX,
  72.             y: snakeY
  73.         }

  75.         if (snakeX < 0 || snakeY < 0 || snakeX >= 400 || snakeY >= 400 || collision(newHead, snake)) {
  76.             clearInterval(game);
  77.             alert('游戏结束');
  78.         }

  80.         snake.unshift(newHead);

  82.         context.fillStyle = 'black';
  83.         context.font = '20px Arial';
  84.         context.fillText('得分: ' + score, 5, canvas.height - 5);
  85.     }

  87.     let game = setInterval(draw, 100);
  88. </script>
复制代码


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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
板凳
 楼主| 发表于 2024-8-14 19:00:08 | 只看该作者
帮我再优化一点
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2024-8-14 19:00:34 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:00
帮我再优化一点


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

### 第一步：优化HTML结构
HTML部分基本保持不变，但我们可以为画布和样式添加一些更直观的注释和标签。确保我们的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.             justify-content: center;
  12.             align-items: center;
  13.             height: 100vh;
  14.             margin: 0;
  15.             font-family: Arial, sans-serif;
  16.             background-color: #f0f0f0;
  17.         }
  18.         #gameCanvas {
  19.             border: 2px solid #000;
  20.             background-color: #fff;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  26.     <script>
  27.         // JavaScript 代码将在这里编写
  28.     </script>
  29. </body>
  30. </html>
复制代码


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

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

  4. const box = 20; // 设定每个格子的大小
  5. let snake = [
  6.     { x: 9 * box, y: 10 * box }
  7. ];
  8. let food = {
  9.     x: Math.floor(Math.random() * 19 + 1) * box,
  10.     y: Math.floor(Math.random() * 19 + 1) * box
  11. };

  13. let score = 0;
  14. let direction;

  16. // 添加事件监听器来控制蛇的移动方向
  17. document.addEventListener('keydown', changeDirection);

  19. function changeDirection(event) {
  20.     const keyPressed = event.keyCode;
  21.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  22.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  23.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  24.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  25. }

  27. function drawGame() {
  28.     context.clearRect(0, 0, canvas.width, canvas.height);

  30.     // 绘制蛇
  31.     for (let i = 0; i < snake.length; i++) {
  32.         context.fillStyle = i === 0 ? 'green' : 'black';
  33.         context.fillRect(snake[i].x, snake[i].y, box, box);
  34.     }

  36.     // 绘制食物
  37.     context.fillStyle = 'red';
  38.     context.fillRect(food.x, food.y, box, box);

  40.     // 获取蛇头的当前位置
  41.     let snakeX = snake[0].x;
  42.     let snakeY = snake[0].y;

  44.     // 根据方向更新蛇头的位置
  45.     if (direction === 'LEFT') snakeX -= box;
  46.     if (direction === 'UP') snakeY -= box;
  47.     if (direction === 'RIGHT') snakeX += box;
  48.     if (direction === 'DOWN') snakeY += box;

  50.     // 检查蛇是否吃到食物
  51.     if (snakeX === food.x && snakeY === food.y) {
  52.         score++;
  53.         food = {
  54.             x: Math.floor(Math.random() * 19 + 1) * box,
  55.             y: Math.floor(Math.random() * 19 + 1) * box
  56.         };
  57.     } else {
  58.         snake.pop(); // 移除蛇尾部
  59.     }

  61.     // 创建新的蛇头
  62.     let newHead = { x: snakeX, y: snakeY };

  64.     // 检查是否撞墙或撞到自己
  65.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
  66.         clearInterval(game);
  67.         alert('游戏结束');
  68.         return;
  69.     }

  71.     // 将新头添加到蛇的开头
  72.     snake.unshift(newHead);

  74.     // 显示得分
  75.     context.fillStyle = 'black';
  76.     context.font = '20px Arial';
  77.     context.fillText('得分: ' + score, 5, canvas.height - 5);
  78. }

  80. function collision(head, array) {
  81.     for (let i = 0; i < array.length; i++) {
  82.         if (head.x === array[i].x && head.y === array[i].y) {
  83.             return true;
  84.         }
  85.     }
  86.     return false;
  87. }

  89. // 开始游戏：设置一个定时器，每100毫秒重绘一次画布
  90. let game = setInterval(drawGame, 100);
复制代码


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

HTML部分：
  1. <button id="startButton" onclick="startGame()">开始游戏</button>
  2. <canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>

  4. <style>
  5.     #startButton {
  6.         display: block;
  7.         margin-bottom: 20px;
  8.         padding: 10px 20px;
  9.         font-size: 16px;
  10.         cursor: pointer;
  11.     }
  12. </style>
复制代码


JavaScript部分：
  1. let game;
  2. document.getElementById('startButton').addEventListener('click', startGame);

  4. function startGame() {
  5.     document.getElementById('startButton').style.display = 'none';
  6.     document.getElementById('gameCanvas').style.display = 'block';
  7.     resetGame();
  8.     game = setInterval(drawGame, 100);
  9. }

  11. function resetGame() {
  12.     snake = [{ x: 9 * box, y: 10 * box }];
  13.     food = {
  14.         x: Math.floor(Math.random() * 19 + 1) * box,
  15.         y: Math.floor(Math.random() * 19 + 1) * box
  16.     };
  17.     score = 0;
  18.     direction = undefined;
  19. }
复制代码


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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
5#
 楼主| 发表于 2024-8-14 19:01:38 | 只看该作者
帮我增加一些功能
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
6#
发表于 2024-8-14 19:01:57 | 只看该作者
廖晗瑞 发表于 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中实现这些新功能。

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

  4. const box = 20; // 每个格子的大小
  5. let snake, food, direction, score, game, gameInterval;
  6. let highScore = 0; // 最高得分

  8. // 难度设置
  9. const difficultySettings = {
  10.     easy: 150,
  11.     normal: 100,
  12.     hard: 50
  13. };

  15. document.getElementById('startButton').addEventListener('click', startGame);
  16. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  18. function startGame() {
  19.     document.getElementById('startButton').style.display = 'none';
  20.     document.getElementById('pauseButton').style.display = 'block';
  21.     document.getElementById('gameCanvas').style.display = 'block';

  23.     resetGame();
  24.     const difficulty = document.getElementById('difficulty').value;
  25.     gameInterval = difficultySettings[difficulty];
  26.     game = setInterval(drawGame, gameInterval);
  27. }

  29. function pauseGame() {
  30.     if (game) {
  31.         clearInterval(game);
  32.         game = null;
  33.         document.getElementById('pauseButton').innerText = '继续';
  34.     } else {
  35.         game = setInterval(drawGame, gameInterval);
  36.         document.getElementById('pauseButton').innerText = '暂停';
  37.     }
  38. }

  40. function resetGame() {
  41.     snake = ;
  42.     food = {
  43.         x: Math.floor(Math.random() * 19 + 1) * box,
  44.         y: Math.floor(Math.random() * 19 + 1) * box
  45.     };
  46.     score = 0;
  47.     direction = undefined;
  48. }

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

  52. function changeDirection(event) {
  53.     const keyPressed = event.keyCode;
  54.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  55.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  56.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  57.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  58. }

  60. function drawGame() {
  61.     context.clearRect(0, 0, canvas.width, canvas.height);

  63.     // 绘制蛇
  64.     for (let i = 0; i < snake.length; i++) {
  65.         context.fillStyle = i === 0 ? 'green' : 'black';
  66.         context.fillRect(snake.x, snake.y, box, box);
  67.     }

  69.     // 绘制食物
  70.     context.fillStyle = 'red';
  71.     context.fillRect(food.x, food.y, box, box);

  73.     // 获取蛇头的当前位置
  74.     let snakeX = snake.x;
  75.     let snakeY = snake.y;

  77.     // 根据方向更新蛇头的位置
  78.     if (direction === 'LEFT') snakeX -= box;
  79.     if (direction === 'UP') snakeY -= box;
  80.     if (direction === 'RIGHT') snakeX += box;
  81.     if (direction === 'DOWN') snakeY += box;

  83.     // 检查蛇是否吃到食物
  84.     if (snakeX === food.x && snakeY === food.y) {
  85.         score++;
  86.         updateHighScore();
  87.         food = {
  88.             x: Math.floor(Math.random() * 19 + 1) * box,
  89.             y: Math.floor(Math.random() * 19 + 1) * box
  90.         };
  91.     } else {
  92.         snake.pop(); // 移除蛇尾部
  93.     }

  95.     // 创建新的蛇头
  96.     let newHead = { x: snakeX, y: snakeY };

  98.     // 检查是否撞墙或撞到自己
  99.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
  100.         clearInterval(game);
  101.         alert('游戏结束');
  102.         return;
  103.     }

  105.     // 将新头添加到蛇的开头
  106.     snake.unshift(newHead);

  108.     // 显示得分
  109.     context.fillStyle = 'black';
  110.     context.font = '20px Arial';
  111.     context.fillText('得分: ' + score, 5, canvas.height - 5);
  112. }

  114. function collision(head, array) {
  115.     for (let i = 0; i < array.length; i++) {
  116.         if (head.x === array.x && head.y === array.y) {
  117.             return true;
  118.         }
  119.     }
  120.     return false;
  121. }

  123. function updateHighScore() {
  124.     if (score > highScore) {
  125.         highScore = score;
  126.         document.getElementById('highScore').innerText = highScore;
  127.     }
  128. }

  130. // 开始游戏：设置一个定时器，每100毫秒重绘一次画布
复制代码


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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
7#
 楼主| 发表于 2024-8-14 19:04:15 | 只看该作者
还可以怎么完善游戏与增加功能
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
8#
发表于 2024-8-14 19:04:48 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:04
还可以怎么完善游戏与增加功能


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

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

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

### 设置计时器和音效

#### HTML 增加部分
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <style>
  7.         body {
  8.             display: flex;
  9.             flex-direction: column;
  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: 2px solid #000;
  19.             background-color: #fff;
  20.         }
  21.         .controls {
  22.             margin-bottom: 20px;
  23.         }
  24.         button {
  25.             padding: 10px 20px;
  26.             font-size: 16px;
  27.             margin: 5px;
  28.             cursor: pointer;
  29.         }
  30.     </style>
  31. </head>
  32. <body>

  34.     <div class="controls">
  35.         <button id="startButton">开始游戏</button>
  36.         <button id="pauseButton" style="display:none;">暂停</button>
  37.         难度:
  38.         <select id="difficulty">
  39.             <option value="easy">简单</option>
  40.             <option value="normal">普通</option>
  41.             <option value="hard">困难</option>
  42.         </select>
  43.     </div>
  44.     <canvas id="gameCanvas" width="400" height="400" style="display:none;"></canvas>
  45.     <p>最高得分: <span id="highScore">0</span></p>
  46.     <p>时间: <span id="time">0</span> 秒</p>

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

  51.     <script>
复制代码


#### 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 = 0;
  7. let timeElapsed = 0;

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

  15. document.getElementById('startButton').addEventListener('click', startGame);
  16. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  18. function startGame() {
  19.     document.getElementById('startButton').style.display = 'none';
  20.     document.getElementById('pauseButton').style.display = 'block';
  21.     document.getElementById('gameCanvas').style.display = 'block';

  23.     resetGame();
  24.     const difficulty = document.getElementById('difficulty').value;
  25.     gameInterval = difficultySettings[difficulty];
  26.     game = setInterval(drawGame, gameInterval);
  27.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  28. }

  30. function pauseGame() {
  31.     if (game) {
  32.         clearInterval(game);
  33.         clearInterval(timeCounter);
  34.         game = null;
  35.         timeCounter = null;
  36.         document.getElementById('pauseButton').innerText = '继续';
  37.     } else {
  38.         game = setInterval(drawGame, gameInterval);
  39.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  40.         document.getElementById('pauseButton').innerText = '暂停';
  41.     }
  42. }

  44. function resetGame() {
  45.     snake = [{ x: 9 * box, y: 10 * box }];
  46.     food = {
  47.         x: Math.floor(Math.random() * 19 + 1) * box,
  48.         y: Math.floor(Math.random() * 19 + 1) * box
  49.     };
  50.     score = 0;
  51.     direction = undefined;
  52.     timeElapsed = 0;
  53.     document.getElementById('time').innerText = timeElapsed;
  54. }

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

  58. function changeDirection(event) {
  59.     const keyPressed = event.keyCode;
  60.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  61.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  62.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  63.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  64. }

  66. function drawGame() {
  67.     context.clearRect(0, 0, canvas.width, canvas.height);

  69.     for (let i = 0; i < snake.length; i++) {
  70.         context.fillStyle = i === 0 ? 'green' : 'black';
  71.         context.fillRect(snake[i].x, snake[i].y, box, box);
  72.     }

  74.     context.fillStyle = 'red';
  75.     context.fillRect(food.x, food.y, box, box);

  77.     let snakeX = snake[0].x;
  78.     let snakeY = snake[0].y;

  80.     if (direction === 'LEFT') snakeX -= box;
  81.     if (direction === 'UP') snakeY -= box;
  82.     if (direction === 'RIGHT') snakeX += box;
  83.     if (direction === 'DOWN') snakeY += box;

  85.     if (snakeX === food.x && snakeY === food.y) {
  86.         score++;
  87.         updateHighScore();
  88.         document.getElementById('eatSound').play(); // 播放吃声音
  89.         food = {
  90.             x: Math.floor(Math.random() * 19 + 1) * box,
  91.             y: Math.floor(Math.random() * 19 + 1) * box
  92.         };
  93.     } else {
  94.         snake.pop();
  95.     }

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

  99.     if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
  100.         clearInterval(game);
  101.         clearInterval(timeCounter);
  102.         document.getElementById('crashSound').play(); // 播放撞墙声音
  103.         alert('游戏结束');
  104.         return;
  105.     }

  107.     snake.unshift(newHead);

  109.     context.fillStyle = 'black';
  110.     context.font = '20px Arial';
  111.     context.fillText('得分: ' + score, 5, canvas.height - 5);
  112. }

  114. function collision(head, array) {
  115.     for (let i = 0; i < array.length; i++) {
  116.         if (head.x === array[i].x && head.y === array[i].y) {
  117.             return true;
  118.         }
  119.     }
  120.     return false;
  121. }

  123. function updateHighScore() {
  124.     if (score > highScore) {
  125.         highScore = score;
  126.         document.getElementById('highScore').innerText = highScore;
  127.     }
  128. }

  130. function updateTime() {
  131.     timeElapsed++;
  132.     document.getElementById('time').innerText = timeElapsed;
  133. }
复制代码


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

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

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

使用道具 举报

廖晗瑞

5

主题

31

帖子

86

积分

注册会员

Rank: 2

积分
86
9#
 楼主| 发表于 2024-8-14 19:09:11 | 只看该作者
帮我把你提的建议添加到游戏里，并完善成一个完整的游戏
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
10#
发表于 2024-8-14 19:09:48 | 只看该作者
廖晗瑞 发表于 2024-08-14 19:09
帮我把你提的建议添加到游戏里，并完善成一个完整的游 ...


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

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

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

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

### 完整游戏代码

#### 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.             flex-direction: column;
  11.             justify-content: center;
  12.             align-items: center;
  13.             height: 100vh;
  14.             margin: 0;
  15.             font-family: Arial, sans-serif;
  16.             background-color: #f0f0f0;
  17.         }
  18.         #gameCanvas {
  19.             border: 2px solid #000;
  20.             background-color: #fff;
  21.         }
  22.         .controls {
  23.             margin-bottom: 20px;
  24.         }
  25.         button {
  26.             padding: 10px 20px;
  27.             font-size: 16px;
  28.             margin: 5px;
  29.             cursor: pointer;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div class="controls">
  35.         <button id="startButton">开始游戏</button>
  36.         <button id="pauseButton" style="display: none;">暂停</button>
  37.         难度:
  38.         <select id="difficulty">
  39.             <option value="easy">简单</option>
  40.             <option value="normal" selected>普通</option>
  41.             <option value="hard">困难</option>
  42.         </select>
  43.     </div>
  44.     最高得分: <span id="highScore">0</span><br>
  45.     时间: <span id="time">0</span> 秒<br>
  46.     <canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>

  48.     <!-- 添加音效资源 -->
  49.     <audio id="eatSound" src="eat.mp3"></audio>
  50.     <audio id="crashSound" src="crash.mp3"></audio>

  52.     <script src="snake.js"></script>
  53. </body>
  54. </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 = 0;
  7. let timeElapsed = 0;

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

  15. const obstacles = []; // 存储障碍物的位置

  17. document.getElementById('startButton').addEventListener('click', startGame);
  18. document.getElementById('pauseButton').addEventListener('click', pauseGame);

  20. function startGame() {
  21.     document.getElementById('startButton').style.display = 'none';
  22.     document.getElementById('pauseButton').style.display = 'block';
  23.     document.getElementById('gameCanvas').style.display = 'block';

  25.     resetGame();
  26.     const difficulty = document.getElementById('difficulty').value;
  27.     gameInterval = difficultySettings[difficulty];
  28.     game = setInterval(drawGame, gameInterval);
  29.     timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  30. }

  32. function pauseGame() {
  33.     if (game) {
  34.         clearInterval(game);
  35.         clearInterval(timeCounter);
  36.         game = null;
  37.         timeCounter = null;
  38.         document.getElementById('pauseButton').innerText = '继续';
  39.     } else {
  40.         game = setInterval(drawGame, gameInterval);
  41.         timeCounter = setInterval(updateTime, 1000); // 每秒更新一次时间
  42.         document.getElementById('pauseButton').innerText = '暂停';
  43.     }
  44. }

  46. function resetGame() {
  47.     snake = [{ x: 9 * box, y: 10 * box }];
  48.     food = {
  49.         x: Math.floor(Math.random() * 19 + 1) * box,
  50.         y: Math.floor(Math.random() * 19 + 1) * box
  51.     };
  52.     score = 0;
  53.     direction = undefined;
  54.     timeElapsed = 0;
  55.     document.getElementById('time').innerText = timeElapsed;
  56.     generateObstacles(); // 生成障碍物
  57. }

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

  61. function changeDirection(event) {
  62.     const keyPressed = event.keyCode;
  63.     if (keyPressed === 37 && direction !== 'RIGHT') direction = 'LEFT';
  64.     if (keyPressed === 38 && direction !== 'DOWN') direction = 'UP';
  65.     if (keyPressed === 39 && direction !== 'LEFT') direction = 'RIGHT';
  66.     if (keyPressed === 40 && direction !== 'UP') direction = 'DOWN';
  67. }

  69. function drawGame() {
  70.     context.clearRect(0, 0, canvas.width, canvas.height);

  72.     for (let i = 0; i < snake.length; i++) {
  73.         context.fillStyle = i === 0 ? 'green' : 'black';
  74.         context.fillRect(snake[i].x, snake[i].y, box, box);
  75.     }
  76.    
  77.     context.fillStyle = 'red';
  78.     context.fillRect(food.x, food.y, box, box);
  79.    
  80.     drawObstacles();

  82.     let snakeX = snake[0].x;
  83.     let snakeY = snake[0].y;

  85.     if (direction === 'LEFT') snakeX -= box;
  86.     if (direction === 'UP') snakeY -= box;
  87.     if (direction === 'RIGHT') snakeX += box;
  88.     if (direction === 'DOWN') snakeY += box;

  90.     if (snakeX === food.x && snakeY === food.y) {
  91.         score++;
  92.         updateHighScore();
  93.         document.getElementById('eatSound').play(); // 播放吃声音
  94.         food = {
  95.             x: Math.floor(Math.random() * 19 + 1) * box,
  96.             y: Math.floor(Math.random() * 19 + 1) * box
  97.         };
  98.     } else {
  99.         snake.pop();
  100.     }

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

  104.     if (snakeX < 0) snakeX = canvas.width - box;
  105.     if (snakeY < 0) snakeY = canvas.height - box;
  106.     if (snakeX >= canvas.width) snakeX = 0;
  107.     if (snakeY >= canvas.height) snakeY = 0;

  109.     if (collision(newHead, snake) || collision(newHead, obstacles)) {
  110.         clearInterval(game);
  111.         clearInterval(timeCounter);
  112.         document.getElementById('crashSound').play(); // 播放撞墙声音
  113.         alert('游戏结束');
  114.         return;
  115.     }

  117.     snake.unshift(newHead);

  119.     context.fillStyle = 'black';
  120.     context.font = '20px Arial';
  121.     context.fillText('得分: ' + score, 5, canvas.height - 5);
  122. }

  124. function collision(head, array) {
  125.     for (let i = 0; i < array.length; i++) {
  126.         if (head.x === array[i].x && head.y === array[i].y) {
  127.             return true;
  128.         }
  129.     }
  130.     return false;
  131. }

  133. function updateHighScore() {
  134.     if (score > highScore) {
  135.         highScore = score;
  136.         document.getElementById('highScore').innerText = highScore;
  137.     }
  138. }

  140. function updateTime() {
  141.     timeElapsed++;
  142.     document.getElementById('time').innerText = timeElapsed;
  143. }

  145. function generateObstacles() {
  146.     obstacles.length = 0;
  147.     // 生成 5 个随机障碍物
  148.     for (let i = 0; i < 5; i++) {
  149.         let obstacle = {
  150.             x: Math.floor(Math.random() * 19 + 1) * box,
  151.             y: Math.floor(Math.random() * 19 + 1) * box
  152.         };
  153.         obstacles.push(obstacle);
  154.     }
  155. }

  157. function drawObstacles() {
  158.     context.fillStyle = 'grey';
  159.     for (let i = 0; i < obstacles.length; i++) {
  160.         context.fillRect(obstacles[i].x, obstacles[i].y, box, box);
  161.     }
  162. }
复制代码


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

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

使用道具 举报

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

本版积分规则

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