设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › 林奕锦1
12345下一页
返回列表 发新帖
查看: 10059|回复: 47
打印 上一主题 下一主题

林奕锦1

[复制链接]
林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
跳转到指定楼层
楼主
发表于 2024-7-17 09:53:59 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
请帮我设计一个网页贪吃蛇游戏，加上注释
回复

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
48#
 楼主| 发表于 2024-7-23 16:31:41 | 只看该作者
我想在开始按钮被点击以后，重复播放tan音频，该怎么做？
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
47#
 楼主| 发表于 2024-7-23 16:25:40 | 只看该作者
我想在游戏结束的时候播放音频，名称：gua，该如何修改？
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
46#
发表于 2024-7-23 16:16:03 | 只看该作者
林奕锦 发表于 2024-07-23 16:14
我想在蛇吃东西的时候发出声音，请问该如何修改代码？ ...


要在蛇吃到食物时发出声音，你可以使用HTML5音频API。在这里简单介绍一下流程：

1. 准备一个音频文件，比如`eat.mp3`，并将其放在你项目的目录中。
2. 用JavaScript在适当的时候播放这个音频文件。

以下是更新后的代码，可以帮助你添加这个功能：

### 1. HTML 部分
我们需要在HTML文件中添加对音频文件的引用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <h1>贪吃蛇游戏</h1>
  11.     <button id="startButton">开始游戏</button>
  12.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.     <p id="score">分数: 0</p>
  14.    
  15.     <!-- 引入音频文件 -->
  16.     <audio id="eatSound" src="eat.mp3"></audio>

  18.     <!-- 引入游戏逻辑的脚本 -->
  19.     <script src="snake_game.js"></script>
  20. </body>
  21. </html>
复制代码


### 2. JavaScript 部分
在蛇吃到食物时播放音频。

  1. // 获取画布并设置上下文
  2. const canvas = document.getElementById('gameCanvas');
  3. const ctx = canvas.getContext('2d');

  5. // 获取音频元素
  6. const eatSound = document.getElementById('eatSound');

  8. // 定义蛇的初始状态
  9. let snake = [
  10.     {x: 150, y: 150},
  11.     {x: 140, y: 150},
  12.     {x: 130, y: 150},
  13.     {x: 120, y: 150},
  14.     {x: 110, y: 150}
  15. ];

  17. // 初始化食物位置
  18. let foodX;
  19. let foodY;

  21. // 初始速度 - 蛇向右移动
  22. let dx = 10;
  23. let dy = 0;

  25. // 游戏运行标志
  26. let isGameRunning = true;

  28. // 创建游戏循环
  29. function main() {
  30.     if (isGameRunning) {
  31.         setTimeout(function onTick() {
  32.             clearCanvas();
  33.             moveSnake();
  34.             drawSnake();
  35.             drawFood();
  36.             checkGameOver();
  37.             main();
  38.         }, 100);
  39.     } else {
  40.         alert("游戏结束！");
  41.     }
  42. }

  44. // 清除画布
  45. function clearCanvas() {
  46.     ctx.fillStyle = "black";
  47.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  48. }

  50. // 绘制蛇
  51. function drawSnake() {
  52.     snake.forEach(snakePart => {
  53.         ctx.fillStyle = 'lightgreen';
  54.         ctx.strokestyle = 'darkgreen';
  55.         ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  56.         ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  57.     });
  58. }

  60. // 移动蛇
  61. function moveSnake() {
  62.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  63.     snake.unshift(head);

  65.     // 检查蛇是否吃到食物
  66.     if (snake[0].x === foodX && snake[0].y === foodY) {
  67.         eatSound.play(); // 播放吃东西的声音
  68.         createFood();
  69.     } else {
  70.         snake.pop();
  71.     }
  72. }

  74. // 随机生成食物位置
  75. function createFood() {
  76.     foodX = Math.floor((Math.random() * canvas.width) / 10) * 10;
  77.     foodY = Math.floor((Math.random() * canvas.height) / 10) * 10;

  79.     // 确保食物不会生成在蛇身体上
  80.     snake.forEach(snakePart => {
  81.         if (snakePart.x === foodX && snakePart.y === foodY) {
  82.             createFood();
  83.         }
  84.     });
  85. }

  87. // 绘制食物
  88. function drawFood() {
  89.     ctx.fillStyle = 'red';
  90.     ctx.strokestyle = 'darkred';
  91.     ctx.fillRect(foodX, foodY, 10, 10);
  92.     ctx.strokeRect(foodX, foodY, 10, 10);
  93. }

  95. // 检查游戏是否结束
  96. function checkGameOver() {
  97.     for (let i = 4; i < snake.length; i++) {
  98.         if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
  99.             isGameRunning = false;
  100.         }
  101.     }

  103.     const hitLeftWall = snake[0].x < 0;
  104.     const hitRightWall = snake[0].x >= canvas.width;
  105.     const hitTopWall = snake[0].y < 0;
  106.     const hitBottomWall = snake[0].y >= canvas.height;

  108.     if (hitLeftWall || hitRightWall || hitTopWall || hitBottomWall) {
  109.         isGameRunning = false;
  110.     }
  111. }

  113. // 更改方向
  114. document.addEventListener("keydown", changeDirection);

  116. function changeDirection(event) {
  117.     const LEFT_KEY = 37;
  118.     const RIGHT_KEY = 39;
  119.     const UP_KEY = 38;
  120.     const DOWN_KEY = 40;

  122.     const keyPressed = event.keyCode;
  123.     const goingUp = dy === -10;
  124.     const goingDown = dy === 10;
  125.     const goingRight = dx === 10;
  126.     const goingLeft = dx === -10;

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

  133.     if (keyPressed === UP_KEY && !goingDown) {
  134.         dx = 0;
  135.         dy = -10;
  136.     }

  138.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  139.         dx = 10;
  140.         dy = 0;
  141.     }

  143.     if (keyPressed === DOWN_KEY && !goingUp) {
  144.         dx = 0;
  145.         dy = 10;
  146.     }
  147. }

  149. // 开始游戏
  150. createFood();
  151. main();
复制代码


### 解释
1. **HTML**：
    - 添加了 `<audio>` 标签，用于引用`eat.mp3`音频文件。
  
2. **JavaScript**：
    - 获取音频元素：`const eatSound = document.getElementById('eatSound');`
    - 每当蛇吃到食物时调用 `eatSound.play();` 播放音频。

通过这些修改，当蛇吃到食物时，网页会发出声音。记得确保你的浏览器允许自动播放音频，有些浏览器可能会默认禁用此功能。
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
45#
 楼主| 发表于 2024-7-23 16:14:45 | 只看该作者
kaia 发表于 2024-7-21 09:52
可以的！你只需要在CSS文件中修改`canvas`元素的背景颜色即可。我们将背景颜色改为浅蓝色（例如#ADD8E6） ...

我想在蛇吃东西的时候发出声音，请问该如何修改代码？
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
44#
 楼主| 发表于 2024-7-23 16:12:16 | 只看该作者
我想在蛇吃东西的时候发出声音，音频名称：eat，请问该如何修改代码？
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
43#
 楼主| 发表于 2024-7-23 15:51:52 | 只看该作者
kaia 发表于 2024-7-23 15:46
好的！我会将你的网页文本改为英文。

### 1. HTML 部分

为什么代码被修改了？还没点击按钮游戏就直接开始了
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
42#
发表于 2024-7-23 15:46:21 | 只看该作者
林奕锦 发表于 2024-07-23 15:45
请将网页文本改为英文


好的！我会将你的网页文本改为英文。

### 1. 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>Snake Game</title>
  7.     <link rel="stylesheet" href="styles.css">
  8. </head>
  9. <body>
  10.     <h1>Snake Game</h1>
  11.     <button id="startButton">Start Game</button>
  12.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  13.     <div id="score">Score: 0</div>
  14.     <script src="snake_game.js"></script>
  15. </body>
  16. </html>
复制代码


### 2. JavaScript 部分
我们不需要对逻辑部分做大改动，只需要确保提示信息是英文的。例如，游戏结束时的提示：

  1. // 获取画布并设置上下文
  2. const canvas = document.getElementById('gameCanvas');
  3. const ctx = canvas.getContext('2d');

  5. // 定义蛇的初始状态
  6. let snake = [
  7.     {x: 150, y: 150},
  8.     {x: 140, y: 150},
  9.     {x: 130, y: 150},
  10.     {x: 120, y: 150},
  11.     {x: 110, y: 150}
  12. ];

  14. // 初始化食物位置
  15. let foodX;
  16. let foodY;

  18. // 初始速度 - 蛇向右移动
  19. let dx = 10;
  20. let dy = 0;

  22. // 游戏运行标志
  23. let isGameRunning = true;

  25. // 创建游戏循环
  26. function main() {
  27.     if (isGameRunning) {
  28.         setTimeout(function onTick() {
  29.             clearCanvas();
  30.             moveSnake();
  31.             drawSnake();
  32.             drawFood();
  33.             checkGameOver();
  34.             main();
  35.         }, 100);
  36.     } else {
  37.         alert("Game Over!");
  38.     }
  39. }

  41. // 清除画布
  42. function clearCanvas() {
  43.     ctx.fillStyle = "black";
  44.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  45. }

  47. // 绘制蛇
  48. function drawSnake() {
  49.     snake.forEach(snakePart => {
  50.         ctx.fillStyle = 'lightgreen';
  51.         ctx.strokestyle = 'darkgreen';
  52.         ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  53.         ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  54.     });
  55. }

  57. // 移动蛇
  58. function moveSnake() {
  59.     const head = {x: snake[0].x + dx, y: snake[0].y + dy};
  60.     snake.unshift(head);

  62.     // 检查蛇是否吃到食物
  63.     if (snake[0].x === foodX && snake[0].y === foodY) {
  64.         createFood();
  65.     } else {
  66.         snake.pop();
  67.     }
  68. }

  70. // 随机生成食物位置
  71. function createFood() {
  72.     foodX = Math.floor((Math.random() * canvas.width) / 10) * 10;
  73.     foodY = Math.floor((Math.random() * canvas.height) / 10) * 10;

  75.     // 确保食物不会生成在蛇身体上
  76.     snake.forEach(snakePart => {
  77.         if (snakePart.x === foodX && snakePart.y === foodY) {
  78.             createFood();
  79.         }
  80.     });
  81. }

  83. // 绘制食物
  84. function drawFood() {
  85.     ctx.fillStyle = 'red';
  86.     ctx.strokestyle = 'darkred';
  87.     ctx.fillRect(foodX, foodY, 10, 10);
  88.     ctx.strokeRect(foodX, foodY, 10, 10);
  89. }

  91. // 检查游戏是否结束
  92. function checkGameOver() {
  93.     for (let i = 4; i < snake.length; i++) {
  94.         if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
  95.             isGameRunning = false;
  96.         }
  97.     }

  99.     const hitLeftWall = snake[0].x < 0;
  100.     const hitRightWall = snake[0].x >= canvas.width;
  101.     const hitTopWall = snake[0].y < 0;
  102.     const hitBottomWall = snake[0].y >= canvas.height;

  104.     if (hitLeftWall || hitRightWall || hitTopWall || hitBottomWall) {
  105.         isGameRunning = false;
  106.     }
  107. }

  109. // 更改方向
  110. document.addEventListener("keydown", changeDirection);

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

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

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

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

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

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

  145. // 开始游戏
  146. createFood();
  147. main();
复制代码


### 3. CSS 部分
我们之前已经修改了背景颜色，这里再重复一下，以确保你有完整的代码：

  1. /* 设置画布和页面样式 */
  2. canvas {
  3.     background-color: #ADD8E6; /* 浅蓝色背景 */
  4.     display: block;           /* 将画布显示为块状元素 */
  5.     margin: 0 auto;           /* 居中对齐 */
  6. }

  8. /* 添加基本页面样式 */
  9. body {
  10.     display: flex;
  11.     flex-direction: column;
  12.     align-items: center;
  13.     justify-content: center;
  14.     height: 100vh;
  15.     margin: 0;
  16. }

  18. h1 {
  19.     color: #333;
  20. }

  22. #startButton {
  23.     padding: 10px 20px;
  24.     font-size: 16px;
  25.     margin-bottom: 20px;
  26.     background-color: #0000FF; /* 蓝色背景 */
  27.     color: white;              /* 白色文字 */
  28.     border: none;              /* 无边框 */
  29.     border-radius: 5px;        /* 圆角边框 */
  30.     cursor: pointer;           /* 鼠标悬停变成指针 */
  31. }

  33. #startButton:hover {
  34.     background-color: #0000cc; /* 鼠标悬停时颜色变深 */
  35. }

  37. #score {
  38.     margin-top: 20px;
  39.     font-size: 20px;
  40.     color: #333;
  41. }
复制代码


以上就是将生成的网页文本都改为英文后的代码。如果你还有其他的问题或者需要进一步的帮助，请告诉我！
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
41#
 楼主| 发表于 2024-7-23 15:45:34 | 只看该作者
kaia 发表于 2024-7-21 09:52
可以的！你只需要在CSS文件中修改`canvas`元素的背景颜色即可。我们将背景颜色改为浅蓝色（例如#ADD8E6） ...

请将网页文本改为英文
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
40#
 楼主| 发表于 2024-7-21 10:41:57 | 只看该作者
请将网页改为英文，谢谢
回复 支持 反对

使用道具 举报

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

本版积分规则

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