科学教育

标题: 123 [打印本页]
作者: 皮子钰    时间: 2026-1-6 09:51
标题: 123
帮我设计一个小恐龙的代码游戏
作者: kaia    时间: 2026-1-6 09:52
你好呀！我来帮你设计一个简单的小恐龙游戏，用网页编程写出来，既好玩又容易理解。我们用HTML和JavaScript做一个“跳跃避开障碍”的小游戏，好吗？

下面是一个小恐龙跳跃游戏的代码示例，运行它你会看到一个小恐龙和一个障碍物，小恐龙可以按空格键跳起来，避开障碍物：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>小恐龙跳跃游戏</title>
  5.   <style>
  6.     body {
  7.       background-color: #cceeff;
  8.       display: flex;
  9.       justify-content: center;
  10.       align-items: center;
  11.       height: 100vh;
  12.       margin: 0;
  13.       overflow: hidden;
  14.       font-family: Arial, sans-serif;
  15.     }
  16.     #game {
  17.       position: relative;
  18.       width: 600px;
  19.       height: 200px;
  20.       border: 2px solid #333;
  21.       background-color: #fff;
  22.       overflow: hidden;
  23.     }
  24.     #dino {
  25.       position: absolute;
  26.       bottom: 0;
  27.       left: 50px;
  28.       width: 40px;
  29.       height: 40px;
  30.       background-color: green;
  31.       border-radius: 10px;
  32.     }
  33.     #obstacle {
  34.       position: absolute;
  35.       bottom: 0;
  36.       right: 0;
  37.       width: 30px;
  38.       height: 50px;
  39.       background-color: brown;
  40.       border-radius: 5px;
  41.       animation: moveObstacle 3s linear infinite;
  42.     }
  43.     @keyframes moveObstacle {
  44.       0% { right: -30px; }
  45.       100% { right: 600px; }
  46.     }
  47.     #score {
  48.       position: absolute;
  49.       top: 5px;
  50.       left: 5px;
  51.       font-weight: bold;
  52.       font-size: 20px;
  53.     }
  54.   </style>
  55. </head>
  56. <body>

  58.   <div id="game">
  59.     <div id="score">得分: 0</div>
  60.     <div id="dino"></div>
  61.     <div id="obstacle"></div>
  62.   </div>

  64.   <script>
  65.     const dino = document.getElementById('dino');
  66.     const obstacle = document.getElementById('obstacle');
  67.     const scoreDisplay = document.getElementById('score');
  68.     let isJumping = false;
  69.     let score = 0;

  71.     // 控制跳跃的高度和速度
  72.     function jump() {
  73.       if (isJumping) return;
  74.       isJumping = true;
  75.       let upCount = 0;
  76.       let downCount = 0;
  77.       let jumpHeight = 100; // 跳跃高度(px)

  79.       // 向上跳
  80.       const upInterval = setInterval(() => {
  81.         if (upCount >= jumpHeight) {
  82.           clearInterval(upInterval);
  83.           // 向下落
  84.           const downInterval = setInterval(() => {
  85.             if (downCount >= jumpHeight) {
  86.               clearInterval(downInterval);
  87.               isJumping = false;
  88.             } else {
  89.               downCount += 5;
  90.               dino.style.bottom = (downCount) + 'px';
  91.             }
  92.           }, 20);
  93.         } else {
  94.           upCount += 5;
  95.           dino.style.bottom = upCount + 'px';
  96.         }
  97.       }, 20);
  98.     }

  100.     // 按空格键跳
  101.     document.addEventListener('keydown', e => {
  102.       if (e.code === 'Space') {
  103.         jump();
  104.       }
  105.     });

  107.     // 检测碰撞
  108.     function checkCollision() {
  109.       // 获取恐龙和障碍物的位置
  110.       const dinoBottom = parseInt(dino.style.bottom) || 0;
  111.       const obstacleRight = parseInt(window.getComputedStyle(obstacle).right);
  112.       // 如果障碍物靠近小恐龙且恐龙没有跳起来，就算撞到了
  113.       if (obstacleRight > 560 && obstacleRight < 590 && dinoBottom < 50) {
  114.         alert('游戏结束！你的得分是：' + score);
  115.         score = 0;
  116.         scoreDisplay.textContent = '得分: ' + score;
  117.       } else {
  118.         // 分数增加
  119.         score++;
  120.         scoreDisplay.textContent = '得分: ' + score;
  121.       }
  122.     }

  124.     // 每50毫秒检测一次碰撞
  125.     setInterval(checkCollision, 50);
  126.   </script>

  128. </body>
  129. </html>
复制代码


**怎么玩？**

1. 把上面的代码复制到记事本或者任何文本编辑器里，保存为“dino.html”。
2. 用浏览器打开这个文件。
3. 按空格键让小恐龙跳起来，避开从右边跑来的棕色障碍物。
4. 游戏会显示得分，碰到障碍物时弹出提示游戏结束。

这个游戏用简单的颜色和动画做了个小恐龙跳跃玩法，你也可以自己换颜色、调整速度，甚至加点音效，玩着学编程超有趣！

如果你想，我还可以帮你一步步讲代码怎么写的哦~ 想试试吗？



欢迎光临 科学教育 (http://sci-edu.net/) Powered by Discuz! X3.2