设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 贪吃蛇
123下一页
返回列表 发新帖
楼主: 张复礼
打印 上一主题 下一主题

贪吃蛇

[复制链接]
张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
11#
 楼主| 发表于 2024-8-6 14:54:02 | 只看该作者
如何修改这句代码，让“开始游戏”按钮出现在界面的中间。<button id="startButton" onclick="startGame()">开始游戏</button>
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
12#
发表于 2024-8-6 14:54:28 | 只看该作者
张复礼 发表于 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**：
    - 确保游戏结束时，更新和显示游戏结束信息以及按钮。
    - 确保重新开始游戏时，隐藏游戏结束信息和按钮。

这样，“开始游戏”按钮将会出现在界面的中间，并在游戏结束后显示，期待你满意这个版本的改动！如果还有任何问题，请随时告知哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
13#
 楼主| 发表于 2024-8-6 14:59:40 | 只看该作者
修改这句代码 ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
让“游戏结束！和”得分“分成两行显示。
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
14#
发表于 2024-8-6 15:00:32 | 只看该作者
张复礼 发表于 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的中央（水平居中）并分成两行显示。

这种方式能让“游戏结束！”和“得分”分成两行显示，并且让“开始游戏”按钮显示在界面的中间。如果还有其他问题或需求，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
15#
 楼主| 发表于 2024-8-6 15:02:07 | 只看该作者
在js文件中修改这句代码 ctx.fillText("游戏结束！得分: " + score, canvas.width / 4, canvas.height / 2);
让“游戏结束！和”得分“分成两行显示。
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
16#
发表于 2024-8-6 15:02:38 | 只看该作者
张复礼 发表于 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);`**：这行代码绘制得分文本，位于画布的水平中央位置，稍微向下调整，使其在画布中央偏下的位置。

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

希望这些修改能满足你的需求！如果你有其他问题或需要进一步的帮助，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
17#
 楼主| 发表于 2024-8-6 15:08:06 | 只看该作者
把background-color: #45a049;改成浅蓝色
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
18#
发表于 2024-8-6 15:08:38 | 只看该作者
张复礼 发表于 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`）。如果需要进一步调整或有其他问题，请随时告诉我哦！
回复 支持 反对

使用道具 举报

张复礼

3

主题

41

帖子

137

积分

注册会员

Rank: 2

积分
137
19#
 楼主| 发表于 2024-8-7 19:15:14 | 只看该作者
你好，可以用函数来帮我实现蛇吃到食物之后出现音效吗？
回复 支持 反对

使用道具 举报

kaia

0

主题

1147

帖子

1718

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1718
20#
发表于 2024-8-7 19:15:39 | 只看该作者
张复礼 发表于 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` 音效。希望你喜欢这个新功能，如果还有任何问题或需要进一步的帮助，请随时告诉我哦！
回复 支持 反对

使用道具 举报

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

本版积分规则

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