设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 管道鸟
返回列表 发新帖
查看: 71|回复: 9

管道鸟

[复制链接]
Sorawithcat
发表于 2024-5-14 19:09:10 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
运用此方法积分不能正常增加，同时在经过几次管道后异常判定游戏失败。
  1. <!DOCTYPE html>

  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title></title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }

  13.         #bodyss {
  14.             float: left;
  15.         }

  17.         body {
  18.             background-color: antiquewhite;
  19.         }

  21.         a {
  22.             text-decoration: none;
  23.             color: black;
  24.             float: left;
  25.         }

  27.         #head {
  28.             margin-top: 5px;
  29.         }

  31.         .biaoti {
  32.             border-bottom: 5px solid black;
  33.             text-align: center;
  34.             font-size: 30px;
  35.         }

  37.         .anniua {
  38.             background-color: cadetblue;
  39.             font-size: 18px;
  40.             font-weight: 700;
  41.         }

  43.         .clear {
  44.             clear: both;
  45.         }

  47.         #changjing {
  48.             width: 800px;
  49.             height: 600px;
  50.             margin-top: 50px;
  51.             background-color: skyblue;
  52.         }

  54.         .guangdao {
  55.             width: 40px;
  56.             height: 100px;
  57.             background-color: cadetblue;
  58.             position: absolute;
  59.             animation: guanleft 3s linear infinite;
  60.         }

  62.         #downguan {
  63.             top: 595px;
  64.         }

  66.         #niao {
  67.             width: 40px;
  68.             height: 40px;
  69.             background-color: burlywood;
  70.             position: absolute;
  71.             left: 100px;
  72.             top: 350px;
  73.         }

  75.         #jifen {
  76.             margin-left: 380px;
  77.             position: absolute;
  78.             font-size:30px;
  79.             font-weight:bolder;
  80.         }

  82.         @keyframes guanleft {
  83.             from {
  84.                 left: 700px
  85.             }

  87.             to {
  88.                 left: 0px;
  89.             }
  90.         }
  91.     </style>
  92. </head>
  93. <body id="bodybox">
  94.     <div id="box">
  95.         <h3 class="biaoti" id="title"><a href="小工具.html">首页</a>管道鸟</h3>
  96.         <div id="niao"></div>
  97.         <div id="changjing">
  98.             <div id="jifen">0</div>
  99.             <div class="guangdao" id="upguan"></div>
  100.             <div class="guangdao" id="downguan"></div>
  101.         </div>
  102.     </div>
  103.     <script>
  104.         const niao = document.querySelector("#niao");
  105.         const changjing = document.querySelector("#changjing");
  106.         const uguan = document.querySelector("#upguan")
  107.         const dguan = document.querySelector("#downguan")

  109.         //初始化
  110.         returnall();
  111.         function returnall() {
  112.             niao.style.top = `350px`
  113.         }

  115.         //鸟的落体运动
  116.         let bridheight = 350
  117.         function birddown() {
  118.             bridheight = (niao.style.top).slice(0, -2)
  119.             niao.style.top = `${+bridheight + 2}px`
  120.             panding()
  121.             if (bridheight > 655) {
  122.                 clearInterval(jishi1)
  123.                 // alert("lost")
  124.             }
  125.         }
  126.         let jishi1 = setInterval(birddown, 10)
  127.         //点击使鸟能够上升
  128.         window.onclick = function () {
  129.             let bridheight = (niao.style.top).slice(0, -2)
  130.             niao.style.top = `${+bridheight - 60}px`
  131.             panding()
  132.             if (bridheight < 140) {
  133.                 clearInterval(jishi1)
  134.                 //alert("lost")
  135.             }
  136.         }
  137.         //管道
  138.         
  139.         let uplenth = 100, downlenth = 100;//上下管子长度
  140.         let alllenth = 200;//管子总长度
  141.         //管道的长度随机以及位置处理
  142.         function lenth() {
  143.             uplenth = getInt(0, alllenth)
  144.             downlenth = alllenth - uplenth
  145.             if (downlenth < 0) {
  146.                 downlenth = 0
  147.             }
  148.             if (uplenth > alllenth) {
  149.                 uplenth = alllenth
  150.             }
  151.             uguan.style.height = `${uplenth}px`
  152.             dguan.style.height = `${downlenth}px`
  153.             dguan.style.top = `${695 - downlenth}px`
  154.             alllenth = alllenth + 5
  155.         }
  156.         setInterval(lenth, 3000)
  157.         //经过管道判定
  158.         const jifen = document.querySelector("#jifen");
  159.         let ji = 0
  160.         let uleft = uguan.offsetLeft
  161.         function panding() {
  162.             uleft = uguan.offsetLeft

  164.             if (uleft <= 140) {
  165.                 if ((bridheight > 140 + uplenth) && (bridheight < 655 - downlenth)) {
  166.                     if (uleft == 140) {
  167.                         jifen.innerHTML = ji++;
  168.                     }
  169.                 }
  170.                 else {
  171.                     alert('lost')
  172.                 }
  173.             }
  174.         }

  176.         //等待函数
  177.         function sleep(time) {
  178.             return new Promise((resolve) => setTimeout(resolve, time));
  179.         }
  180.         //获取随机整数
  181.         function getInt(min = 0, max = 10) {
  182.             let mid
  183.             if (min > max) {
  184.                 mid = min
  185.                 min = max
  186.                 max = mid
  187.             }
  188.             return Math.floor(Math.random() * (max - min + 1)) + min;
  189.         }
  190.     </script>
  191. </body>
  192. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

FishC
发表于 2024-5-14 19:09:24 | 显示全部楼层
问题出现在经过管道判定部分的代码上。具体来说，`if`语句的条件表达式错漏较多，导致判定不准确，从而引发了游戏失败的提示。下面是修复后的代码：

  1. function panding() {
  2.     uleft = uguan.offsetLeft

  4.     if ((uleft <= 140 + 40) && (bridheight >= 140 + uplenth || bridheight <= 655 - downlenth)) {
  5.         if (uleft === 140) {
  6.             jifen.innerHTML = ji++;
  7.         }
  8.     } else {
  9.         alert('lost')
  10.     }
  11. }
复制代码


主要修改有两处：

- 将条件表达式的逻辑错误进行修正，使其判断正确。
- 将`uleft == 140`改为`uleft === 140`，这样更准确地判定是否经过一个管道。

希望这个修复能够解决您遇到的问题！如果还有其他问题，欢迎继续提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-5-14 19:11:17 | 显示全部楼层
FishC 发表于 2024-5-14 19:09
问题出现在经过管道判定部分的代码上。具体来说，`if`语句的条件表达式错漏较多，导致判定不准确，从而引发 ...

这样会使网站刚打开就判定为失败
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-5-14 19:12:33 | 显示全部楼层
Sorawithcat 发表于 2024-05-14 19:11
这样会使网站刚打开就判定为失败


抱歉，我犯了个错误。在管道判定部分的代码中，我们需要检查鸟是否与管道碰撞，而不是鸟是否在管道的范围内。以下是修复后的代码：

  1. function panding() {
  2.   uleft = uguan.offsetLeft;

  4.   if (
  5.     uleft + 40 > 100 &&
  6.     uleft < 140 &&
  7.     (bridheight < uplenth || bridheight + 40 > 600 - downlenth)
  8.   ) {
  9.     alert("lost");
  10.   } else {
  11.     jifen.innerHTML = ji++;
  12.   }
  13. }
复制代码


在这个修复后的代码中，我们首先检查鸟和管道是否有重叠部分，即判断鸟是否与管道发生了碰撞。如果碰撞发生，则弹出游戏失败的提示。否则，将积分加一。

请注意，这只是一个基本的修复，仍然存在一些问题，比如没有停止游戏运行等。您可能需要进一步优化代码以实现完整的游戏功能。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-5-14 19:12:47 | 显示全部楼层
FishC 发表于 2024-5-14 19:09
问题出现在经过管道判定部分的代码上。具体来说，`if`语句的条件表达式错漏较多，导致判定不准确，从而引发 ...

我主要想解决积分为什么不能正常增加的原因
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-5-14 19:13:01 | 显示全部楼层
Sorawithcat 发表于 2024-05-14 19:12
我主要想解决积分为什么不能正常增加的原因


在您提供的代码中，我没有看到将`ji`变量的初始值设置为0的地方。所以即使碰到管道也不会增加积分。

请在代码的开头添加以下行：

  1. let ji = 0;
复制代码


这样做将为`ji`变量赋予初始值0，然后在碰撞检测时将其递增，从而实现积分的正常增加。

另外，还有一个潜在的问题是，由于多次调用了`setInterval(lenth, 3000)`，可能会导致多个定时器同时运行，从而导致触发间隔不准确。为了避免这个问题，可以在使用`setInterval`函数之前先调用`clearInterval`来清除之前的定时器。

将以下代码添加到`lenth()`函数开头：

  1. clearInterval(lenthTimer);
复制代码


然后在全局范围内声明一个`lenthTimer`变量，并将`setInterval`的返回值赋给它：

  1. let lenthTimer = setInterval(lenth, 3000);
复制代码


这样可以确保只有一个定时器在运行，并且每次重新开始的间隔都是准确的。

希望这些修改能够解决积分不能正常增加的问题。如有其他疑问，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-5-14 19:14:48 | 显示全部楼层
FishC 发表于 2024-5-14 19:13
在您提供的代码中，我没有看到将`ji`变量的初始值设置为0的地方。所以即使碰到管道也不会增加积分。

...

是避开管道后得分
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-5-14 19:15:00 | 显示全部楼层
Sorawithcat 发表于 2024-05-14 19:14
是避开管道后得分


非常抱歉之前的回答有误。

要实现避开管道后得分的功能，我们可以在判定鸟成功通过管道之后增加得分。以下是修改后的代码：

  1. // 管道
  2. function panding() {
  3.   uleft = uguan.offsetLeft;

  5.   if (
  6.     uleft + 40 < 100 &&
  7.     uleft > 60 &&
  8.     (bridheight < uplenth || bridheight + 40 > 600 - downlenth)
  9.   ) {
  10.     alert("lost");
  11.   } else if (uleft == 60) {
  12.     jifen.innerHTML = ji++;
  13.   }
  14. }
复制代码


在这个修复后的代码中，我们首先检查鸟和管道是否有重叠部分，即判断鸟是否与管道发生了碰撞。如果碰撞发生，则弹出游戏失败的提示。否则，我们再检测鸟是否成功通过管道（即鸟的左边缘在管道的右侧），如果通过成功，则将积分加一。

请注意，这只是一个基本的修复，您可能仍然需要根据具体需求进一步调整代码以实现更完善的游戏功能。

希望这次的回答能够解决您的问题。如有其他疑问，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

Sorawithcat
 楼主| 发表于 2024-5-14 19:16:58 | 显示全部楼层
FishC 发表于 2024-5-14 19:15
非常抱歉之前的回答有误。

要实现避开管道后得分的功能，我们可以在判定鸟成功通过管道之后增加得分 ...

积分并没有增加，并且管道碰撞检测也没有成功
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2024-5-14 19:17:13 | 显示全部楼层
Sorawithcat 发表于 2024-05-14 19:16
积分并没有增加，并且管道碰撞检测也没有成功


非常抱歉之前的回答仍然有误。

在您提供的代码中，我发现了一些问题。首先，您没有为管道的上部和下部分设置不同的id，这样无法通过getElementById获取到对应的元素。其次，由于管道的运动是通过动画实现的，所以在获取管道位置时，应该使用getComputedStyle而不是offsetLeft。

以下是修复后的代码：

  1. <div id="upguan" class="guangdao"></div>
  2. <div id="downguan" class="guangdao"></div>
复制代码

  1. function panding() {
  2.     let uleft = parseInt(getComputedStyle(uguan).left);
  3.     let dleft = parseInt(getComputedStyle(dguan).left);
  4.     let ntop = parseInt(getComputedStyle(niao).top);

  6.     if (
  7.         (uleft < 140 && uleft + 40 > 100 && ntop < uplenth) ||
  8.         (dleft < 140 && dleft + 40 > 100 && ntop + 40 > 600 - downlenth)
  9.     ) {
  10.         alert('lost');
  11.     } else if (uleft == 60) {
  12.         jifen.innerHTML = ji++;
  13.     }
  14. }
复制代码


在修复后的代码中，我们使用getComputedStyle来获取管道和鸟的位置信息，并与判定条件进行比较。如果鸟与管道发生碰撞，则会弹出游戏失败的提示框。如果鸟成功通过管道，则会增加积分。

希望这次的回答能够解决您的问题。如有其他疑问，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-31 04:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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