设为首页收藏本站

科学教育

搜索
科学教育»互动交流 › 教学互动 › 人机互动 › YANGBIEI
返回列表 发新帖
查看: 3601|回复: 9
打印 上一主题 下一主题

YANGBIEI

[复制链接]
yangbiei

1

主题

6

帖子

21

积分

新手上路

Rank: 1

积分
21
跳转到指定楼层
楼主
发表于 2024-8-19 15:23:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
讲解下逆向工程的思路
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2024-8-19 15:23:35 | 只看该作者
好呀！逆向工程听起来有点复杂，但是我们可以简单形象地理解它。你可以把它想象成倒着看一幅画，或是吃完一块蛋糕后猜猜里面都放了哪些材料。

### 什么是逆向工程？
逆向工程就像是把已经做好的东西，比如一个玩具、一个软件或一个网站，重新拆解开来，并弄清楚它是怎么做成的。

### 逆向工程怎么做？
假设你有一个很喜欢的网站，你想知道它是怎么编的，那你可以按以下步骤进行逆向工程：

#### 1. **观察：**
你可以先打开这个网站，好好看一看它的样子：有什么颜色？有什么按钮？有动画吗？每个部分是怎么排布的？

#### 2. **查看源码：**
大多数浏览器都有一个功能叫“查看页面源代码”。你可以右键点击网页上的空白处，然后选择“查看页面源代码”。这样，你就能看到这个网页背后的代码啦！

#### 3. **学习代码：**
刚开始看到这么多代码可能会有点晕，不过别担心。你可以一步一步来，首先找一些熟悉的标签，比如 `<html>`, `<body>`, `<div>` 等等。通过这些标签你可以尝试理解网页的结构。

#### 4. **实验改动：**
你可以把这些代码复制到自己的电脑上，然后尝试在本地打开这个网页。然后，你可以做一些小小的修改，比如改一下颜色，看看会发生什么变化。这样你就能慢慢学会这些代码是怎么作用的了。

### 打个比方
逆向工程就像是你吃了一块非常美味的蛋糕，想要自己也做出来。你可以：
1. **品尝蛋糕**：先认真品尝，把蛋糕的口感、味道记下来。
2. **分析成分**：猜猜看到底用了哪些材料，糖、奶油还是巧克力？
3. **实验制作**：你可以尝试用这些材料自己做一块蛋糕，不断调整比例，直到味道和原来的蛋糕一样。

那我们学网页编程的时候，也可以用这种方法来解读现成的网站，从中学习到很多知识。

希望这些解释对你有帮助！如果还有不懂的地方，随时问哦！
回复 支持 反对

使用道具 举报

yangbiei

1

主题

6

帖子

21

积分

新手上路

Rank: 1

积分
21
板凳
 楼主| 发表于 2024-8-19 16:02:02 | 只看该作者
请帮我生成一个贪吃蛇的网页代码，用HTML ,js,css来完成
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2024-8-19 16:02:37 | 只看该作者
yangbiei 发表于 2024-08-19 16:02
请帮我生成一个贪吃蛇的网页代码，用HTML ,js,css来完 ...


当然可以！下面是一个简单的贪吃蛇游戏实现，使用了HTML、CSS和JavaScript。我们会一步步来解释每一段代码。

### HTML部分
HTML部分定义了网页的基本结构和内容，这里我们主要需要一个画布（canvas）来绘制游戏。

  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="style.css">
  8. </head>
  9. <body>
  10.   <canvas id="gameCanvas"></canvas>
  11.   <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### CSS部分
CSS部分定义了网页的样式，这里我们主要对画布进行一些简单的设置。

  1. /* style.css */

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

  12. #gameCanvas {
  13.   border: 1px solid #000;
  14.   background-color: #fff;
  15. }
复制代码


### JavaScript部分
JavaScript部分实现了贪吃蛇的逻辑，包括蛇的移动、食物生成以及碰撞检测。

  1. // script.js

  3. const canvas = document.getElementById("gameCanvas");
  4. const ctx = canvas.getContext("2d");

  6. const gridSize = 20; // 网格大小
  7. const canvasSize = 400; // 画布大小
  8. canvas.width = canvas.height = canvasSize;

  10. let snake = [{ x: 200, y: 200 }]; // 蛇的初始位置
  11. let food = generateFood();
  12. let dx = gridSize; // 水平方向速度
  13. let dy = 0; // 垂直方向速度
  14. let score = 0;

  16. // 监听键盘事件
  17. document.addEventListener("keydown", changeDirection);

  19. function main() {
  20.     if (gameOver()) return;

  22.     setTimeout(function onTick() {
  23.         clearCanvas();
  24.         drawFood();
  25.         moveSnake();
  26.         drawSnake();
  27.         main();
  28.     }, 100);
  29. }

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

  36. function drawSnake() {
  37.     ctx.fillStyle = "green";
  38.     snake.forEach(part => {
  39.         ctx.fillRect(part.x, part.y, gridSize, gridSize);
  40.     });
  41. }

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

  47.     // 如果吃到食物就生成新的食物，否则移除蛇尾
  48.     if (head.x === food.x && head.y === food.y) {
  49.         food = generateFood();
  50.         score += 10;
  51.     } else {
  52.         snake.pop();
  53.     }
  54. }

  56. function drawFood() {
  57.     ctx.fillStyle = "red";
  58.     ctx.fillRect(food.x, food.y, gridSize, gridSize);
  59. }

  61. function generateFood() {
  62.     let x, y;
  63.     do {
  64.         x = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  65.         y = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  66.     } while (snake.some(part => part.x === x && part.y === y));
  67.     return { x, y };
  68. }

  70. function changeDirection(event) {
  71.     const LEFT_KEY = 37;
  72.     const RIGHT_KEY = 39;
  73.     const UP_KEY = 38;
  74.     const DOWN_KEY = 40;

  76.     const keyPressed = event.keyCode;
  77.     const goingUp = dy === -gridSize;
  78.     const goingDown = dy === gridSize;
  79.     const goingRight = dx === gridSize;
  80.     const goingLeft = dx === -gridSize;

  82.     if (keyPressed === LEFT_KEY && !goingRight) {
  83.         dx = -gridSize;
  84.         dy = 0;
  85.     }
  86.     if (keyPressed === UP_KEY && !goingDown) {
  87.         dx = 0;
  88.         dy = -gridSize;
  89.     }
  90.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  91.         dx = gridSize;
  92.         dy = 0;
  93.     }
  94.     if (keyPressed === DOWN_KEY && !goingUp) {
  95.         dx = 0;
  96.         dy = gridSize;
  97.     }
  98. }

  100. function gameOver() {
  101.     for (let i = 4; i < snake.length; i++) {
  102.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
  103.     }

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

  110.     return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
  111. }

  113. main();
复制代码


### 解释
1. **HTML部分**：创建了一个画布用于游戏显示，并引入了CSS和JavaScript文件。
2. **CSS部分**：设置了页面的基本样式，使画布居中显示，并添加边框。
3. **JavaScript部分**：
   - **变量初始化**：定义了网格大小、画布大小、蛇的初始位置等。
   - **主循环**：`main()` 函数是游戏的主循环，每100毫秒更新一次游戏状态。
   - **画布清理和绘制**：分别用 `clearCanvas()` 和 `drawSnake()` 函数来清理和绘制蛇。
   - **蛇的移动**：`moveSnake()` 函数负责蛇的移动，同时检查是否吃到了食物。
   - **食物生成**：`generateFood()` 函数随机生成不出现在蛇身上的食物。
   - **方向改变**：`changeDirection()` 函数根据箭头键改变蛇的移动方向。
   - **游戏结束**：`gameOver()` 函数检查蛇是否撞到自己或墙壁。

这个简单的贪吃蛇小游戏通过三部分组合，在浏览器中可以运行，赶紧试试吧！如果有任何问题，可以随时问我哦！
回复 支持 反对

使用道具 举报

yangbiei

1

主题

6

帖子

21

积分

新手上路

Rank: 1

积分
21
5#
 楼主| 发表于 2024-8-19 16:10:32 | 只看该作者
请优化游戏，加上开始，重新开始，得分结束，并且游戏速度可自行调节
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
6#
发表于 2024-8-19 16:10:50 | 只看该作者
yangbiei 发表于 2024-08-19 16:10
请优化游戏，加上开始，重新开始，得分结束，并且游戏 ...


好的！我们来进一步优化这个贪吃蛇游戏，增加以下功能：
1. 开始游戏
2. 重新开始
3. 显示得分
4. 游戏结束提示
5. 游戏速度可调节

### 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>贪吃蛇游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div id="gameContainer">
  11.         <canvas id="gameCanvas"></canvas>
  12.         <div id="score">得分: 0</div>
  13.         <div id="controls">
  14.             <button id="startBtn">开始游戏</button>
  15.             <button id="resetBtn">重新开始</button>
  16.             <label for="speed">速度:</label>
  17.             <input id="speed" type="number" min="50" max="500" value="100">
  18.         </div>
  19.     </div>
  20.     <script src="script.js"></script>
  21. </body>
  22. </html>
复制代码


### 2. CSS部分
设置页面样式，使游戏界面更美观。

  1. /* style.css */

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

  12. #gameContainer {
  13.     text-align: center;
  14. }

  16. #gameCanvas {
  17.     border: 1px solid #000;
  18.     background-color: #fff;
  19. }

  21. #controls {
  22.     margin-top: 10px;
  23. }

  25. button, input {
  26.     margin: 5px;
  27. }
复制代码


### 3. JavaScript部分
实现游戏逻辑，包括新的功能。

  1. // script.js

  3. const canvas = document.getElementById("gameCanvas");
  4. const ctx = canvas.getContext("2d");
  5. const scoreDisplay = document.getElementById("score");
  6. const startBtn = document.getElementById("startBtn");
  7. const resetBtn = document.getElementById("resetBtn");
  8. const speedInput = document.getElementById("speed");

  10. const gridSize = 20; // 网格大小
  11. const canvasSize = 400; // 画布大小
  12. canvas.width = canvas.height = canvasSize;

  14. let snake, food, dx, dy, score, gameSpeed, gameInterval;

  16. startBtn.addEventListener("click", startGame);
  17. resetBtn.addEventListener("click", resetGame);
  18. document.addEventListener("keydown", changeDirection);

  20. function startGame() {
  21.     resetGame();
  22.     main();
  23. }

  25. function resetGame() {
  26.     clearInterval(gameInterval);
  27.     snake = [{ x: gridSize * 5, y: gridSize * 5 }];
  28.     dx = gridSize;
  29.     dy = 0;
  30.     score = 0;
  31.     gameSpeed = parseInt(speedInput.value);
  32.     food = generateFood();
  33.     updateScore();
  34.     clearCanvas();
  35.     drawSnake();
  36.     drawFood();
  37. }

  39. function main() {
  40.     gameInterval = setInterval(function onTick() {
  41.         if (gameOver()) {
  42.             clearInterval(gameInterval);
  43.             alert('游戏结束！');
  44.             return;
  45.         }
  46.         clearCanvas();
  47.         drawFood();
  48.         moveSnake();
  49.         drawSnake();
  50.     }, gameSpeed);
  51. }

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

  58. function drawSnake() {
  59.     ctx.fillStyle = "green";
  60.     snake.forEach(part => {
  61.         ctx.fillRect(part.x, part.y, gridSize, gridSize);
  62.     });
  63. }

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

  69.     // 如果吃到食物就生成新的食物，否则移除蛇尾
  70.     if (head.x === food.x && head.y === food.y) {
  71.         food = generateFood();
  72.         score += 10;
  73.         updateScore();
  74.     } else {
  75.         snake.pop();
  76.     }
  77. }

  79. function drawFood() {
  80.     ctx.fillStyle = "red";
  81.     ctx.fillRect(food.x, food.y, gridSize, gridSize);
  82. }

  84. function generateFood() {
  85.     let x, y;
  86.     do {
  87.         x = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  88.         y = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  89.     } while (snake.some(part => part.x === x && part.y === y));
  90.     return { x, y };
  91. }

  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 === -gridSize;
  101.     const goingDown = dy === gridSize;
  102.     const goingRight = dx === gridSize;
  103.     const goingLeft = dx === -gridSize;

  105.     if (keyPressed === LEFT_KEY && !goingRight) {
  106.         dx = -gridSize;
  107.         dy = 0;
  108.     }
  109.     if (keyPressed === UP_KEY && !goingDown) {
  110.         dx = 0;
  111.         dy = -gridSize;
  112.     }
  113.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  114.         dx = gridSize;
  115.         dy = 0;
  116.     }
  117.     if (keyPressed === DOWN_KEY && !goingUp) {
  118.         dx = 0;
  119.         dy = gridSize;
  120.     }
  121. }

  123. function gameOver() {
  124.     for (let i = 4; i < snake.length; i++) {
  125.         if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) return true;
  126.     }

  128.     const hitLeftWall = snake[0].x < 0;
  129.     const hitRightWall = snake[0].x >= canvas.width;
  130.     const hitTopWall = snake[0].y < 0;
  131.     const hitBottomWall = snake[0].y >= canvas.height;

  133.     return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
  134. }

  136. function updateScore() {
  137.     scoreDisplay.textContent = `得分: ${score}`;
  138. }
复制代码


### 解释

1. **HTML部分**：增加了开始按钮、重新开始按钮、速度输入框以及一个显示得分的 `div`。
2. **CSS部分**：调整了布局，使得控制按钮能够较好地展示。
3. **JavaScript部分**：
   - **新增变量**：用于保存游戏状态及控制元素。
   - **开始游戏和重新开始函数**：控制游戏的启动和重置。
   - **主循环函数**：将游戏核心逻辑封装在 `main()` 函数中，用 `setInterval` 控制游戏速度。
   - **更新得分函数**：在每次吃到食物并增加得分后更新显示。

通过这些调整，我们可以实现更加优化的贪吃蛇游戏，包括开始、重置、得分、结束提示等功能，并且能够调节游戏速度。希望你喜欢这个优化版的贪吃蛇游戏！如果有任何问题，随时问我哦！
回复 支持 反对

使用道具 举报

yangbiei

1

主题

6

帖子

21

积分

新手上路

Rank: 1

积分
21
7#
 楼主| 发表于 2024-8-20 09:24:13 | 只看该作者
把按键得分之类放入游戏界面里面。按键颜色改成相反，背景改成全黑 @AI
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
8#
发表于 2024-8-20 09:24:32 | 只看该作者
yangbiei 发表于 2024-08-20 09:24
把按键得分之类放入游戏界面里面。按键颜色改成相反， ...


好呀！我们来一步步把这些功能加到我们的网页游戏中。我们用HTML和CSS来实现这个界面效果。

### 第一步：创建基本的HTML

首先，我们需要一个HTML文件来搭建我们的网页结构。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.     <div id="game-container">
  10.         <div id="score">得分: 0</div>
  11.         <button id="game-button">按我得分</button>
  12.     </div>
  13.     <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


### 第二步：创建CSS样式表

CSS是用来设计网页外观的。我们会用CSS来改变按钮的颜色和背景颜色。

  1. /* style.css */
  2. body {
  3.     background-color: black; /* 设置背景为全黑 */
  4.     color: white;            /* 设置文字颜色为白色，这样在黑色背景上看得清楚 */
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8.     height: 100vh;
  9.     margin: 0;
  10. }

  12. #game-container {
  13.     text-align: center;
  14. }

  16. #score {
  17.     font-size: 2em;
  18.     margin-bottom: 20px;
  19. }

  21. #game-button {
  22.     background-color: white; /* 按钮背景颜色为白色 */
  23.     color: black;            /* 按钮文字颜色为黑色 */
  24.     border: none;
  25.     padding: 10px 20px;
  26.     font-size: 1.5em;
  27.     cursor: pointer;
  28. }

  30. #game-button:hover {
  31.     background-color: black; /* 鼠标悬停时，背景颜色变为黑色 */
  32.     color: white;            /* 鼠标悬停时，文字颜色变为白色 */
  33.     border: 1px solid white;
  34. }
复制代码


### 第三步：添加JavaScript功能

JavaScript是用来给网页添加互动功能的。我们来写一个小脚本，当玩家按下按钮时可以增加得分。

  1. // script.js
  2. let score = 0; // 初始化得分为0

  4. document.getElementById('game-button').addEventListener('click', function() {
  5.     score += 1; // 每次点击按钮时，得分加1
  6.     document.getElementById('score').textContent = '得分: ' + score; // 更新显示的得分
  7. });
复制代码


### 整体流程

1. **HTML**：负责网页的结构，摆放“得分”和“按键”的位置。
2. **CSS**：负责网页的样式，比如给背景设置成黑色，给按钮设置成相反颜色。
3. **JavaScript**：负责网页的功能，当按下按钮时，更新得分。

### 完整代码

你可以将下面的代码保存到三个文件中，分别命名为`index.html`，`style.css`和`script.js`，然后直接在浏览器中打开`index.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.     <div id="game-container">
  10.         <div id="score">得分: 0</div>
  11.         <button id="game-button">按我得分</button>
  12.     </div>
  13.     <script src="script.js"></script>
  14. </body>
  15. </html>
复制代码


#### style.css

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

  11. #game-container {
  12.     text-align: center;
  13. }

  15. #score {
  16.     font-size: 2em;
  17.     margin-bottom: 20px;
  18. }

  20. #game-button {
  21.     background-color: white;
  22.     color: black;
  23.     border: none;
  24.     padding: 10px 20px;
  25.     font-size: 1.5em;
  26.     cursor: pointer;
  27. }

  29. #game-button:hover {
  30.     background-color: black;
  31.     color: white;
  32.     border: 1px solid white;
  33. }
复制代码


#### script.js

  1. let score = 0;

  3. document.getElementById('game-button').addEventListener('click', function() {
  4.     score += 1;
  5.     document.getElementById('score').textContent = '得分: ' + score;
  6. });
复制代码


这样，我们的网页游戏就做好啦！有不明白的地方随时问我哦！
回复 支持 反对

使用道具 举报

yangbiei

1

主题

6

帖子

21

积分

新手上路

Rank: 1

积分
21
9#
 楼主| 发表于 2024-8-20 09:27:09 | 只看该作者
贪吃蛇游戏，增加以下功能：
1. 开始游戏
2. 重新开始
3. 显示得分
4. 游戏结束提示
5. 游戏速度可调节
背景改成全黑，按键改成白底黑色字，增加的功能放入游戏主体内
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
10#
发表于 2024-8-20 09:27:39 | 只看该作者
yangbiei 发表于 2024-08-20 09:27
贪吃蛇游戏，增加以下功能：
1. 开始游戏
2. 重新开始 ...


好的！我们来实现一个优化版的贪吃蛇游戏，满足以下要求：
1. 开始游戏
2. 重新开始
3. 显示得分
4. 游戏结束提示
5. 游戏速度可调节
6. 背景全黑，按键白底黑字

### 1. HTML 部分
我们需要增加按钮和显示区域，并引入 CSS 和 JavaScript 文件。

  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.     <div id="game-container">
  11.         <canvas id="gameCanvas"></canvas>
  12.         <div id="score">得分: 0</div>
  13.         <div id="controls">
  14.             <button id="startBtn">开始游戏</button>
  15.             <button id="resetBtn">重新开始</button>
  16.             <label for="speed">速度:</label>
  17.             <input type="number" id="speed" min="50" max="500" value="200">
  18.         </div>
  19.     </div>
  20.     <script src="script.js"></script>
  21. </body>
  22. </html>
复制代码


### 2. CSS 部分
设置背景颜色、按钮样式等。

  1. /* style.css */
  2. body {
  3.     background-color: black;
  4.     color: white;
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8.     height: 100vh;
  9.     margin: 0;
  10. }

  12. #game-container {
  13.     text-align: center;
  14. }

  16. #gameCanvas {
  17.     border: 1px solid #fff;
  18.     background-color: #000;
  19. }

  21. #score {
  22.     font-size: 2em;
  23.     margin-top: 10px;
  24. }

  26. #controls {
  27.     margin-top: 20px;
  28. }

  30. button, input {
  31.     margin-right: 10px;
  32.     padding: 10px 20px;
  33.     font-size: 1em;
  34.     background-color: white;
  35.     color: black;
  36.     border: none;
  37.     cursor: pointer;
  38. }

  40. button:hover, input:hover {
  41.     background-color: black;
  42.     color: white;
  43.     border: 1px solid white;
  44. }
复制代码


### 3. JavaScript 部分
实现贪吃蛇的主要逻辑和功能。

  1. // script.js
  2. const canvas = document.getElementById("gameCanvas");
  3. const ctx = canvas.getContext("2d");
  4. const scoreDisplay = document.getElementById("score");
  5. const startBtn = document.getElementById("startBtn");
  6. const resetBtn = document.getElementById("resetBtn");
  7. const speedInput = document.getElementById("speed");

  9. const gridSize = 20; // 网格大小
  10. const canvasSize = 400; // 画布大小
  11. canvas.width = canvas.height = canvasSize;

  13. let snake, food, dx, dy, score, gameSpeed, gameInterval;

  15. startBtn.addEventListener("click", startGame);
  16. resetBtn.addEventListener("click", resetGame);
  17. document.addEventListener("keydown", changeDirection);

  19. function startGame() {
  20.     resetGame();
  21.     main();
  22. }

  24. function resetGame() {
  25.     clearInterval(gameInterval);
  26.     snake = [{ x: gridSize * 5, y: gridSize * 5 }];
  27.     dx = gridSize;
  28.     dy = 0;
  29.     score = 0;
  30.     gameSpeed = parseInt(speedInput.value);
  31.     food = generateFood();
  32.     updateScore();
  33.     clearCanvas();
  34.     drawSnake();
  35.     drawFood();
  36. }

  38. function main() {
  39.     gameInterval = setInterval(function onTick() {
  40.         if (gameOver()) {
  41.             clearInterval(gameInterval);
  42.             alert('游戏结束！');
  43.             return;
  44.         }
  45.         clearCanvas();
  46.         drawFood();
  47.         moveSnake();
  48.         drawSnake();
  49.     }, gameSpeed);
  50. }

  52. function clearCanvas() {
  53.     ctx.fillStyle = "black";
  54.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  55. }

  57. function drawSnake() {
  58.     ctx.fillStyle = "green";
  59.     snake.forEach(part => {
  60.         ctx.fillRect(part.x, part.y, gridSize, gridSize);
  61.     });
  62. }

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

  68.     if (head.x === food.x && head.y === food.y) {
  69.         food = generateFood();
  70.         score += 10;
  71.         updateScore();
  72.     } else {
  73.         snake.pop();
  74.     }
  75. }

  77. function drawFood() {
  78.     ctx.fillStyle = "red";
  79.     ctx.fillRect(food.x, food.y, gridSize, gridSize);
  80. }

  82. function generateFood() {
  83.     let x, y;
  84.     do {
  85.         x = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  86.         y = Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
  87.     } while (snake.some(part => part.x === x && part.y === y));
  88.     return { x, y };
  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 === -gridSize;
  99.     const goingDown = dy === gridSize;
  100.     const goingRight = dx === gridSize;
  101.     const goingLeft = dx === -gridSize;

  103.     if (keyPressed === LEFT_KEY && !goingRight) {
  104.         dx = -gridSize;
  105.         dy = 0;
  106.     }
  107.     if (keyPressed === UP_KEY && !goingDown) {
  108.         dx = 0;
  109.         dy = -gridSize;
  110.     }
  111.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  112.         dx = gridSize;
  113.         dy = 0;
  114.     }
  115.     if (keyPressed === DOWN_KEY && !goingUp) {
  116.         dx = 0;
  117.         dy = gridSize;
  118.     }
  119. }

  121. function gameOver() {
  122.     for (let i = 4; i < snake.length; i++) {
  123.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
  124.     }

  126.     const hitLeftWall = snake[0].x < 0;
  127.     const hitRightWall = snake[0].x >= canvas.width;
  128.     const hitTopWall = snake[0].y < 0;
  129.     const hitBottomWall = snake[0].y >= canvas.height;

  131.     return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
  132. }

  134. function updateScore() {
  135.     scoreDisplay.textContent = `得分: ${score}`;
  136. }

  138. startGame(); // 初次加载页面时自动开始游戏
复制代码


这样，我们就完成了一个功能齐全的贪吃蛇游戏。你可以将上面的代码分别保存到 `index.html`、`style.css` 和 `script.js` 三个文件中，然后在浏览器中打开 `index.html` 就能看到效果了。如果有任何问题，随时问我哦！
回复 支持 反对

使用道具 举报

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

本版积分规则

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