设为首页收藏本站

科学教育

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

林奕锦1

[复制链接]
林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

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

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2024-7-17 09:54:27 | 只看该作者
当然可以！贪吃蛇游戏是一个很有趣的项目。我们可以使用HTML、CSS和JavaScript来实现这个游戏。我会加上详细的注释，便于你理解每一部分的功能。

### 1. HTML 部分
首先，我们需要一个简单的HTML页面来容纳游戏画面及相关资源。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <style>
  7.         /* 设置画布和页面的样式 */
  8.         canvas {
  9.             background-color: #000;
  10.             display: block;
  11.             margin: 0 auto;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 游戏画布 -->
  17.     <canvas id="gameCanvas" width="400" height="400"></canvas>

  19.     <!-- 引入 JavaScript 文件 -->
  20.     <script src="snake_game.js"></script>
  21. </body>
  22. </html>
复制代码


### 2. JavaScript 部分
接下来是主要的游戏逻辑代码。我们将把它放在一个名为`snake_game.js`的文件中。

  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("游戏结束！");
  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[i].x === snake[0].x && snake[i].y === snake[0].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. 解释每个部分
1. **HTML部分**：
   - `<canvas>`标签用于绘制游戏画面。
   - `<script>`标签引入JavaScript文件，控制游戏逻辑。

2. **JavaScript部分**：
   - 用于初始化游戏画布、定义蛇的初始位置及移动方向。
   - `main`函数是游戏循环，每隔100毫秒更新一次游戏状态。
   - `clearCanvas`函数清除画布，以便重新绘制。
   - `drawSnake`和`drawFood`分别用于绘制蛇和食物。
   - `moveSnake`控制蛇的移动，并检测是否吃到食物。
   - `createFood`用于生成随机的食物位置。
   - `checkGameOver`检测游戏是否结束。
   - `changeDirection`处理键盘事件来改变蛇的移动方向。

希望这些解释能帮你更好地理解贪吃蛇游戏的实现！如果你还有其他问题或需要进一步的帮助，请告诉我。
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
板凳
 楼主| 发表于 2024-7-17 09:58:42 | 只看该作者
请用上css文件
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2024-7-17 09:59:06 | 只看该作者
林奕锦 发表于 2024-07-17 09:58
请用上css文件


好的！我们可以把CSS样式单独放到一个文件中，以便更好地管理和维护。我们将分为三个部分：HTML、CSS和JavaScript。

### 1. 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" href="styles.css"> <!-- 引入外部CSS文件 -->
  7. </head>
  8. <body>
  9.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  10.     <script src="snake_game.js"></script> <!-- 引入外部JavaScript文件 -->
  11. </body>
  12. </html>
复制代码


### 2. CSS 部分
接下来创建一个CSS文件，命名为`styles.css`。
  1. /* 设置画布和页面的样式 */
  2. canvas {
  3.     background-color: #000; /* 黑色背景 */
  4.     display: block; /* 画布作为块级元素 */
  5.     margin: 0 auto; /* 居中对齐 */
  6. }

  8. /* 添加一些基本的页面样式 */
  9. body {
  10.     display: flex;
  11.     justify-content: center;
  12.     align-items: center;
  13.     height: 100vh;
  14.     margin: 0;
  15. }
复制代码


### 3. JavaScript 部分
最后创建一个JavaScript文件，命名为`snake_game.js`。
  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("游戏结束！");
  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.     const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  64.     if (didEatFood) {
  65.         createFood();
  66.     } else {
  67.         snake.pop();
  68.     }
  69. }

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

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

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

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

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

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

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

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

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

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

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

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

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

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


### 总结
你现在有三个文件：
- `index.html`：包含网页的结构和引入其他资源。
- `styles.css`：包含网页的样式配置，例如画布的颜色和定位。
- `snake_game.js`：包含贪吃蛇游戏的所有逻辑，用于绘制蛇、处理食物生成、检测游戏结束等。

将这三个文件放在同一文件夹中，然后在浏览器中打开`index.html`就可以玩贪吃蛇游戏了。如果遇到问题或有其他需求，欢迎继续提问！
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
5#
 楼主| 发表于 2024-7-17 10:03:27 | 只看该作者
请帮我加上开始按钮和结束得分提示
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
6#
发表于 2024-7-17 10:04:28 | 只看该作者
林奕锦 发表于 2024-07-17 10:03
请帮我加上开始按钮和结束得分提示


好的！我们可以在网页上添加一个“开始游戏”按钮，并在游戏结束时显示得分提示。下面是如何修改HTML、CSS和JavaScript来实现这些功能。

### 1. 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.     <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.     <div id="score">得分: 0</div>

  15.     <script src="snake_game.js"></script>
  16. </body>
  17. </html>
复制代码


### 2. CSS 部分
更新`styles.css`文件，添加按钮和得分的样式。
  1. /* 设置画布和页面的样式 */
  2. canvas {
  3.     background-color: #000; /* 黑色背景 */
  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. }

  28. #score {
  29.     margin-top: 20px;
  30.     font-size: 20px;
  31.     color: #333;
  32. }
复制代码


### 3. JavaScript 部分
最后，更新`snake_game.js`文件，以包含初始化、得分计算和显示的逻辑。
  1. // 获取画布并设置上下文
  2. const canvas = document.getElementById('gameCanvas');
  3. const ctx = canvas.getContext('2d');
  4. const startButton = document.getElementById('startButton');
  5. const scoreDisplay = document.getElementById('score');

  7. // 定义蛇的初始状态
  8. let snake = [];
  9. let foodX;
  10. let foodY;
  11. let dx = 10;
  12. let dy = 0;
  13. let score = 0;
  14. let isGameRunning = false;

  16. // 创建游戏循环
  17. function main() {
  18.     if (isGameRunning) {
  19.         setTimeout(function onTick() {
  20.             clearCanvas();
  21.             moveSnake();
  22.             drawSnake();
  23.             drawFood();
  24.             checkGameOver();
  25.             main();
  26.         }, 100);
  27.     } else {
  28.         alert(`游戏结束！得分: ${score}`);
  29.     }
  30. }

  32. // 初始化游戏
  33. function startGame() {
  34.     snake = [{ x: 150, y: 150 }];
  35.     dx = 10;
  36.     dy = 0;
  37.     score = 0;
  38.     isGameRunning = true;
  39.     createFood();
  40.     scoreDisplay.innerText = `得分: ${score}`;
  41.     main();
  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);
  64.     const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  65.     if (didEatFood) {
  66.         score += 10;
  67.         scoreDisplay.innerText = `得分: ${score}`;
  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[i].x === snake[0].x && snake[i].y === snake[0].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. startButton.addEventListener("click", startGame);
复制代码


### 总结
现在，你有更新后的三个文件：
1. `index.html`：包含网页结构和添加了“开始游戏”按钮及得分显示。
2. `styles.css`：包含网页的样式配置，包括按钮和得分显示的样式。
3. `snake_game.js`：添加了初始化、得分计算和显示的逻辑，点击“开始游戏”按钮即可开始游戏。

将这三个文件放在同一文件夹中，然后在浏览器中打开`index.html`就可以玩贪吃蛇游戏了。如果遇到问题或有其他需求，欢迎继续提问！
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
7#
 楼主| 发表于 2024-7-17 10:09:15 | 只看该作者
为什么我的网页的所有中文都无法显示？
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
8#
发表于 2024-7-17 10:10:33 | 只看该作者
林奕锦 发表于 2024-07-17 10:09
为什么我的网页的所有中文都无法显示？ ...


如果你的网页中的所有中文都无法显示，这通常是因为编码问题引起的。为了确保网页中的中文能够正确显示，我们需要将HTML文件的编码设置为UTF-8。

### 确保HTML文件使用UTF-8编码

在HTML文档的`<head>`部分中添加以下meta标签，以确保使用UTF-8编码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="styles.css">
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <button id="startButton">开始游戏</button>
  11.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.     <div id="score">得分: 0</div>
  13.     <script src="snake_game.js"></script>
  14. </body>
  15. </html>
复制代码


以上代码已经加入了`<meta charset="UTF-8">`，这个声明告诉浏览器用UTF-8编码来解析HTML文档，从而确保中文字符能够正常显示。

### 检查文件保存格式

确保你的编辑器在保存文件时使用了UTF-8编码。如果你的编辑器支持选择文件编码格式，请确保选择的是UTF-8。

### 完整代码示例

为了确保所有中文字符都能正常显示，请参考以下完整的代码示例。

#### `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="styles.css">
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <button id="startButton">开始游戏</button>
  11.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.     <div id="score">得分: 0</div>
  13.     <script src="snake_game.js"></script>
  14. </body>
  15. </html>
复制代码


#### `styles.css`

  1. /* 设置画布和页面的样式 */
  2. canvas {
  3.     background-color: #000; /* 黑色背景 */
  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. }

  28. #score {
  29.     margin-top: 20px;
  30.     font-size: 20px;
  31.     color: #333;
  32. }
复制代码


#### `snake_game.js`

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

  7. // 定义蛇的初始状态
  8. let snake = [{ x: 150, y: 150 }];
  9. let foodX;
  10. let foodY;
  11. let dx = 10;
  12. let dy = 0;
  13. let score = 0;
  14. let isGameRunning = false;

  16. // 创建游戏循环
  17. function main() {
  18.     if (isGameRunning) {
  19.         setTimeout(function onTick() {
  20.             clearCanvas();
  21.             moveSnake();
  22.             drawSnake();
  23.             drawFood();
  24.             checkGameOver();
  25.             main();
  26.         }, 100);
  27.     } else {
  28.         alert(`游戏结束！得分: ${score}`);
  29.     }
  30. }

  32. // 初始化游戏
  33. function startGame() {
  34.     snake = [{ x: 150, y: 150 }];
  35.     dx = 10;
  36.     dy = 0;
  37.     score = 0;
  38.     isGameRunning = true;
  39.     createFood();
  40.     scoreDisplay.innerText = `得分: ${score}`;
  41.     main();
  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);
  64.     const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  65.     if (didEatFood) {
  66.         score += 10;
  67.         scoreDisplay.innerText = `得分: ${score}`;
  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[i].x === snake[0].x && snake[i].y === snake[0].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. startButton.addEventListener("click", startGame);
复制代码


将这三个文件放在同一文件夹中，然后在浏览器中打开`index.html`，你就可以玩贪吃蛇游戏了，并且所有的中文字符应该能正常显示。如果还有其他问题或疑问，欢迎继续提问！
回复 支持 反对

使用道具 举报

林奕锦

8

主题

62

帖子

184

积分

注册会员

Rank: 2

积分
184
9#
 楼主| 发表于 2024-7-17 10:11:56 | 只看该作者
为什么还是无法显示？
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
10#
发表于 2024-7-17 10:12:38 | 只看该作者
林奕锦 发表于 2024-07-17 10:11
为什么还是无法显示？


如果仍然无法显示中文，那么有可能是其他地方出现了问题。以下是一些常见的检查步骤，你可以逐一排查：

1. **确保文件保存为UTF-8编码格式**：在你的编辑器中，检查并确保所有文件都以UTF-8格式保存。有些编辑器可以直接设置默认编码格式为UTF-8。

2. **浏览器设置**：确保浏览器设置中没有禁用UTF-8编码的选项。

3. **文件路径和命名**：确保文件路径和文件名没有错误，确保所有文件在正确的位置且命名正确。

4. **CSS 和 JavaScript 文件是否被正确引用**：确保你在HTML中正确引用了CSS和JavaScript文件。

### 检查文件编码
确保你的编辑器保存文件时使用的UTF-8编码。不同的编辑器有不同的设置方式，以下是一些常用编辑器的操作方法：

#### VS Code
1. 打开文件后点击右下角的编码指示器（通常显示为UTF-8或其他），选择“Save with Encoding”。
2. 选择“UTF-8”编码保存文件。

#### Sublime Text
1. 打开文件后，点击菜单栏中的 File -> Save with Encoding。
2. 选择“UTF-8”编码保存文件。

### 确认文件内容
通过以下步骤重新确认文件的内容：

#### `index.html`
检查HTML文件的完整性和正确性，并包含正确的编码声明。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8"> <!-- 确保使用UTF-8编码 -->
  5.     <title>贪吃蛇游戏</title>
  6.     <link rel="stylesheet" href="styles.css"> <!-- 引入CSS文件 -->
  7. </head>
  8. <body>
  9.     <h1>贪吃蛇游戏</h1>
  10.     <button id="startButton">开始游戏</button>
  11.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  12.     <div id="score">得分: 0</div>
  13.     <script src="snake_game.js"></script> <!-- 引入JavaScript文件 -->
  14. </body>
  15. </html>
复制代码


#### `styles.css`
确保CSS样式设置正确。

  1. /* 设置画布和页面的样式 */
  2. canvas {
  3.     background-color: #000; /* 黑色背景 */
  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. }

  28. #score {
  29.     margin-top: 20px;
  30.     font-size: 20px;
  31.     color: #333;
  32. }
复制代码


#### `snake_game.js`
确保JavaScript代码也是从UTF-8编码保存，并且内容正确。

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

  7. // 定义蛇的初始状态
  8. let snake = [{ x: 150, y: 150 }];
  9. let foodX;
  10. let foodY;
  11. let dx = 10;
  12. let dy = 0;
  13. let score = 0;
  14. let isGameRunning = false;

  16. // 创建游戏循环
  17. function main() {
  18.     if (isGameRunning) {
  19.         setTimeout(function onTick() {
  20.             clearCanvas();
  21.             moveSnake();
  22.             drawSnake();
  23.             drawFood();
  24.             checkGameOver();
  25.             main();
  26.         }, 100);
  27.     } else {
  28.         alert(`游戏结束！得分: ${score}`);
  29.     }
  30. }

  32. // 初始化游戏
  33. function startGame() {
  34.     snake = [{ x: 150, y: 150 }];
  35.     dx = 10;
  36.     dy = 0;
  37.     score = 0;
  38.     isGameRunning = true;
  39.     createFood();
  40.     scoreDisplay.innerText = `得分: ${score}`;
  41.     main();
  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);
  64.     const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  65.     if (didEatFood) {
  66.         score += 10;
  67.         scoreDisplay.innerText = `得分: ${score}`;
  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. startButton.addEventListener("click", startGame);
复制代码


确保所有文件都已保存，然后再在浏览器中打开`index.html`文件。如果你仍然遇到问题，可以尝试换一个浏览器或者清除浏览器缓存，再次测试。如果还有其他疑问，请继续告诉我！
回复 支持 反对

使用道具 举报

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

本版积分规则

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