科学教育

标题: 贪吃蛇 [打印本页]
作者: 张复礼    时间: 2024-8-2 14:58
标题: 贪吃蛇
生成一段完整的贪吃蛇游戏
作者: kaia    时间: 2024-8-2 14:59
嘿，小朋友！咱们今天来做一个有趣的小游戏吧——贪吃蛇！这可是一个经典的游戏哦！我们会用到HTML、CSS和JavaScript来完成这个小项目。准备好了吗？让我们开始吧！

### 第一步：设置HTML结构
首先，我们需要一个简单的HTML文件来放置我们的游戏画布(canvas)。它就像是我们的“游戏舞台”。

创建一个新的HTML文件，命名为 `index.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.         canvas {
  9.             border: 1px solid black;
  10.             background-color: #f5f5f5;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  16.     <script src="script.js"></script>
  17. </body>
  18. </html>
复制代码


### 第二步：设置CSS样式
在上面的HTML文件中，我们已经加了简单的CSS样式，用来显示一个边框，并设置画布的背景颜色。

### 第三步：编写JavaScript
现在，我们要来写最重要的JavaScript部分。在HTML文件的最后一行，我们使用`<script>`标签引入了一个叫做 `script.js` 的文件。接下来，我们需要创建这个文件，并使用它来实现贪吃蛇游戏的逻辑。

新建一个文件，命名为 `script.js`，然后添加以下代码：

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

  4. let snake = [
  5.     { x: 150, y: 150 },
  6.     { x: 140, y: 150 },
  7.     { x: 130, y: 150 },
  8.     { x: 120, y: 150 },
  9.     { x: 110, y: 150 }
  10. ];

  12. let dx = 10;
  13. let dy = 0;

  15. function clearCanvas() {
  16.     ctx.fillStyle = "white";
  17.     ctx.strokeStyle = "black";
  18.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  19.     ctx.strokeRect(0, 0, canvas.width, canvas.height);
  20. }

  22. function drawSnake() {
  23.     snake.forEach(drawSnakePart);
  24. }

  26. function drawSnakePart(snakePart) {
  27.     ctx.fillStyle = 'lightgreen';
  28.     ctx.strokeStyle = 'darkgreen';

  30.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  31.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  32. }

  34. function moveSnake() {
  35.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  36.     snake.unshift(head);
  37.     snake.pop();
  38. }

  40. function main() {
  41.     setTimeout(function onTick() {
  42.         clearCanvas();
  43.         moveSnake();
  44.         drawSnake();
  45.         
  46.         main();
  47.     }, 100);
  48. }

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

  52. function changeDirection(event) {
  53.     const LEFT_KEY = 37;
  54.     const RIGHT_KEY = 39;
  55.     const UP_KEY = 38;
  56.     const DOWN_KEY = 40;

  58.     const keyPressed = event.keyCode;
  59.     const goingUp = dy === -10;
  60.     const goingDown = dy === 10;
  61.     const goingRight = dx === 10;
  62.     const goingLeft = dx === -10;

  64.     if (keyPressed === LEFT_KEY && !goingRight) {
  65.         dx = -10;
  66.         dy = 0;
  67.     }

  69.     if (keyPressed === UP_KEY && !goingDown) {
  70.         dx = 0;
  71.         dy = -10;
  72.     }

  74.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  75.         dx = 10;
  76.         dy = 0;
  77.     }

  79.     if (keyPressed === DOWN_KEY && !goingUp) {
  80.         dx = 0;
  81.         dy = 10;
  82.     }
  83. }

  85. main();
复制代码


### 解释一下代码：
1. **初始化贪吃蛇**：我们设定了初始的蛇身体位置，宽度和高度都为10个像素。
2. **画布清理函数**：每次更新蛇的位置前，我们需要清理画布。
3. **绘制蛇**：定义了如何绘制蛇的每一节。
4. **移动蛇**：蛇的每一节都会往前挪动一格。
5. **主循环(main)**：每100毫秒，我们会清理画布、移动蛇、再重新绘制。
6. **方向控制**：通过监听键盘事件，实现上下左右的控制。

这么一来，你就可以在浏览器中打开 `index.html` 文件，尽情享受你的贪吃蛇游戏了！加油，希望你玩得开心！
作者: 张复礼    时间: 2024-8-2 15:11
你好，我的游戏需要出现蛇的食物，蛇吃了食物之后变长，当蛇碰壁后显示“游戏结束”及得分，出现“开始游戏”的按钮。
作者: kaia    时间: 2024-8-2 15:12
张复礼 发表于 2024-08-02 15:11
你好，我的游戏需要出现蛇的食物，蛇吃了食物之后变长 ...


好的，小朋友！我们来为贪吃蛇游戏添加食物、增加得分和游戏结束的功能吧！这是一个非常有趣的部分。下面我们逐步修改 `script.js` 文件。

### 修改后的 JavaScript 代码

在之前的代码基础上添加以下内容：

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

  4. let snake = [{ x: 50, y: 50 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     // 检测碰壁
  44.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  45.         gameOver = true;
  46.         return;
  47.     }

  49.     snake.unshift(head);

  51.     // 检查是否吃到食物
  52.     if (head.x === food.x && head.y === food.y) {
  53.         score++;
  54.         food = randomFoodPosition();
  55.     } else {
  56.         snake.pop();
  57.     }
  58. }

  60. function collision(head) {
  61.     for (let i = 1; i < snake.length; i++) {
  62.         if (snake[i].x === head.x && snake[i].y === head.y) {
  63.             return true;
  64.         }
  65.     }
  66.     return false;
  67. }

  69. function main() {
  70.     if (gameOver) {
  71.         displayGameOver();
  72.         return;
  73.     }

  75.     setTimeout(function onTick() {
  76.         clearCanvas();
  77.         drawFood();
  78.         moveSnake();
  79.         drawSnake();
  80.         main();
  81.     }, 100);
  82. }

  84. function changeDirection(event) {
  85.     const LEFT_KEY = 37;
  86.     const RIGHT_KEY = 39;
  87.     const UP_KEY = 38;
  88.     const DOWN_KEY = 40;

  90.     const keyPressed = event.keyCode;
  91.     const goingUp = dy === -10;
  92.     const goingDown = dy === 10;
  93.     const goingRight = dx === 10;
  94.     const goingLeft = dx === -10;

  96.     if (keyPressed === LEFT_KEY && !goingRight) {
  97.         dx = -10;
  98.         dy = 0;
  99.     }

  101.     if (keyPressed === UP_KEY && !goingDown) {
  102.         dx = 0;
  103.         dy = -10;
  104.     }

  106.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  107.         dx = 10;
  108.         dy = 0;
  109.     }

  111.     if (keyPressed === DOWN_KEY && !goingUp) {
  112.         dx = 0;
  113.         dy = 10;
  114.     }
  115. }

  117. // 显示游戏结束
  118. function displayGameOver() {
  119.     ctx.fillStyle = "black";
  120.     ctx.font = "30px Arial";
  121.     ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
  122.     document.getElementById("startButton").style.display = "block";
  123. }

  125. function startGame() {
  126.     snake = [{ x: 50, y: 50 }];
  127.     score = 0;
  128.     dx = 10;
  129.     dy = 0;
  130.     gameOver = false;
  131.     food = randomFoodPosition();
  132.     main();
  133. }

  135. food = randomFoodPosition();
  136. main();
复制代码


### 修改后的 HTML 代码

在原有的 `index.html` 文件中，添加一个开始游戏的按钮：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  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.         canvas {
  9.             border: 1px solid black;
  10.             background-color: #f5f5f5;
  11.         }
  12.         #startButton {
  13.             display: none;
  14.             margin-top: 10px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  20.     <button id="startButton" onclick="startGame()">开始游戏</button>
  21.     <script src="script.js"></script>
  22. </body>
  23. </html>
复制代码


### 解释修改的内容：

1. **生成食物**：使用 `randomFoodPosition()` 函数随机位置放置食物。
2. **增加得分**：每次蛇吃到食物时，得分加一，并重新生成食物。
3. **检测碰壁**：如果蛇的头部碰到边界或自己的身体，游戏结束。
4. **显示游戏结束信息**：当游戏结束时，显示得分和“开始游戏”按钮。
5. **重新开始游戏**：点击“开始游戏”按钮后，游戏会重置并开始。

现在你打开 `index.html` 文件，就可以玩这个完整的贪吃蛇游戏了！享受游戏吧！如果还有其他问题，随时问我哦！
作者: 张复礼    时间: 2024-8-2 15:34
为什么没有css文件
作者: kaia    时间: 2024-8-2 15:34
张复礼 发表于 2024-08-02 15:34
为什么没有css文件


抱歉忘记提到CSS文件了！来，我们为这个贪吃蛇游戏添加一些简单的样式，使它看起来更好。接下来，我们会创建一个 `style.css` 文件并添加相应的样式。

### 创建 CSS 文件

新建一个文件，命名为 `style.css`，然后添加以下内容：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8. }

  10. canvas {
  11.     border: 1px solid black;
  12.     background-color: #f5f5f5;
  13. }

  15. #startButton {
  16.     display: none; /* 默认隐藏 */
  17.     padding: 10px 20px;
  18.     font-size: 20px;
  19.     margin-top: 10px;
  20.     cursor: pointer;
  21.     background-color: #4CAF50; /* 绿色按钮 */
  22.     color: white;
  23.     border: none;
  24.     border-radius: 5px;
  25. }

  27. #startButton:hover {
  28.     background-color: #45a049; /* 更深的绿色 */
  29. }
复制代码


### 修改 HTML 文件以链接 CSS

确保在 `index.html` 文件的 `<head>` 部分连接这个 CSS 文件：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  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.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <button id="startButton" onclick="startGame()">开始游戏</button>

  13.     <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


### 解释 CSS 样式：

1. **`body`**: 用 Flexbox 布局使画布和按钮居中，背景颜色为淡灰色。
2. **`canvas`**: 设置边框和背景颜色。
3. **`#startButton`**: 设置按钮的样式，包括颜色、大小以及鼠标悬停时的效果。

### 运行游戏

完成这些后，你可以在浏览器中打开 `index.html` 文件，使用“开始游戏”按钮来开始你的贪吃蛇游戏！希望你喜欢这些改动！如果还有其他问题，或者想进一步增加更多功能，随时告诉我哦！
作者: 张复礼    时间: 2024-8-6 14:17
游戏结束后，“开始游戏”的按钮出现在“游戏结束！”四个字下方。
作者: kaia    时间: 2024-8-6 14:18
张复礼 发表于 2024-08-06 14:17
游戏结束后，“开始游戏”的按钮出现在“游戏结束！” ...


好的，我们来调整一下按钮在“游戏结束！”文字下方的位置。为此，我们将进一步改进 HTML 和 CSS 代码，使布局更合理。

### 修改后的 HTML 代码

更新你的 `index.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.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.     <div id="gameOverText" class="hidden">游戏结束！</div>
  13.     <button id="startButton" onclick="startGame()">开始游戏</button>
  14.     <script src="script.js"></script>
  15. </body>
  16. </html>
复制代码


这里我们添加了一个 `<div>` 标签，用于显示“游戏结束！”的信息。

### 修改后的 CSS 代码

更新你的 `style.css` 文件，使其如下所示：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8.     margin: 0;
  9. }

  11. canvas {
  12.     border: 1px solid black;
  13.     background-color: #f5f5f5;
  14. }

  16. #startButton {
  17.     display: none; /* 默认隐藏 */
  18.     padding: 10px 20px;
  19.     font-size: 20px;
  20.     margin-top: 10px;
  21.     cursor: pointer;
  22.     background-color: #4CAF50; /* 绿色按钮 */
  23.     color: white;
  24.     border: none;
  25.     border-radius: 5px;
  26. }

  28. #startButton:hover {
  29.     background-color: #45a049; /* 更深的绿色 */
  30. }

  32. #gameOverText {
  33.     font-size: 24px;
  34.     color: red;
  35.     margin-top: 20px;
  36.     display: none; /* 默认隐藏 */
  37. }

  39. .hidden {
  40.     display: none;
  41. }
复制代码


### 修改后的 JavaScript 代码

接下来，更新 `script.js` 文件，使其如下所示：

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

  4. let snake = [{ x: 50, y: 50 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     // 检测碰壁
  44.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  45.         gameOver = true;
  46.         return;
  47.     }

  49.     snake.unshift(head);

  51.     // 检查是否吃到食物
  52.     if (head.x === food.x && head.y === food.y) {
  53.         score++;
  54.         food = randomFoodPosition();
  55.     } else {
  56.         snake.pop();
  57.     }
  58. }

  60. function collision(head) {
  61.     for (let i = 1; i < snake.length; i++) {
  62.         if (snake[i].x === head.x && snake[i].y === head.y) {
  63.             return true;
  64.         }
  65.     }
  66.     return false;
  67. }

  69. function main() {
  70.     if (gameOver) {
  71.         displayGameOver();
  72.         return;
  73.     }

  75.     setTimeout(function onTick() {
  76.         clearCanvas();
  77.         drawFood();
  78.         moveSnake();
  79.         drawSnake();
  80.         main();
  81.     }, 100);
  82. }

  84. function changeDirection(event) {
  85.     const LEFT_KEY = 37;
  86.     const RIGHT_KEY = 39;
  87.     const UP_KEY = 38;
  88.     const DOWN_KEY = 40;

  90.     const keyPressed = event.keyCode;
  91.     const goingUp = dy === -10;
  92.     const goingDown = dy === 10;
  93.     const goingRight = dx === 10;
  94.     const goingLeft = dx === -10;

  96.     if (keyPressed === LEFT_KEY && !goingRight) {
  97.         dx = -10;
  98.         dy = 0;
  99.     }

  101.     if (keyPressed === UP_KEY && !goingDown) {
  102.         dx = 0;
  103.         dy = -10;
  104.     }

  106.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  107.         dx = 10;
  108.         dy = 0;
  109.     }

  111.     if (keyPressed === DOWN_KEY && !goingUp) {
  112.         dx = 0;
  113.         dy = 10;
  114.     }
  115. }

  117. // 显示游戏结束
  118. function displayGameOver() {
  119.     document.getElementById('gameOverText').classList.remove('hidden');
  120.     document.getElementById('startButton').style.display = 'block';
  121. }

  123. function startGame() {
  124.     snake = [{ x: 50, y: 50 }];
  125.     score = 0;
  126.     dx = 10;
  127.     dy = 0;
  128.     gameOver = false;
  129.     food = randomFoodPosition();
  130.     document.getElementById('gameOverText').classList.add('hidden');
  131.     document.getElementById('startButton').style.display = 'none';
  132.     main();
  133. }

  135. food = randomFoodPosition();
  136. main();
复制代码


### 解释调整内容：

1. **HTML**：
    - 添加了一个 `<div id="gameOverText" class="hidden">` 用于显示“游戏结束！”信息。
    - 更新了按钮的点击事件为 `onclick="startGame()"`。
   
2. **CSS**：
    - 更新了 `#gameOverText` 样式，确保它默认隐藏，并在需要的时候显示。
    - 确保 `#startButton` 和 `#gameOverText` 在样式上有合理的间距。

3. **JavaScript**：
    - 添加了 `displayGameOver` 函数来显示“游戏结束！”信息和按钮。
    - 更新了 `startGame` 函数以重置游戏状态并隐藏“游戏结束！”信息和按钮。

现在，游戏结束后，“开始游戏”按钮将显示在“游戏结束！”文字的下方。希望这些修改能满足你的需求！如果还有其他问题，尽管问我哦！
作者: 张复礼    时间: 2024-8-6 14:21
游戏结束后，显示“很遗憾！游戏结束”，并显示得分
作者: kaia    时间: 2024-8-6 14:23
张复礼 发表于 2024-08-06 14:21
游戏结束后，显示“很遗憾！游戏结束”，并显示得分 ...


好的，让我们在游戏结束时更清晰地显示“很遗憾！游戏结束”，并显示得分。我们会在HTML中添加一个用于显示游戏结束信息的元素，并在JavaScript中更新其内容。

### 修改后的 HTML 代码

首先，更新你的 `index.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.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <div id="gameOverText" class="hidden">很遗憾！游戏结束<br>得分: <span id="score"></span></div>
  12.     <button id="startButton" onclick="startGame()">开始游戏</button>
  13.     <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


这里我们使用了 `<span id="score"></span>` 来动态显示得分。

### 修改后的 CSS 代码

更新你的 `style.css` 文件，使其如下所示（没有太大变化，只是确保样式合理）：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8.     margin: 0;
  9. }

  11. canvas {
  12.     border: 1px solid black;
  13.     background-color: #f5f5f5;
  14. }

  16. #startButton {
  17.     display: none; /* 默认隐藏 */
  18.     padding: 10px 20px;
  19.     font-size: 20px;
  20.     margin-top: 10px;
  21.     cursor: pointer;
  22.     background-color: #4CAF50; /* 绿色按钮 */
  23.     color: white;
  24.     border: none;
  25.     border-radius: 5px;
  26. }

  28. #startButton:hover {
  29.     background-color: #45a049; /* 更深的绿色 */
  30. }

  32. #gameOverText {
  33.     font-size: 24px;
  34.     color: red;
  35.     text-align: center;
  36.     margin-top: 20px;
  37.     display: none; /* 默认隐藏 */
  38. }
复制代码


### 修改后的 JavaScript 代码

接下来，更新 `script.js` 文件，使其如下所示：

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

  4. let snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     // 检测碰壁
  44.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  45.         gameOver = true;
  46.         return;
  47.     }

  49.     snake.unshift(head);

  51.     // 检查是否吃到食物
  52.     if (head.x === food.x && head.y === food.y) {
  53.         score++;
  54.         food = randomFoodPosition();
  55.     } else {
  56.         snake.pop();
  57.     }
  58. }

  60. function collision(head) {
  61.     for (let i = 1; i < snake.length; i++) {
  62.         if (snake[i].x === head.x && snake[i].y === head.y) {
  63.             return true;
  64.         }
  65.     }
  66.     return false;
  67. }

  69. function main() {
  70.     if (gameOver) {
  71.         displayGameOver();
  72.         return;
  73.     }

  75.     setTimeout(function onTick() {
  76.         clearCanvas();
  77.         drawFood();
  78.         moveSnake();
  79.         drawSnake();
  80.         main();
  81.     }, 100);
  82. }

  84. function changeDirection(event) {
  85.     const LEFT_KEY = 37;
  86.     const RIGHT_KEY = 39;
  87.     const UP_KEY = 38;
  88.     const DOWN_KEY = 40;

  90.     const keyPressed = event.keyCode;
  91.     const goingUp = dy === -10;
  92.     const goingDown = dy === 10;
  93.     const goingRight = dx === 10;
  94.     const goingLeft = dx === -10;

  96.     if (keyPressed === LEFT_KEY && !goingRight) {
  97.         dx = -10;
  98.         dy = 0;
  99.     }

  101.     if (keyPressed === UP_KEY && !goingDown) {
  102.         dx = 0;
  103.         dy = -10;
  104.     }

  106.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  107.         dx = 10;
  108.         dy = 0;
  109.     }

  111.     if (keyPressed === DOWN_KEY && !goingUp) {
  112.         dx = 0;
  113.         dy = 10;
  114.     }
  115. }

  117. // 显示游戏结束
  118. function displayGameOver() {
  119.     document.getElementById('gameOverText').classList.remove('hidden');
  120.     document.getElementById('score').innerText = score;
  121.     document.getElementById('startButton').style.display = 'block';
  122. }

  124. function startGame() {
  125.     snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }, { x: 120, y: 150 }, { x: 110, y: 150 }];
  126.     score = 0;
  127.     dx = 10;
  128.     dy = 0;
  129.     gameOver = false;
  130.     food = randomFoodPosition();
  131.     document.getElementById('gameOverText').classList.add('hidden');
  132.     document.getElementById('startButton').style.display = 'none';
  133.     main();
  134. }

  136. food = randomFoodPosition();
  137. main();
复制代码


### 解释调整内容：

1. **HTML**：
    - 添加了一个用于显示“很遗憾！游戏结束”和得分信息的 `<span id="score"></span>`。
   
2. **CSS**：
    - 添加了 `#gameOverText` 的样式，确保它在需要的时候显示，并且居中显示文本。

3. **JavaScript**：
    - 在 `displayGameOver` 函数中更新了 `gameOverText` 的内容以包含得分。
    - 确保游戏结束时，“游戏结束！”信息和按钮一同显示。

现在，当游戏结束时，会显示“很遗憾！游戏结束”并显示得分，同时“开始游戏”按钮也会出现在下方。希望这些修改能满足你的需求！如果还有其他问题，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-6 14:54
如何修改这句代码，让“开始游戏”按钮出现在界面的中间。<button id="startButton" onclick="startGame()">开始游戏</button>
作者: kaia    时间: 2024-8-6 14:54
张复礼 发表于 2024-08-06 14:54
如何修改这句代码，让“开始游戏”按钮出现在界面的中 ...


要让“开始游戏”按钮出现在界面的中间，可以通过修改CSS样式来实现。我们将使用Flexbox布局，使按钮居中，同时确保其他元素也在正确的位置。

### 修改后的 HTML 代码

确保 `index.html` 文件如下所示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <div id="gameContainer">
  11.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.         <div id="gameOverText" class="hidden">很遗憾！游戏结束<br>得分: <span id="score">0</span></div>
  13.         <button id="startButton" onclick="startGame()">开始游戏</button>
  14.     </div>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


### 修改后的 CSS 代码

更新 `style.css` 文件，使其如下所示：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8.     margin: 0;
  9. }

  11. h1 {
  12.     margin-bottom: 20px;
  13. }

  15. #gameContainer {
  16.     display: flex;
  17.     flex-direction: column;
  18.     align-items: center;
  19. }

  21. canvas {
  22.     border: 1px solid black;
  23.     background-color: #f5f5f5;
  24. }

  26. #startButton {
  27.     display: none; /* 默认隐藏 */
  28.     padding: 10px 20px;
  29.     font-size: 20px;
  30.     margin-top: 20px;
  31.     cursor: pointer;
  32.     background-color: #4CAF50; /* 绿色按钮 */
  33.     color: white;
  34.     border: none;
  35.     border-radius: 5px;
  36. }

  38. #startButton:hover {
  39.     background-color: #45a049; /* 更深的绿色 */
  40. }

  42. #gameOverText {
  43.     font-size: 24px;
  44.     color: red;
  45.     text-align: center;
  46.     margin-top: 20px;
  47.     display: none; /* 默认隐藏 */
  48. }

  50. .hidden {
  51.     display: none;
  52. }
复制代码


### 修改后的 JavaScript 代码

确保 `script.js` 文件如下所示：

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

  4. let snake = [{ x: 50, y: 50 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     // 检测碰壁
  44.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  45.         gameOver = true;
  46.         return;
  47.     }

  49.     snake.unshift(head);

  51.     // 检查是否吃到食物
  52.     if (head.x === food.x && head.y === food.y) {
  53.         score++;
  54.         food = randomFoodPosition();
  55.     } else {
  56.         snake.pop();
  57.     }
  58. }

  60. function collision(head) {
  61.     for (let i = 1; i < snake.length; i++) {
  62.         if (snake[i].x === head.x && snake[i].y === head.y) {
  63.             return true;
  64.         }
  65.     }
  66.     return false;
  67. }

  69. function main() {
  70.     if (gameOver) {
  71.         displayGameOver();
  72.         return;
  73.     }

  75.     setTimeout(function onTick() {
  76.         clearCanvas();
  77.         drawFood();
  78.         moveSnake();
  79.         drawSnake();
  80.         main();
  81.     }, 100);
  82. }

  84. function changeDirection(event) {
  85.     const LEFT_KEY = 37;
  86.     const RIGHT_KEY = 39;
  87.     const UP_KEY = 38;
  88.     const DOWN_KEY = 40;

  90.     const keyPressed = event.keyCode;
  91.     const goingUp = dy === -10;
  92.     const goingDown = dy === 10;
  93.     const goingRight = dx === 10;
  94.     const goingLeft = dx === -10;

  96.     if (keyPressed === LEFT_KEY && !goingRight) {
  97.         dx = -10;
  98.         dy = 0;
  99.     }

  101.     if (keyPressed === UP_KEY && !goingDown) {
  102.         dx = 0;
  103.         dy = -10;
  104.     }

  106.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  107.         dx = 10;
  108.         dy = 0;
  109.     }

  111.     if (keyPressed === DOWN_KEY && !goingUp) {
  112.         dx = 0;
  113.         dy = 10;
  114.     }
  115. }

  117. // 显示游戏结束
  118. function displayGameOver() {
  119.     document.getElementById('gameOverText').classList.remove('hidden');
  120.     document.getElementById('score').innerText = score;
  121.     document.getElementById('startButton').style.display = 'block';
  122. }

  124. function startGame() {
  125.     snake = [{ x: 50, y: 50 }];
  126.     score = 0;
  127.     dx = 10;
  128.     dy = 0;
  129.     gameOver = false;
  130.     food = randomFoodPosition();
  131.     document.getElementById('gameOverText').classList.add('hidden');
  132.     document.getElementById('startButton').style.display = 'none';
  133.     main();
  134. }

  136. food = randomFoodPosition();
  137. main();
复制代码


### 解释调整内容：

1. **HTML**：
    - 添加了一个 `div` 容器 (`#gameContainer`) 来包含 canvas、游戏结束信息和按钮。
   
2. **CSS**：
    - 使用 `#gameContainer` 居中排列元素。
    - 确保 canvas 和按钮等元素在布局上合理安排。

3. **JavaScript**：
    - 确保游戏结束时，更新和显示游戏结束信息以及按钮。
    - 确保重新开始游戏时，隐藏游戏结束信息和按钮。

这样，“开始游戏”按钮将会出现在界面的中间，并在游戏结束后显示，期待你满意这个版本的改动！如果还有任何问题，请随时告知哦！
作者: 张复礼    时间: 2024-8-6 14:59
修改这句代码 ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
让“游戏结束！和”得分“分成两行显示。
作者: kaia    时间: 2024-8-6 15:00
张复礼 发表于 2024-08-06 14:59
修改这句代码 ctx.fillText("游戏结束！得分: " + sco ...


要让“游戏结束！”和“得分”分成两行显示，可以在canvas上绘制多行文本。我们可以通过调用 `ctx.fillText` 两次，分别绘制两行文本。但是为了更整齐，请确保计算好每行的位置。

以下是修改后的JavaScript代码：

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

  4. let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. // 随机生成食物位置
  14. function randomFoodPosition() {
  15.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  16.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  17.     return { x, y };
  18. }

  20. // 清理画布
  21. function clearCanvas() {
  22.     ctx.fillStyle = "white";
  23.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  24. }

  26. // 绘制蛇
  27. function drawSnake() {
  28.     snake.forEach(drawSnakePart);
  29. }

  31. // 绘制蛇的部分
  32. function drawSnakePart(snakePart) {
  33.     ctx.fillStyle = 'lightgreen';
  34.     ctx.strokeStyle = 'darkgreen';
  35.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  36.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  37. }

  39. // 绘制食物
  40. function drawFood() {
  41.     ctx.fillStyle = 'red';
  42.     ctx.fillRect(food.x, food.y, 10, 10);
  43. }

  45. // 移动蛇
  46. function moveSnake() {
  47.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  49.     // 检测碰壁
  50.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  51.         gameOver = true;
  52.         return;
  53.     }

  55.     snake.unshift(head);

  57.     // 检查是否吃到食物
  58.     if (head.x === food.x && head.y === food.y) {
  59.         score++;
  60.         food = randomFoodPosition();
  61.     } else {
  62.         snake.pop();
  63.     }
  64. }

  66. // 检测自身碰撞
  67. function collision(head) {
  68.     for (let i = 1; i < snake.length; i++) {
  69.         if (snake[i].x === head.x && snake[i].y === head.y) {
  70.             return true;
  71.         }
  72.     }
  73.     return false;
  74. }

  76. // 主循环函数
  77. function main() {
  78.     if (gameOver) {
  79.         displayGameOver();
  80.         return;
  81.     }

  83.     setTimeout(function onTick() {
  84.         clearCanvas();
  85.         drawFood();
  86.         moveSnake();
  87.         drawSnake();
  88.         main();
  89.     }, 100);
  90. }

  92. // 方向控制函数
  93. function changeDirection(event) {
  94.     const LEFT_KEY = 37;
  95.     const RIGHT_KEY = 39;
  96.     const UP_KEY = 38;
  97.     const DOWN_KEY = 40;

  99.     const keyPressed = event.keyCode;
  100.     const goingUp = dy === -10;
  101.     const goingDown = dy === 10;
  102.     const goingRight = dx === 10;
  103.     const goingLeft = dx === -10;

  105.     if (keyPressed === LEFT_KEY && !goingRight) {
  106.         dx = -10;
  107.         dy = 0;
  108.     }

  110.     if (keyPressed === UP_KEY && !goingDown) {
  111.         dx = 0;
  112.         dy = -10;
  113.     }

  115.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  116.         dx = 10;
  117.         dy = 0;
  118.     }

  120.     if (keyPressed === DOWN_KEY && !goingUp) {
  121.         dx = 0;
  122.         dy = 10;
  123.     }
  124. }

  126. // 显示游戏结束
  127. function displayGameOver() {
  128.     ctx.fillStyle = "black";
  129.     ctx.font = "30px Arial";

  131.     // 绘制“游戏结束！”
  132.     ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);

  134.     // 绘制得分
  135.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);

  137.     document.getElementById('startButton').style.display = 'block';
  138. }

  140. function startGame() {
  141.     snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  142.     score = 0;
  143.     dx = 10;
  144.     dy = 0;
  145.     gameOver = false;
  146.     food = randomFoodPosition();
  147.     document.getElementById('gameOverText').classList.add('hidden');
  148.     document.getElementById('startButton').style.display = 'none';
  149.     main();
  150. }

  152. food = randomFoodPosition();
  153. main();
复制代码


### 解释修改内容：

1. **`displayGameOver`** 函数：
    - 增加了两个 `ctx.fillText` 调用，一个用于绘制“游戏结束！”，另一个用于绘制得分。
    - 调整了每个 `fillText` 的位置，使其分别对应canvas的中央（水平居中）并分成两行显示。

这种方式能让“游戏结束！”和“得分”分成两行显示，并且让“开始游戏”按钮显示在界面的中间。如果还有其他问题或需求，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-6 15:02
在js文件中修改这句代码 ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
让“游戏结束！和”得分“分成两行显示。
作者: kaia    时间: 2024-8-6 15:02
张复礼 发表于 2024-08-06 15:02
在js文件中修改这句代码 ctx.fillText("游戏结束！得 ...


好的，为了让“游戏结束！”和“得分”分成两行显示，只需在 `ctx.fillText` 中调用两次，并调整它们的垂直位置。以下是如何修改代码：

### 修改后的代码

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

  4. let snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  44.         gameOver = true;
  45.         return;
  46.     }

  48.     snake.unshift(head);

  50.     if (head.x === food.x && head.y === food.y) {
  51.         score++;
  52.         food = randomFoodPosition();
  53.     } else {
  54.         snake.pop();
  55.     }
  56. }

  58. function collision(head) {
  59.     for (let i = 1; i < snake.length; i++) {
  60.         if (snake[i].x === head.x && snake[i].y === head.y) {
  61.             return true;
  62.         }
  63.     }
  64.     return false;
  65. }

  67. function main() {
  68.     if (gameOver) {
  69.         displayGameOver();
  70.         return;
  71.     }

  73.     setTimeout(function onTick() {
  74.         clearCanvas();
  75.         drawFood();
  76.         moveSnake();
  77.         drawSnake();
  78.         main();
  79.     }, 100);
  80. }

  82. function changeDirection(event) {
  83.     const LEFT_KEY = 37;
  84.     const RIGHT_KEY = 39;
  85.     const UP_KEY = 38;
  86.     const DOWN_KEY = 40;

  88.     const keyPressed = event.keyCode;
  89.     const goingUp = dy === -10;
  90.     const goingDown = dy === 10;
  91.     const goingRight = dx === 10;
  92.     const goingLeft = dx === -10;

  94.     if (keyPressed === LEFT_KEY && !goingRight) {
  95.         dx = -10;
  96.         dy = 0;
  97.     }

  99.     if (keyPressed === UP_KEY && !goingDown) {
  100.         dx = 0;
  101.         dy = -10;
  102.     }

  104.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  105.         dx = 10;
  106.         dy = 0;
  107.     }

  109.     if (keyPressed === DOWN_KEY && !goingUp) {
  110.         dx = 0;
  111.         dy = 10;
  112.     }
  113. }

  115. // 显示游戏结束
  116. function displayGameOver() {
  117.     ctx.fillStyle = "black";
  118.     ctx.font = "30px Arial";

  120.     // 绘制“游戏结束！”位于中心稍上方
  121.     ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);

  123.     // 绘制得分位于中心稍下方
  124.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);

  126.     document.getElementById('startButton').style.display = 'block';
  127. }

  129. function startGame() {
  130.     snake = [{ x: 150, y: 150 }, { x: 140, y: 150 }, { x: 130, y: 150 }];
  131.     score = 0;
  132.     dx = 10;
  133.     dy = 0;
  134.     gameOver = false;
  135.     food = randomFoodPosition();
  136.     document.getElementById('startButton').style.display = 'none';
  137.     main();
  138. }

  140. food = randomFoodPosition();
  141. main();
复制代码


### 解释修改内容：

- **`ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);`**：这行代码绘制“游戏结束！”文本，位于画布的水平中央位置，稍微向上调整，使其在画布中央偏上的位置。
  
- **`ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);`**：这行代码绘制得分文本，位于画布的水平中央位置，稍微向下调整，使其在画布中央偏下的位置。

通过这种方法，“游戏结束！”和“得分”会显示在两行，并且在画布的中心位置。

希望这些修改能满足你的需求！如果你有其他问题或需要进一步的帮助，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-6 15:08
把background-color: #45a049;改成浅蓝色
作者: kaia    时间: 2024-8-6 15:08
张复礼 发表于 2024-08-06 15:08
把background-color: #45a049;改成浅蓝色


好的，我们可以把 `background-color` 改成浅蓝色。在CSS中，可以使用颜色名称或者16进制的颜色代码来实现。浅蓝色在16进制表示为 `#ADD8E6`，当然你也可以直接使用颜色名称 `lightblue`。

### 修改后的 CSS 代码：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     background-color: #e0e0e0;
  8.     margin: 0;
  9. }

  11. h1 {
  12.     margin-bottom: 20px;
  13. }

  15. #gameContainer {
  16.     display: flex;
  17.     flex-direction: column;
  18.     align-items: center;
  19. }

  21. canvas {
  22.     border: 1px solid black;
  23.     background-color: #f5f5f5;
  24. }

  26. #startButton {
  27.     display: none; /* 默认隐藏 */
  28.     padding: 10px 20px;
  29.     font-size: 20px;
  30.     margin-top: 20px;
  31.     cursor: pointer;
  32.     background-color: #4CAF50; /* 绿色按钮 */
  33.     color: white;
  34.     border: none;
  35.     border-radius: 5px;
  36. }

  38. #startButton:hover {
  39.     background-color: #ADD8E6; /* 浅蓝色 */
  40. }

  42. #gameOverText {
  43.     font-size: 24px;
  44.     color: red;
  45.     text-align: center;
  46.     margin-top: 20px;
  47.     display: none; /* 默认隐藏 */
  48. }

  50. .hidden {
  51.     display: none;
  52. }
复制代码


### 整合的 HTML 和 JavaScript 代码:

为了确保所有代码正确，这里是整合后的HTML和JavaScript代码：

#### HTML (`index.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 id="gameContainer">
  12.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.         <div id="gameOverText" class="hidden">
  14.             <p>很遗憾！游戏结束</p>
  15.             <p>得分: <span id="score">0</span></p>
  16.         </div>
  17.         <button id="startButton" onclick="startGame()">开始游戏</button>
  18.     </div>
  19.     <script src="script.js"></script>
  20. </body>
  21. </html>
复制代码


#### JavaScript (`script.js`):

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

  4. let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. document.addEventListener("keydown", changeDirection);

  13. function randomFoodPosition() {
  14.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  15.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  16.     return { x, y };
  17. }

  19. function clearCanvas() {
  20.     ctx.fillStyle = "white";
  21.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  22. }

  24. function drawSnake() {
  25.     snake.forEach(drawSnakePart);
  26. }

  28. function drawSnakePart(snakePart) {
  29.     ctx.fillStyle = 'lightgreen';
  30.     ctx.strokeStyle = 'darkgreen';
  31.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  32.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  33. }

  35. function drawFood() {
  36.     ctx.fillStyle = 'red';
  37.     ctx.fillRect(food.x, food.y, 10, 10);
  38. }

  40. function moveSnake() {
  41.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  43.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  44.         gameOver = true;
  45.         return;
  46.     }

  48.     snake.unshift(head);

  50.     if (head.x === food.x && head.y === food.y) {
  51.         score++;
  52.         food = randomFoodPosition();
  53.     } else {
  54.         snake.pop();
  55.     }
  56. }

  58. function collision(head) {
  59.     for (let i = 1; i < snake.length; i++) {
  60.         if (snake[i].x === head.x && snake[i].y === head.y) {
  61.             return true;
  62.         }
  63.     }
  64.     return false;
  65. }

  67. function main() {
  68.     if (gameOver) {
  69.         displayGameOver();
  70.         return;
  71.     }

  73.     setTimeout(function onTick() {
  74.         clearCanvas();
  75.         drawFood();
  76.         moveSnake();
  77.         drawSnake();
  78.         main();
  79.     }, 100);
  80. }

  82. function changeDirection(event) {
  83.     const LEFT_KEY = 37;
  84.     const RIGHT_KEY = 39;
  85.     const UP_KEY = 38;
  86.     const DOWN_KEY = 40;

  88.     const keyPressed = event.keyCode;
  89.     const goingUp = dy === -10;
  90.     const goingDown = dy === 10;
  91.     const goingRight = dx === 10;
  92.     const goingLeft = dx === -10;

  94.     if (keyPressed === LEFT_KEY && !goingRight) {
  95.         dx = -10;
  96.         dy = 0;
  97.     }

  99.     if (keyPressed === UP_KEY && !goingDown) {
  100.         dx = 0;
  101.         dy = -10;
  102.     }

  104.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  105.         dx = 10;
  106.         dy = 0;
  107.     }

  109.     if (keyPressed === DOWN_KEY && !goingUp) {
  110.         dx = 0;
  111.         dy = 10;
  112.     }
  113. }

  115. function displayGameOver() {
  116.     ctx.fillStyle = "black";
  117.     ctx.font = "30px Arial";
  118.     ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);
  119.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  120.     document.getElementById('startButton').style.display = 'block';
  121. }

  123. function startGame() {
  124.     snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  125.     score = 0;
  126.     dx = 10;
  127.     dy = 0;
  128.     gameOver = false;
  129.     food = randomFoodPosition();
  130.     document.getElementById('startButton').style.display = 'none';
  131.     main();
  132. }

  134. food = randomFoodPosition();
  135. main();
复制代码


这样，你的“开始游戏”按钮在鼠标悬停时会变成浅蓝色（`lightblue`或颜色代码 `#ADD8E6`）。如果需要进一步调整或有其他问题，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-7 19:15
你好，可以用函数来帮我实现蛇吃到食物之后出现音效吗？
作者: kaia    时间: 2024-8-7 19:15
张复礼 发表于 2024-08-07 19:15
你好，可以用函数来帮我实现蛇吃到食物之后出现音效吗 ...


好的，小朋友！我们可以用JavaScript在蛇吃到食物的时候播放音效。首先，你需要一段音效文件（比如一个 `.mp3` 或 `.wav` 文件），然后在合适的时机播放它。

假设你有一个叫做 `eat.mp3` 的音效文件，可以将其放置在与 `index.html` 和 `script.js` 同一个目录中。接下来，我们将使用一个函数来播放这个音效，并在蛇吃到食物的时候调用这个函数。

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

确保 `eat.mp3` 文件放置在项目目录中。

### 第二步：修改 JavaScript 代码

在你的 `script.js` 文件中，添加一个函数来播放音效，并在蛇吃到食物时调用这个函数。

#### 修改后的 `script.js` 文件：

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

  4. let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. // 创建音效对象
  12. const eatSound = new Audio('eat.mp3');

  14. document.addEventListener("keydown", changeDirection);

  16. function randomFoodPosition() {
  17.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  18.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  19.     return { x, y };
  20. }

  22. function clearCanvas() {
  23.     ctx.fillStyle = "white";
  24.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  25. }

  27. function drawSnake() {
  28.     snake.forEach(drawSnakePart);
  29. }

  31. function drawSnakePart(snakePart) {
  32.     ctx.fillStyle = 'lightgreen';
  33.     ctx.strokeStyle = 'darkgreen';
  34.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  35.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  36. }

  38. function drawFood() {
  39.     ctx.fillStyle = 'red';
  40.     ctx.fillRect(food.x, food.y, 10, 10);
  41. }

  43. function moveSnake() {
  44.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  46.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  47.         gameOver = true;
  48.         return;
  49.     }

  51.     snake.unshift(head);

  53.     if (head.x === food.x && head.y === food.y) {
  54.         score++;
  55.         food = randomFoodPosition();
  56.         playEatSound(); // 播放音效
  57.     } else {
  58.         snake.pop();
  59.     }
  60. }

  62. function collision(head) {
  63.     for (let i = 1; i < snake.length; i++) {
  64.         if (snake[i].x === head.x && snake[i].y === head.y) {
  65.             return true;
  66.         }
  67.     }
  68.     return false;
  69. }

  71. // 播放吃食物的音效
  72. function playEatSound() {
  73.     eatSound.play();
  74. }

  76. function main() {
  77.     if (gameOver) {
  78.         displayGameOver();
  79.         return;
  80.     }

  82.     setTimeout(function onTick() {
  83.         clearCanvas();
  84.         drawFood();
  85.         moveSnake();
  86.         drawSnake();
  87.         main();
  88.     }, 100);
  89. }

  91. function changeDirection(event) {
  92.     const LEFT_KEY = 37;
  93.     const RIGHT_KEY = 39;
  94.     const UP_KEY = 38;
  95.     const DOWN_KEY = 40;

  97.     const keyPressed = event.keyCode;
  98.     const goingUp = dy === -10;
  99.     const goingDown = dy === 10;
  100.     const goingRight = dx === 10;
  101.     const goingLeft = dx === -10;

  103.     if (keyPressed === LEFT_KEY && !goingRight) {
  104.         dx = -10;
  105.         dy = 0;
  106.     }

  108.     if (keyPressed === UP_KEY && !goingDown) {
  109.         dx = 0;
  110.         dy = -10;
  111.     }

  113.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  114.         dx = 10;
  115.         dy = 0;
  116.     }

  118.     if (keyPressed === DOWN_KEY && !goingUp) {
  119.         dx = 0;
  120.         dy = 10;
  121.     }
  122. }

  124. function displayGameOver() {
  125.     ctx.fillStyle = "black";
  126.     ctx.font = "30px Arial";
  127.     ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);
  128.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  129.     document.getElementById('startButton').style.display = 'block';
  130. }

  132. function startGame() {
  133.     snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  134.     score = 0;
  135.     dx = 10;
  136.     dy = 0;
  137.     gameOver = false;
  138.     food = randomFoodPosition();
  139.     document.getElementById('startButton').style.display = 'none';
  140.     main();
  141. }

  143. food = randomFoodPosition();
  144. main();
复制代码


这里是详细解释：

1. **音效对象创建**：
  
  1. const eatSound = new Audio('eat.mp3');
复制代码

   这行代码创建了一个新的音频对象，并载入 `eat.mp3` 文件。

2. **播放音效函数**：
  
  1. function playEatSound() {
  2.        eatSound.play();
  3.    }
复制代码

   这是一个简单的函数，用于播放音效。

3. **在蛇吃到食物时播放音效**：
  
  1. if (head.x === food.x && head.y === food.y) {
  2.        score++;
  3.        food = randomFoodPosition();
  4.        playEatSound(); // 播放音效
  5.    } else {
  6.        snake.pop();
  7.    }
复制代码

   在这段代码中，当蛇的头部位置与食物位置相同时，调用 `playEatSound()` 函数播放音效。

现在，当蛇吃到食物时，会播放 `eat.mp3` 音效。希望你喜欢这个新功能，如果还有任何问题或需要进一步的帮助，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-7 19:24
你好，可以用函数来帮我实现游戏过程中持续出现背景音乐吗？
作者: kaia    时间: 2024-8-7 19:25
张复礼 发表于 2024-08-07 19:24
你好，可以用函数来帮我实现游戏过程中持续出现背景音 ...


好的，小朋友！我们可以在游戏过程中添加背景音乐，让你的贪吃蛇游戏更有趣。我们将使用一个音频文件来作为背景音乐，并在游戏开始时播放它，游戏结束时暂停它。

假设你有一个叫做 `background.mp3` 的背景音乐文件，可以将其放置在与 `index.html` 和 `script.js` 同一个目录中。接下来，我们将使用一个函数来播放和控制这个背景音乐。

### 第一步：准备背景音乐文件

确保 `background.mp3` 文件放置在项目目录中。

### 第二步：修改 JavaScript 代码

在你的 `script.js` 文件中，添加一个函数来播放背景音乐，并在游戏开始和结束时进行相应的操作。

#### 修改后的 `script.js` 文件：

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

  4. let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. // 创建音效对象
  12. const eatSound = new Audio('eat.mp3');

  14. // 创建背景音乐对象
  15. const backgroundMusic = new Audio('background.mp3');
  16. backgroundMusic.loop = true; // 设置循环播放

  18. document.addEventListener("keydown", changeDirection);

  20. function randomFoodPosition() {
  21.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  22.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  23.     return { x, y };
  24. }

  26. function clearCanvas() {
  27.     ctx.fillStyle = "white";
  28.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  29. }

  31. function drawSnake() {
  32.     snake.forEach(drawSnakePart);
  33. }

  35. function drawSnakePart(snakePart) {
  36.     ctx.fillStyle = 'lightgreen';
  37.     ctx.strokeStyle = 'darkgreen';
  38.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  39.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  40. }

  42. function drawFood() {
  43.     ctx.fillStyle = 'red';
  44.     ctx.fillRect(food.x, food.y, 10, 10);
  45. }

  47. function moveSnake() {
  48.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  50.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  51.         gameOver = true;
  52.         return;
  53.     }

  55.     snake.unshift(head);

  57.     if (head.x === food.x && head.y === food.y) {
  58.         score++;
  59.         food = randomFoodPosition();
  60.         playEatSound(); // 播放音效
  61.     } else {
  62.         snake.pop();
  63.     }
  64. }

  66. function collision(head) {
  67.     for (let i = 1; i < snake.length; i++) {
  68.         if (snake[i].x === head.x && snake[i].y === head.y) {
  69.             return true;
  70.         }
  71.     }
  72.     return false;
  73. }

  75. // 播放吃食物的音效
  76. function playEatSound() {
  77.     eatSound.play();
  78. }

  80. // 播放背景音乐
  81. function playBackgroundMusic() {
  82.     backgroundMusic.play();
  83. }

  85. // 停止背景音乐
  86. function stopBackgroundMusic() {
  87.     backgroundMusic.pause();
  88.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  89. }

  91. function main() {
  92.     if (gameOver) {
  93.         displayGameOver();
  94.         return;
  95.     }

  97.     setTimeout(function onTick() {
  98.         clearCanvas();
  99.         drawFood();
  100.         moveSnake();
  101.         drawSnake();
  102.         main();
  103.     }, 100);
  104. }

  106. function changeDirection(event) {
  107.     const LEFT_KEY = 37;
  108.     const RIGHT_KEY = 39;
  109.     const UP_KEY = 38;
  110.     const DOWN_KEY = 40;

  112.     const keyPressed = event.keyCode;
  113.     const goingUp = dy === -10;
  114.     const goingDown = dy === 10;
  115.     const goingRight = dx === 10;
  116.     const goingLeft = dx === -10;

  118.     if (keyPressed === LEFT_KEY && !goingRight) {
  119.         dx = -10;
  120.         dy = 0;
  121.     }

  123.     if (keyPressed === UP_KEY && !goingDown) {
  124.         dx = 0;
  125.         dy = -10;
  126.     }

  128.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  129.         dx = 10;
  130.         dy = 0;
  131.     }

  133.     if (keyPressed === DOWN_KEY && !goingUp) {
  134.         dx = 0;
  135.         dy = 10;
  136.     }
  137. }

  139. function displayGameOver() {
  140.     ctx.fillStyle = "black";
  141.     ctx.font = "30px Arial";
  142.     ctx.fillText("游戏结束！", canvas.width / 2 - 75, canvas.height / 2 - 20);
  143.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  144.     document.getElementById('startButton').style.display = 'block';
  145.     stopBackgroundMusic(); // 停止背景音乐
  146. }

  148. function startGame() {
  149.     snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
  150.     score = 0;
  151.     dx = 10;
  152.     dy = 0;
  153.     gameOver = false;
  154.     food = randomFoodPosition();
  155.     document.getElementById('startButton').style.display = 'none';
  156.     playBackgroundMusic(); // 播放背景音乐
  157.     main();
  158. }

  160. food = randomFoodPosition();
  161. main();
复制代码


### 第三步：修改 HTML 代码

如果你还没有一个 "开始游戏" 按钮，请确保在 `index.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.             align-items: center;
  11.             justify-content: center;
  12.             height: 100vh;
  13.             background-color: #e0e0e0;
  14.             margin: 0;
  15.         }
  16.         h1 {
  17.             margin-bottom: 20px;
  18.         }
  19.         #gameContainer {
  20.             display: flex;
  21.             flex-direction: column;
  22.             align-items: center;
  23.         }
  24.         canvas {
  25.             border: 1px solid black;
  26.             background-color: #f5f5f5;
  27.         }
  28.         #startButton {
  29.             display: none; /* 默认隐藏 */
  30.             padding: 10px 20px;
  31.             font-size: 20px;
  32.             margin-top: 20px;
  33.             cursor: pointer;
  34.             background-color: #4CAF50; /* 绿色按钮 */
  35.             color: white;
  36.             border: none;
  37.             border-radius: 5px;
  38.         }
  39.         #startButton:hover {
  40.             background-color: #ADD8E6; /* 浅蓝色 */
  41.         }
  42.         #gameOverText {
  43.             font-size: 24px;
  44.             color: red;
  45.             text-align: center;
  46.             margin-top: 20px;
  47.             display: none; /* 默认隐藏 */
  48.         }
  49.         .hidden {
  50.             display: none;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.     <h1>贪吃蛇游戏</h1>
  56.     <div id="gameContainer">
  57.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  58.         <div id="gameOverText" class="hidden">
  59.             <p>很遗憾！游戏结束</p>
  60.             <p>得分: <span id="score">0</span></p>
  61.         </div>
  62.         <button id="startButton" onclick="startGame()">开始游戏</button>
  63.     </div>
  64.     <script src="script.js"></script>
  65. </body>
  66. </html>
复制代码


### 解释修改内容：

1. **创建背景音乐对象**：
  
  1. const backgroundMusic = new Audio('background.mp3');
  2.    backgroundMusic.loop = true; // 设置循环播放
复制代码

   这行代码创建了一个新的音频对象，并载入 `background.mp3` 文件，同时设置了循环播放。

2. **播放背景音乐函数**：
  
  1. function playBackgroundMusic() {
  2.        backgroundMusic.play();
  3.    }
复制代码


3. **停止背景音乐函数**：
  
  1. function stopBackgroundMusic() {
  2.        backgroundMusic.pause();
  3.        backgroundMusic.currentTime = 0; // 重置音乐到开头
  4.    }
复制代码


4. **在游戏开始时播放背景音乐**：
  
  1. function startGame() {
  2.        // ... 其他代码
  3.        playBackgroundMusic(); // 播放背景音乐
  4.        main();
  5.    }
复制代码


5. **在游戏结束时停止背景音乐**：
  
  1. function displayGameOver() {
  2.        // ... 其他代码
  3.        stopBackgroundMusic(); // 停止背景音乐
  4.    }
复制代码


通过这些修改，你的游戏在开始时会播放背景音乐，并在游戏结束时停止。如果有任何问题或需要进一步帮助，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-7 19:46
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 50, y: 50 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;

// 创建音效对象
const eatSound = new Audio('eat.mp3');

// 创建背景音乐对象
const backgroundMusic = new Audio('background.mp3');
backgroundMusic.loop = true; // 设置循环播放

document.addEventListener("keydown", changeDirection);

function randomFoodPosition() {
    const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
    const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
    return { x, y };
}

function clearCanvas() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = 'lightgreen';
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawFood() {
    ctx.fillStyle = 'lightpink';
    ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // 检测碰壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = randomFoodPosition();
        playEatSound(); // 播放音效
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
        }
    }
    return false;
}

// 播放吃食物的音效
function playEatSound() {
    eatSound.play();
}

// 播放背景音乐
function playBackgroundMusic() {
    backgroundMusic.play();
}

// 停止背景音乐
function stopBackgroundMusic() {
    backgroundMusic.pause();
    backgroundMusic.currentTime = 0; // 重置音乐到开头
}

function main() {
    if (gameOver) {
        displayGameOver();
        return;
    }

    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

// 显示游戏结束
function displayGameOver() {
    ctx.fillStyle = "pink";
    ctx.font = "30px Arial";
     // 绘制“游戏结束！”位于中心稍上方
    ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
    // 绘制得分位于中心稍下方
    ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
    document.getElementById("startButton").style.display = "block";
    stopBackgroundMusic(); // 停止背景音乐
}


function startGame() {
    snake = [{ x: 50, y: 50 }];
    score = 0;
    dx = 10;
    dy = 0;
    gameOver = false;
    food = randomFoodPosition();
    document.getElementById('startButton').style.display = 'none';
    playBackgroundMusic(); // 播放背景音乐
    main();
}

food = randomFoodPosition();
main();

以上是`script.js` 文件，请找一下无法播放背景音乐的原因是什么？
作者: kaia    时间: 2024-8-7 19:46
张复礼 发表于 2024-08-07 19:46
const canvas = document.getElementById('gameCanvas ...


好的，小朋友！我们来看看为什么背景音乐没有播放。

从代码上看，主要的部分都正确。不过有几个可能的原因会导致背景音乐无法播放：

1. **浏览器的自动播放策略**：有些浏览器默认禁止自动播放音频，除非用户与页面有过交互，比如点击按钮或按键。为了确保背景音乐能在游戏开始时播放，我们可以在用户点击“开始游戏”按钮时触发音乐播放。

2. **文件路径问题**：确保 `background.mp3` 文件确实在与 `index.html` 和 `script.js` 同一个目录中。

3. **音量问题**：确保背景音乐的音量设置为可听范围内。

我们将添加一些调试信息和确保在用户交互后播放背景音乐。

### 确保文件路径和音量

首先，确保你的 `background.mp3` 文件放在正确的位置，并且文件名没有错。同时，可以设置音量以检查是否是因为音量太低。

增加音量设置：
  1. const backgroundMusic = new Audio('background.mp3');
  2. backgroundMusic.loop = true; // 设置循环播放
  3. backgroundMusic.volume = 0.5; // 设置音量为50%
复制代码


### 修改 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.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <h1>贪吃蛇游戏</h1>
  11.     <div id="gameContainer">
  12.         <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.         <div id="gameOverText" class="hidden"></div>
  14.         <button id="startButton" onclick="startGame()">开始游戏</button>
  15.     </div>
  16.     <script src="script.js"></script>
  17. </body>
  18. </html>
复制代码


### 修改 `script.js` 文件

确保在 `startGame` 函数中播放背景音乐，并添加一些调试信息：
  1. const canvas = document.getElementById('gameCanvas');
  2. const ctx = canvas.getContext('2d');

  4. let snake = [{ x: 150, y: 150 }];
  5. let food = { x: 0, y: 0 };
  6. let dx = 10;
  7. let dy = 0;
  8. let score = 0;
  9. let gameOver = false;

  11. // 创建音效对象
  12. const eatSound = new Audio('eat.mp3');

  14. // 创建背景音乐对象
  15. const backgroundMusic = new Audio('background.mp3');
  16. backgroundMusic.loop = true; // 设置循环播放
  17. backgroundMusic.volume = 0.5; // 设置音量为50%

  19. document.addEventListener("keydown", changeDirection);

  21. function randomFoodPosition() {
  22.     const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
  23.     const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
  24.     return { x, y };
  25. }

  27. function clearCanvas() {
  28.     ctx.fillStyle = "white";
  29.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  30. }

  32. function drawSnake() {
  33.     snake.forEach(drawSnakePart);
  34. }

  36. function drawSnakePart(snakePart) {
  37.     ctx.fillStyle = 'lightgreen';
  38.     ctx.strokeStyle = 'darkgreen';
  39.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  40.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  41. }

  43. function drawFood() {
  44.     ctx.fillStyle = 'lightpink';
  45.     ctx.fillRect(food.x, food.y, 10, 10);
  46. }

  48. function moveSnake() {
  49.     const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  51.     // 检测碰壁
  52.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
  53.         gameOver = true;
  54.         return;
  55.     }

  57.     snake.unshift(head);

  59.     // 检查是否吃到食物
  60.     if (head.x === food.x && head.y === food.y) {
  61.         score++;
  62.         food = randomFoodPosition();
  63.         playEatSound(); // 播放音效
  64.     } else {
  65.         snake.pop();
  66.     }
  67. }

  69. function collision(head) {
  70.     for (let i = 1; i < snake.length; i++) {
  71.         if (snake[i].x === head.x && snake[i].y === head.y) {
  72.             return true;
  73.         }
  74.     }
  75.     return false;
  76. }

  78. // 播放吃食物的音效
  79. function playEatSound() {
  80.     eatSound.play();
  81. }

  83. // 播放背景音乐
  84. function playBackgroundMusic() {
  85.     console.log('播放背景音乐');
  86.     backgroundMusic.play();
  87. }

  89. // 停止背景音乐
  90. function stopBackgroundMusic() {
  91.     console.log('停止背景音乐');
  92.     backgroundMusic.pause();
  93.     backgroundMusic.currentTime = 0; // 重置音乐到开头
  94. }

  96. function main() {
  97.     if (gameOver) {
  98.         displayGameOver();
  99.         return;
  100.     }

  102.     setTimeout(function onTick() {
  103.         clearCanvas();
  104.         drawFood();
  105.         moveSnake();
  106.         drawSnake();
  107.         main();
  108.     }, 100);
  109. }

  111. function changeDirection(event) {
  112.     const LEFT_KEY = 37;
  113.     const RIGHT_KEY = 39;
  114.     const UP_KEY = 38;
  115.     const DOWN_KEY = 40;

  117.     const keyPressed = event.keyCode;
  118.     const goingUp = dy === -10;
  119.     const goingDown = dy === 10;
  120.     const goingRight = dx === 10;
  121.     const goingLeft = dx === -10;

  123.     if (keyPressed === LEFT_KEY && !goingRight) {
  124.         dx = -10;
  125.         dy = 0;
  126.     }

  128.     if (keyPressed === UP_KEY && !goingDown) {
  129.         dx = 0;
  130.         dy = -10;
  131.     }

  133.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  134.         dx = 10;
  135.         dy = 0;
  136.     }

  138.     if (keyPressed === DOWN_KEY && !goingUp) {
  139.         dx = 0;
  140.         dy = 10;
  141.     }
  142. }

  144. // 显示游戏结束
  145. function displayGameOver() {
  146.     ctx.fillStyle = "pink";
  147.     ctx.font = "30px Arial";
  148.     // 绘制“游戏结束！”位于中心稍上方
  149.     ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
  150.     // 绘制得分位于中心稍下方
  151.     ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
  152.     document.getElementById("startButton").style.display = "block";
  153.     stopBackgroundMusic(); // 停止背景音乐
  154. }

  156. function startGame() {
  157.     snake = [{ x: 150, y: 150 }];
  158.     score = 0;
  159.     dx = 10;
  160.     dy = 0;
  161.     gameOver = false;
  162.     food = randomFoodPosition();
  163.     document.getElementById('startButton').style.display = 'none';
  164.     playBackgroundMusic(); // 播放背景音乐
  165.     main();
  166. }

  168. food = randomFoodPosition();
  169. main();
复制代码


### 解释修改内容：
1. **音量设置**：确保背景音乐音量适中。
   
  1. backgroundMusic.volume = 0.5; // 设置音量为50%
复制代码


2. **调试信息**：在 `playBackgroundMusic()` 和 `stopBackgroundMusic()` 函数中添加日志信息，以确认函数是否被调用。
   
  1. function playBackgroundMusic() {
  2.         console.log('播放背景音乐');
  3.         backgroundMusic.play();
  4.     }

  6.     function stopBackgroundMusic() {
  7.         console.log('停止背景音乐');
  8.         backgroundMusic.pause();
  9.         backgroundMusic.currentTime = 0; // 重置音乐到开头
  10.     }
复制代码


3. **确保触发播放**：在用户点击开始游戏按钮时播放背景音乐。

这样，你应该能够在游戏开始时听到背景音乐并在游戏结束时停止播放。如果你仍然遇到问题，请通过开发者工具查看控制台中的日志信息来进行进一步调试。如果需要更多帮助，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-7 19:53
你好，请帮我生成一个火柴人左右躲避障碍物的网页游戏。
作者: kaia    时间: 2024-8-7 19:54
张复礼 发表于 2024-08-07 19:53
你好，请帮我生成一个火柴人左右躲避障碍物的网页游戏 ...


好的，小朋友！我们可以做一个简单的火柴人左右躲避障碍物的网页游戏。这个小游戏将使用HTML、CSS和JavaScript来实现。下面是一个基础的版本，你可以根据需要进一步扩展和美化。

### 第一步：创建 HTML 文件

首先，创建一个HTML文件，命名为 `index.html`，内容如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>火柴人躲避障碍物</title>
  6.     <link rel="stylesheet" type="text/css" href="style.css">
  7. </head>
  8. <body>
  9.     <h1>火柴人躲避障碍物</h1>
  10.     <div id="gameContainer">
  11.         <canvas id="gameCanvas" width="400" height="600"></canvas>
  12.         <div id="gameOverText" class="hidden">游戏结束！</div>
  13.         <button id="restartButton" class="hidden" onclick="startGame()">重新开始</button>
  14.     </div>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


### 第二步：创建 CSS 文件

接下来，创建一个CSS文件，命名为 `style.css`，内容如下：

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4.     align-items: center;
  5.     justify-content: center;
  6.     height: 100vh;
  7.     margin: 0;
  8.     background-color: #f5f5f5;
  9. }

  11. h1 {
  12.     margin-bottom: 20px;
  13. }

  15. #gameContainer {
  16.     display: flex;
  17.     flex-direction: column;
  18.     align-items: center;
  19.     justify-content: center;
  20. }

  22. #gameCanvas {
  23.     border: 2px solid black;
  24.     background-color: white;
  25. }

  27. .hidden {
  28.     display: none;
  29. }

  31. #gameOverText {
  32.     font-size: 24px;
  33.     color: red;
  34.     margin-top: 20px;
  35. }

  37. #restartButton {
  38.     padding: 10px 20px;
  39.     font-size: 16px;
  40.     margin-top: 10px;
  41.     cursor: pointer;
  42.     background-color: #4CAF50;
  43.     color: white;
  44.     border: none;
  45.     border-radius: 5px;
  46. }

  48. #restartButton:hover {
  49.     background-color: #45a049;
  50. }
复制代码


### 第三步：创建 JavaScript 文件

最后，创建一个JavaScript文件，命名为 `script.js`，内容如下：

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

  4. let player = { x: canvas.width / 2 - 15, y: canvas.height - 60, width: 30, height: 30, dx: 5 };
  5. let obstacles = [];
  6. let gameInterval;
  7. let gameOver = false;

  9. document.addEventListener('keydown', movePlayer);

  11. function startGame() {
  12.     player.x = canvas.width / 2 - 15;
  13.     obstacles = [];
  14.     gameOver = false;
  15.     document.getElementById('gameOverText').classList.add('hidden');
  16.     document.getElementById('restartButton').classList.add('hidden');
  17.     gameInterval = setInterval(updateGame, 20);
  18. }

  20. function updateGame() {
  21.     clearCanvas();
  22.     drawPlayer();
  23.     updateObstacles();
  24.     checkCollision();
  25. }

  27. function clearCanvas() {
  28.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  29. }

  31. function drawPlayer() {
  32.     ctx.fillStyle = 'black';
  33.     ctx.fillRect(player.x, player.y, player.width, player.height);
  34. }

  36. function movePlayer(event) {
  37.     if (event.key === 'ArrowLeft' && player.x > 0) {
  38.         player.x -= player.dx;
  39.     }
  40.     if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) {
  41.         player.x += player.dx;
  42.     }
  43. }

  45. function updateObstacles() {
  46.     if (Math.random() < 0.02) {
  47.         let obstacleX = Math.random() * (canvas.width - 30);
  48.         obstacles.push({ x: obstacleX, y: 0, width: 30, height: 30, dy: 2 });
  49.     }

  51.     ctx.fillStyle = 'red';
  52.     for (let i = 0; i < obstacles.length; i++) {
  53.         let obs = obstacles[i];
  54.         obs.y += obs.dy;
  55.         ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

  57.         if (obs.y > canvas.height) {
  58.             obstacles.splice(i, 1);
  59.             i--;
  60.         }
  61.     }
  62. }

  64. function checkCollision() {
  65.     for (let i = 0; i < obstacles.length; i++) {
  66.         let obs = obstacles[i];
  67.         if (
  68.             player.x < obs.x + obs.width &&
  69.             player.x + player.width > obs.x &&
  70.             player.y < obs.y + obs.height &&
  71.             player.y + player.height > obs.y
  72.         ) {
  73.             endGame();
  74.         }
  75.     }
  76. }

  78. function endGame() {
  79.     clearInterval(gameInterval);
  80.     gameOver = true;
  81.     document.getElementById('gameOverText').classList.remove('hidden');
  82.     document.getElementById('restartButton').classList.remove('hidden');
  83. }

  85. // 启动游戏
  86. startGame();
复制代码


### 代码解释

1. **HTML**：
    - 包含一个画布 (`<canvas>`) 用于绘制游戏，和一个按钮用于重新开始游戏。
   
2. **CSS**：
    - 设置了页面布局、样式以及按钮的外观。

3. **JavaScript**：
    - 初始化玩家（火柴人）和障碍物的位置及属性。
    - `movePlayer` 函数负责移动玩家。
    - `updateGame` 函数是主要的游戏循环，负责更新游戏状态。
    - `checkCollision` 函数检查玩家是否碰到了障碍物。
    - `endGame` 函数在检测到碰撞时停止游戏并显示“游戏结束”信息。

将上述三个文件保存好，然后在浏览器中打开 `index.html` 文件即可看到和玩这个火柴人躲避障碍物的小游戏。如果你有任何问题或需要进一步的帮助，请随时告诉我哦！
作者: 张复礼    时间: 2024-8-7 19:58
请完善躲避游戏：长按左键或右键可以持续向左或向右移动。
作者: 张复礼    时间: 2024-8-7 20:06
请修改代码，实现长按左键（或右键）可以持续使游戏对象左移（或右移）
作者: 张复礼    时间: 2024-8-12 14:07
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let snake = [{ x: 50, y: 50 }];
let food = { x: 0, y: 0 };
let dx = 10;
let dy = 0;
let score = 0;
let gameOver = false;

// 创建音效对象
const eatSound = new Audio('eat.mp3');

// 创建背景音乐对象
const backgroundMusic = new Audio('background.mp3');
backgroundMusic.loop = true; // 设置循环播放

document.addEventListener("keydown", changeDirection);

function randomFoodPosition() {
    const x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
    const y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
    return { x, y };
}

function clearCanvas() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawSnake() {
    snake.forEach(drawSnakePart);
}

function drawSnakePart(snakePart) {
    ctx.fillStyle = 'lightgreen';
    ctx.strokeStyle = 'darkgreen';
    ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
    ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

function drawFood() {
    ctx.fillStyle = 'lightpink';
    ctx.fillRect(food.x, food.y, 10, 10);
}

function moveSnake() {
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // 检测碰壁
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || collision(head)) {
        gameOver = true;
        return;
    }

    snake.unshift(head);

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = randomFoodPosition();
        playEatSound(); // 播放音效
    } else {
        snake.pop();
    }
}

function collision(head) {
    for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
        }
    }
    return false;
}

// 播放吃食物的音效
function playEatSound() {
    eatSound.play();
}

// 播放背景音乐
function playBackgroundMusic() {
    backgroundMusic.play();
}

// 停止背景音乐
function stopBackgroundMusic() {
    backgroundMusic.pause();
    backgroundMusic.currentTime = 0; // 重置音乐到开头
}

function main() {
    if (gameOver) {
        displayGameOver();
        return;
    }

    setTimeout(function onTick() {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
    }, 100);
}

function changeDirection(event) {
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const UP_KEY = 38;
    const DOWN_KEY = 40;

    const keyPressed = event.keyCode;
    const goingUp = dy === -10;
    const goingDown = dy === 10;
    const goingRight = dx === 10;
    const goingLeft = dx === -10;

    if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
    }

    if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
    }

    if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
    }

    if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
    }
}

// 显示游戏结束
function displayGameOver() {
    ctx.fillStyle = "pink";
    ctx.font = "30px Arial";
     // 绘制“游戏结束！”位于中心稍上方
    ctx.fillText("很遗憾，游戏结束！", canvas.width / 2 - 115, canvas.height / 2 - 20);
    // 绘制得分位于中心稍下方
    ctx.fillText("得分: " + score, canvas.width / 2 - 50, canvas.height / 2 + 20);
    document.getElementById("startButton").style.display = "block";
    stopBackgroundMusic(); // 停止背景音乐
}


function startGame() {
    snake = [{ x: 50, y: 50 }];
    score = 0;
    dx = 10;
    dy = 0;
    gameOver = false;
    food = randomFoodPosition();
    document.getElementById('startButton').style.display = 'none';
    playBackgroundMusic(); // 播放背景音乐
    main();
}

food = randomFoodPosition();
main();
你好，请修改我的贪吃蛇游戏代码，使游戏的右边出现“游戏规则”悬停按钮，鼠标移到按钮上出现游戏规则。



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2