javascript - javascript中的2d碰撞
问题描述
我正在使用 p5.js 制作游戏,在该游戏中存在玩家和障碍。这两个都是简单的矩形。我可以使用简单的碰撞检测来查看它们是否重叠。我想做的是当玩家碰到障碍物时它会像现实生活中的物理一样停止。我目前有一个系统,将障碍物的两侧视为四个不同的障碍物,但它运行不佳,有人可以就我可以做的调整提供任何建议以使其更好地工作。
if(walls[i].x < p1.x + p1.width/2 &&
walls[i].x + 5 > p1.x &&
walls[i].y + walls[i].height + p1.height/2 > p1.y &&
walls[i].y < p1.y + p1.height/2){
p1.x = walls[i].x-p1.width/2
}
if(walls[i].x < p1.x + p1.width/2 &&
walls[i].x + walls[i].width + p1.width/2 > p1.x &&
walls[i].y + p1.height/2 > p1.y &&
walls[i].y < p1.y + p1.height/2){
p1.y = walls[i].y-p1.height/2
}
if(walls[i].x < p1.x + p1.width/2 &&
walls[i].x + walls[i].width + p1.width/2 > p1.x &&
p1.y > walls[i].y + walls[i].height - 5 &&
p1.y - p1.height/2 < walls[i].y + walls[i].height){
p1.y = walls[i].y + walls[i].height + p1.width/2
}
if(p1.x > walls[i].x + walls[i].width - 5 &&
p1.x - p1.width/2 < walls[i].x + walls[i].width &&
walls[i].y + walls[i].height + p1.height/2 > p1.y &&
walls[i].y < p1.y + p1.height/2){
p1.x = walls[i].x + walls[i].width + p1.width/2
}
如果有人想要我,我会发布所有代码,但它有点长
解决方案
这是我使用的包,而不是导入像 matter.js 这样的重量级物理库:
https://github.com/bmoren/p5.collide2D
如果您想在自己的反应中编程而不是遵循 matter.js 的物理估计,那么它非常适合检测碰撞。我主要使用它来避免进行丑陋的手动碰撞计算(尤其是不规则多边形)。
推荐阅读
- css -
Ionic + Angular 中的二维码大小 - python - Tensorflow2.1:训练时不更新 tf.Variable 值
- docker - 如何将 docker 连接到 WSL2 发行版
- wordpress - Fusion Builder 中继器
- reactjs - 如何在 Fluent UI React 中使用网格布局
- java - Spring Boot - 必需的 @RequestBody 类字段
- c# - 使用c#去除带问号的黑色菱形
- c# - 使用 WebClient.UploadFile 将文件上传到 WebDAV 服务器返回 401
- c# - c# - 字段名称中的下划线
- python - 跳过没有属性的元组 Python NLTK