一个js判断检测的问题

dilongzuyj 2024-02-06 19:40:11

如题，碰撞检测的问题

在调试时用console.log发现最后一直是true

所以掉不下来

awa，能帮我康康错在哪儿吗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#abo {
  background-color:#65C4FF;
  width:1000px;
  height:500px;
}
#ball {
  background-color:#F1B;
  border-radius:30px;
  width:30px;
  height:30px;
  position:absolute;
  left:20px;
  top:200px;
}
</style>
</head>
<body>
<div id="abo">
<div id="ball"></div>
</div>
<script>
var run;
var ball = document.getElementById("ball");
var area = document.getElementById("abo");
var dy = 1;
var y = 0;
var ditu =
[
[1,1,1],
[1,0,1],
[1,0,1],
[1,0,1],
[1,0,1],
[1,0,0],
[1,1,1],
[1,1,1],
[1,1,1],
[0,1,1],
[0,1,1],
[0,1,1],
[0,1,1],
[0,1,1],
[1,0,1],
[1,1,1],
[1,1,1],
[1,1,1],
[1,1,0],
[1,1,0],
[1,1,0],
[1,1,0],
[0,1,0],
[0,0,0],
[0,0,1],
[0,1,0],
[1,0,0],
[1,0,1],
[1,1,1],
[1,1,1],
[1,1,1],
[1,1,0],
[1,1,1],
[1,1,1],
[1,1,1],
[0,1,1],
[1,1,1],
[1,1,1],
[1,1,1]
];
var canJump = true;
var roads = [];
var onroad = false;
var orset = [];
var ter;
document.documentElement.addEventListener("click", function(){
  if(canJump){
     dy = -1.5;
  }
});
function go(){
  if(dy < 1){
    canJump = false;
    dy += 0.01;
  }else{
    dy = 1;
    setTimeout(function(){canJump = true;}, 205);
  }
  ter.style.left = `${ter.offsetLeft - 1}px`;
  if(ter.offsetLeft >= 1000){
    ter.style.visibility = "hidden";
  }else{
    ter.style.visibility = "visible";
  }
  if(ter.offsetLeft - 20 <= 30){
    clearInterval(run);
    let r = confirm("你胜利了，是否退出游戏");
    if(r){
      close();
    }else{
      tru();
    }
  }
  roads.forEach(gtg =>{
    let rx = gtg.offsetLeft;
    let ry = gtg.offsetTop;
    orset.push(rx - 20 >= -30 && 20 - rx >= -30 && ry - y >= 30 && ry - y  >= -30);
    if(rx >= 1000){
      gtg.style.visibility = "hidden";
    }else if(rx <= 0){
      gtg.remove();
    }else{
      gtg.style.visibility = "visible";
    }
    gtg.style.left = `${rx - 1}px`;
  });
  console.clear();
  console.log(orset);
  orset.forEach(gtg =>{
    if(gtg){
      onroad = true;
    }
  });
  orset = [];
  if(y < 500){
    if(!onroad){
      y += dy;
    }
  }else{
    y = 500;
    clearInterval(run);
    let r = confirm("你失败了，是否退出游戏");
    if(r){
      close();
    }else{
      tru();
    }
  }
  ball.style.top = `${y}px`;
}
function tru(){
  roads.forEach(gthi =>{
    gthi.remove();
  });
  roads = [];
  if(ter != undefined){
    ter.remove();
  }
  ditu.forEach((gth, ine) =>{
    gth.forEach((gthe, index) =>{
      if(gthe >= 1){
        let div = document.createElement("div");
        div.setAttribute("style", `background-color:#FFDE;width:30px;height:30px;position:absolute;top:${(index + 1)* 50 + index * 30 + 125}px;left:${ine * 30 + 20}px;`);
        area.appendChild(div);
        roads.push(div);
      }
    });
    if(ine == ditu.length - 1){
      let div = document.createElement("div");
      div.setAttribute("style", `background-color:#FF7;width:30px;height:500px;position:absolute;top:0px;left:${ine * 30 + 50}px;`);
      area.appendChild(div);
      ter = div;
      div.setAttribute("id", "terminal");
    }
  });
  x = 20;
  y = 250;
  run = setInterval(go, 1);
}
tru();
</script>
</body>
</html>

 

...全文
478 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
飞影铠甲 02-08
  • 打赏
  • 举报
 回复 1

看了一下你的代码，我注意到你的碰撞检测逻辑中似乎存在一些问题。具体来说，在处理orset数组的部分，你的逻辑是检查球是否与任何障碍物在同一水平线上（通过rx - 20 >= -30 && 20 - rx >= -30判断横向位置），并且判断球和障碍物的纵向位置关系（通过ry - y >= 30 && ry - y >= -30），但这里的条件判断似乎有误。

首先，对于ry - y >= 30 && ry - y >= -30这个条件，它的意思应该是判断球和障碍物的垂直距离是否在一定范围内，但是写成这样实际上是一个恒真的判断（因为ry - y >= -30总是为真），这可能是导致你的onroad变量总是为true的原因之一。

正确的碰撞检测逻辑应该考虑球和障碍物的相对位置和大小，通常是判断两者的矩形边界是否重叠。你的球和障碍物都是正方形，可以用更简单的方式来判断。

这里是一些具体的建议来修正你的代码：

碰撞检测条件：你需要检查球的底部是否触碰到障碍物的顶部，并且球的横向位置与障碍物有重叠。考虑到球和障碍物的大小，这个条件应该是类似于rx - ballWidth <= ballX && ballX <= rx + roadWidth && ballBottomY <= ry && ry - ballBottomY <= ballHeight的形式，其中ballWidth、ballHeight是球的尺寸，roadWidth是道路的宽度，ballX和ballBottomY分别是球的横坐标和底部的纵坐标。

重构碰撞检测逻辑：你的orset.push(...)中的条件需要重写，以正确反映球和障碍物之间的空间关系。

调整动画逻辑：动画的实现似乎也有一些问题，比如ter.style.left的调整应该基于当前位置和一定的速度或位移值，而不是简单地每次减去1。

下面是对你的go函数部分碰撞检测逻辑的一个简化示例，以帮助你理解如何修正：

javascript
Copy code
// 假设每个障碍物也是30x30像素
const roadWidth = 30; // 障碍物的宽度
const ballWidth = 30; // 球的宽度
const ballHeight = 30; // 球的高度

roads.forEach(gtg => {
let rx = gtg.offsetLeft;
let ry = gtg.offsetTop;

// 检查球是否在障碍物上方并且横向位置有重叠
let ballBottomY = y + ballHeight; // 球底部的Y坐标
if (rx - ballWidth < x && x < rx + roadWidth && ballBottomY > ry && ballBottomY - ry < ballHeight) {
onroad = true;
}

// 更新障碍物位置逻辑...
});
请注意，上述代码中的变量x和y代表球的左上角坐标，你需要根据实际情况调整这些值和条件判断。此外，这只是一个基础示例，实际的碰撞检测逻辑可能需要根据你的游戏规则进行更详细的调整。

dilongzuyj 02-15
  • 举报
 回复
@飞影铠甲 orset是因为后面的判断会覆盖之前的
dilongzuyj 02-15
  • 举报
 回复
@dilongzuyj 而如果单纯的这样的话，其实，你这个，呵呵，谢谢
太空漫步11 02-07
  • 打赏
  • 举报
 回复

go()函数里面的if条件

if(y < 500){
    if(!onroad){
      y += dy;
    }
  }

!onload是不是要改成onload

dilongzuyj 3天前
  • 举报
 回复
@太空漫步11 不应该，onroad指在轨道上，为什么还会下落呢
r00_a2lBUR 02-07
  • 打赏
  • 举报
 回复

我想这个是游戏网页

dilongzuyj 02-07
  • 举报
 回复
@r00_a2lBUR awa，差不多，游戏引擎，可以编写很多的闯关跑酷游戏
YOLOv4目标检测实战：Flask Web部署
YOLOv4是最近推出的基于深度学习的端到端实时目标检测方法。利用YOLOv4训练完自己的数据集后，如何向大众展示并提供落地的服务呢？  本课程将提供相应的解决方案，具体讲述使用Web应用程序框架Flask进行YOLOv4的Web应用部署。用户可通过客户端浏览器上传图片，经服务器处理后返回图片检测数据并在浏览器中绘制检测结果。  本课程的YOLOv4使用AlexyAB/darknet，在Ubuntu系统上做项目演示，并提供在Windows系统上的部署方式文档。 本项目采取前后端分离的系统架构和开发方式，减少前后端的耦合。课程包括：YOLOv4的Flask部署系统架构、YOLOv4的安装及动态链接库的编译、 Flask的安装、YOLOv4的检测API接口python代码、 Flask的服务程序的python代码、前端html代码、CSS代码、Javascript代码、系统部署演示、生产环境部署建议、Windows系统上部署的区别等。 除本课程外，本人推出了有关YOLOv4目标检测的系列课程。请持续关注该系列的其它视频课程，包括： 《YOLOv4目标检测实战：训练自己的数据集》(Ubuntu版) 《YOLOv4目标检测实战：人脸口罩佩戴识别》(Ubuntu版) 《YOLOv4目标检测实战：中国交通标志识别》(Ubuntu版) 《YOLOv4目标检测：原理与源码解析》(Ubuntu版) 《YOLOv4-tiny目标检测实战：训练自己的数据集》(Ubuntu版) 《Windows版YOLOv4目标检测实战：训练自己的数据集》 《Windows版YOLOv4目标检测实战：人脸口罩佩戴识别》 《Windows版YOLOv4目标检测实战：中国交通标志识别》 《Windows版YOLOv4目标检测：原理与源码解析》 《Windows版YOLOv4-tiny目标检测实战：训练自己的数据集》
JavaScript如何判断一个值是不是数字?
第一种方法：isNaN()使用js自带全局函数isNaN(), isNaN()返回一个Boolean值,如下 :var c="hello"; //字符串isNaN(c); //返回一个false;var c=10; //数字inNaN(c);//返回一个true如果以上c为一个空串或是一个空格，isNaN将把c当作数字0来处理，所以检查不严谨。第二种方法：正则表达式function checkNu...
html js判断设备,一个更容易检测设备的JavaScript库——device.js
decice.js的github地址device.js是一个可以用来检测设备的平台、操作系统和方向的JavaScript库。device.js 通过操作系统(比如 iOS，安卓，黑莓，Windows，Firefox OX)，方向(横屏或者竖屏)，类型(平板或者移动设备)，来为设备添加 CSS Class,并且它还提供了一些Javascript 函数用来判断设备。比如在PC端打开引入了device....
JavaScript 中如何检测一个变量是一个 String 类型？
在 JavaScript 中，有时我们需要检测一个变量的类型，特别是当我们需要确保一个变量是一个字符串类型时。本文将介绍如何使用 JavaScript 来检测一个变量是否为字符串类型，并提供相应的代码示例。
JS判断一个变量是否是数组
Array.isArray() 用于确定传递的值是否是一个 Array，返回 boolean 型；instanceof 判断一个变量是否是数组的实例对象；Array.isArray() 方法封装，Object.prototype.toString.call() 方法判断一个变量数据类型。
灌水乐园

29,635

社区成员

134,993

社区内容

发帖
与我相关
我的任务
社区描述
就等你来冒个泡～
社区管理员
  • 灌水乐园
  • 社区助手
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

版主：

社区助手

 

试试用AI创作助手写篇文章吧

+ 用AI写文章