设为首页收藏本站

科学教育

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

张瑞

[复制链接]
kysxctt

1

主题

3

帖子

15

积分

新手上路

Rank: 1

积分
15
跳转到指定楼层
楼主
发表于 2024-11-26 09:58:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
学习逆向思维编程
回复

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
沙发
发表于 2024-11-26 09:59:00 | 只看该作者
张瑞，你好！“逆向思维编程”听起来有点复杂，但不用担心，我来帮你简单解释一下。

在编程中，“逆向思维”可以理解为从目标出发，倒着去探索实现这个目标的方法。就像我们做迷宫游戏，可以从终点往起点走，这样更容易找到正确的路径。

举个例子，如果你的目标是制作一个网页按钮，当有人点击它时，会显示一句“你好，世界！”。用逆向思维的话，你可以这样想：

1. **最终目标**：点击按钮，显示“你好，世界！”。
2. **需要什么**：在网页上，你需要一个点击事件，这个事件会触发显示一段文字。
3. **怎么做**：
   - 你需要一个按钮（HTML代码）。
   - 需要一个地方来显示“你好，世界！”（HTML代码）。
   - 需要写一点代码来定义当按钮被点击时会发生什么（JavaScript代码）。

所以我们可以先写这段代码：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>逆向思维编程示例</title>
  6. </head>
  7. <body>
  8.     <!-- 这是一个按钮 -->
  9.     <button id="myButton">点击我</button>
  10.    
  11.     <!-- 这里将显示"你好，世界！" -->
  12.     <p id="messageArea"></p>

  14.     <!-- 这是JavaScript代码 -->
  15.     <script>
  16.         // 获取按钮和显示区的元素
  17.         const button = document.getElementById('myButton');
  18.         const messageArea = document.getElementById('messageArea');

  20.         // 为按钮添加点击事件
  21.         button.addEventListener('click', function() {
  22.             messageArea.textContent = "你好，世界！";
  23.         });
  24.     </script>
  25. </body>
  26. </html>
复制代码


通过这种方式，从最终目标一直倒推到如何用代码实现，每一步都清晰明确。这就是逆向思维在编程中的一种应用！

希望这样的解释能帮到你理解逆向思维在编程中的意义和应用。如果还有疑问或者其他编程问题，欢迎随时问我哦！
回复 支持 反对

使用道具 举报

kysxctt

1

主题

3

帖子

15

积分

新手上路

Rank: 1

积分
15
板凳
 楼主| 发表于 2024-11-26 10:02:53 | 只看该作者
你好，你是一名专业的代码工程师，请你帮我生成一个贪吃蛇的网页代码，用html、css、js来完成。@AI
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
地板
发表于 2024-11-26 10:03:12 | 只看该作者
kysxctt 发表于 2024-11-26 10:02
你好，你是一名专业的代码工程师，请你帮我生成一个贪 ...


你好！我会帮你设计一个简单的贪吃蛇游戏网页，使用HTML、CSS和JavaScript，让我们一步步来吧！

### 第一步：设置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.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  11.     <script src="script.js"></script>
  12. </body>
  13. </html>
复制代码


### 第二步：设计游戏样式 (CSS)

然后，我们需要创建一个CSS文件来简单设置一下游戏的样式，比如背景颜色和边框。

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

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


### 第三步：实现游戏逻辑 (JavaScript)

最后一步，我们用JavaScript来实现游戏的基本逻辑，比如蛇的移动和食物的生成。

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

  5. let snake = [
  6.     { x: 200, y: 200 },
  7.     { x: 190, y: 200 },
  8.     { x: 180, y: 200 },
  9. ];

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

  14. let foodX;
  15. let foodY;

  17. function createFood() {
  18.     foodX = Math.floor(Math.random() * 40) * 10;
  19.     foodY = Math.floor(Math.random() * 40) * 10;
  20. }

  22. function drawSnakePart(snakePart) {
  23.     ctx.fillStyle = 'lightgreen';
  24.     ctx.strokestyle = 'darkgreen';
  25.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  26.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  27. }

  29. function drawSnake() {
  30.     snake.forEach(drawSnakePart);
  31. }

  33. function clearCanvas() {
  34.     ctx.fillStyle = 'white';
  35.     ctx.strokeStyle = 'black';
  36.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  37.     ctx.strokeRect(0, 0, canvas.width, canvas.height);
  38. }

  40. function main() {
  41.     if (gameOver()) return;

  43.     setTimeout(function onTick() {
  44.         clearCanvas();
  45.         drawFood();
  46.         moveSnake();
  47.         drawSnake();
  48.         main();
  49.     }, 100);
  50. }

  52. function gameOver() {
  53.     for (let i = 4; i < snake.length; i++) {
  54.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
  55.     }
  56.    
  57.     const hitLeftWall = snake[0].x < 0;
  58.     const hitRightWall = snake[0].x > canvas.width - 10;
  59.     const hitTopWall = snake[0].y < 0;
  60.     const hitBottomWall = snake[0].y > canvas.height - 10;

  62.     return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
  63. }

  65. function drawFood() {
  66.     ctx.fillStyle = 'red';
  67.     ctx.strokestyle = 'darkred';
  68.     ctx.fillRect(foodX, foodY, 10, 10);
  69.     ctx.strokeRect(foodX, foodY, 10, 10);
  70. }

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

  76.     const isEatingFood = snake[0].x === foodX && snake[0].y === foodY;
  77.     if (isEatingFood) {
  78.         createFood();
  79.     } else {
  80.         snake.pop();
  81.     }
  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. document.addEventListener('keydown', changeDirection);
  118. createFood();
  119. main();
复制代码


### 解释一下代码：

1. **HTML部分**：创建一个画布`<canvas>`用于绘制游戏。
2. **CSS部分**：简单设置了整个页面居中以及画布的样式。
3. **JavaScript部分**：
   - 初始化蛇的位置和方向。
   - 使用键盘事件控制蛇的移动方向。
   - 检测蛇是否吃到食物，如果吃到就增加蛇的长度并随机生成新的食物位置。
   - 控制游戏结束条件，当蛇撞到墙壁或自身时游戏结束。
   
希望这段代码能帮助你理解如何用HTML、CSS和JavaScript创建一个简单的贪吃蛇游戏！如果有任何问题或需要进一步解释的地方，请告诉我哦~
回复 支持 反对

使用道具 举报

kysxctt

1

主题

3

帖子

15

积分

新手上路

Rank: 1

积分
15
5#
 楼主| 发表于 2024-11-26 10:14:30 | 只看该作者
你好，我的游戏想要让能够显示得分，还有在它碰壁之后，能提示游戏结束和得分，并出现“开始游戏”的按钮，以重新开始游戏怎么办
回复 支持 反对

使用道具 举报

kaia

0

主题

1145

帖子

1715

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1715
6#
发表于 2024-11-26 10:15:12 | 只看该作者
kysxctt 发表于 2024-11-26 10:14
你好，我的游戏想要让能够显示得分，还有在它碰壁之后 ...


好的，张瑞！我们可以通过一些简单的修改来实现你想要的功能。我们将为游戏增加一个得分显示，同时在游戏结束后给予提示，并提供一个重新开始游戏的按钮。

### 第一步：修改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="styles.css">
  8. </head>
  9. <body>
  10.     <div id="gameInfo">
  11.         <span id="score">得分: 0</span>
  12.         <button id="restartButton" style="display:none;">重新开始</button>
  13.     </div>
  14.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  15.     <script src="script.js"></script>
  16. </body>
  17. </html>
复制代码


### 第二步：更新CSS样式

我们稍微调整一下CSS，以确保得分显示和按钮的样式。

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

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

  17. #gameInfo {
  18.     margin-bottom: 10px;
  19. }

  21. #restartButton {
  22.     margin-top: 10px;
  23.     padding: 5px 10px;
  24.     font-size: 16px;
  25. }
复制代码


### 第三步：更新JavaScript逻辑

我们需要更新JavaScript代码来处理得分、游戏结束和重新开始功能。

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

  5. let score = 0;
  6. let snake = [{ x: 200, y: 200 }];
  7. let dx = 10;
  8. let dy = 0;
  9. let foodX;
  10. let foodY;
  11. let changingDirection = false;

  13. document.getElementById('restartButton').onclick = restartGame;
  14. document.addEventListener('keydown', changeDirection);

  16. function main() {
  17.     if (gameOver()) {
  18.         document.getElementById('restartButton').style.display = 'block';
  19.         return;
  20.     }

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

  32. function clearCanvas() {
  33.     ctx.fillStyle = 'white';
  34.     ctx.strokeStyle = 'black';
  35.     ctx.fillRect(0, 0, canvas.width, canvas.height);
  36.     ctx.strokeRect(0, 0, canvas.width, canvas.height);
  37. }

  39. function drawSnake() {
  40.     snake.forEach(drawSnakePart);
  41. }

  43. function drawSnakePart(snakePart) {
  44.     ctx.fillStyle = 'lightgreen';
  45.     ctx.strokestyle = 'darkgreen';
  46.     ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  47.     ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
  48. }

  50. function drawFood() {
  51.     ctx.fillStyle = 'red';
  52.     ctx.strokestyle = 'darkred';
  53.     ctx.fillRect(foodX, foodY, 10, 10);
  54.     ctx.strokeRect(foodX, foodY, 10, 10);
  55. }

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

  61.     const hasEatenFood = snake[0].x === foodX && snake[0].y === foodY;
  62.     if (hasEatenFood) {
  63.         score += 10;
  64.         document.getElementById('score').innerHTML = '得分: ' + score;
  65.         createFood();
  66.     } else {
  67.         snake.pop();
  68.     }
  69. }

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

  77.     if (changingDirection) return;
  78.     changingDirection = true;

  80.     const keyPressed = event.keyCode;
  81.     const goingUp = dy === -10;
  82.     const goingDown = dy === 10;
  83.     const goingRight = dx === 10;
  84.     const goingLeft = dx === -10;

  86.     if (keyPressed === LEFT_KEY && !goingRight) {
  87.         dx = -10;
  88.         dy = 0;
  89.     }

  91.     if (keyPressed === UP_KEY && !goingDown) {
  92.         dx = 0;
  93.         dy = -10;
  94.     }

  96.     if (keyPressed === RIGHT_KEY && !goingLeft) {
  97.         dx = 10;
  98.         dy = 0;
  99.     }

  101.     if (keyPressed === DOWN_KEY && !goingUp) {
  102.         dx = 0;
  103.         dy = 10;
  104.     }
  105. }

  107. function gameOver() {
  108.     for (let i = 4; i < snake.length; i++) {
  109.         if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
  110.     }
  111.    
  112.     const hitLeftWall = snake[0].x < 0;
  113.     const hitRightWall = snake[0].x > canvas.width - 10;
  114.     const hitTopWall = snake[0].y < 0;
  115.     const hitBottomWall = snake[0].y > canvas.height - 10;

  117.     return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
  118. }

  120. function createFood() {
  121.     foodX = Math.floor(Math.random() * 39 + 1) * 10;
  122.     foodY = Math.floor(Math.random() * 39 + 1) * 10;
  123.     snake.forEach(part => {
  124.         const hasEaten = part.x === foodX && part.y === foodY;
  125.         if (hasEaten) createFood();
  126.     });
  127. }

  129. function restartGame() {
  130.     score = 0;
  131.     document.getElementById('score').innerHTML = '得分: 0';
  132.     snake = [{ x: 200, y: 200 }];
  133.     dx = 10;
  134.     dy = 0;
  135.     document.getElementById('restartButton').style.display = 'none';
  136.     createFood();
  137.     main();
  138. }

  140. createFood();
  141. main();
复制代码


### 解释更新内容：

1. **得分显示**：增加了`<span>`元素来显示分数，并在每次蛇吃到食物时更新分数。
2. **游戏结束处理**：
   - 在`gameOver()`函数中检测到游戏结束时，停止游戏循环并显示“重新开始”按钮。
3. **重新开始游戏**：
   - 添加了一个`restartGame`函数，用于重置游戏状态，包括重置分数、蛇的位置和长度等。
   - 点击“重新开始”按钮时会调用此函数，并隐藏按钮。

这样，你的贪吃蛇游戏就能够显示得分，并在游戏结束后提示玩家，提供重新开始游戏的选项啦！如果还有其他问题或想要添加更多功能，请随时告诉我哦~
回复 支持 反对

使用道具 举报

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

本版积分规则

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