首页 > 解决方案 > 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
        }

如果有人想要我,我会发布所有代码,但它有点长

标签: javascriptp5.js

解决方案


这是我使用的包,而不是导入像 matter.js 这样的重量级物理库:

https://github.com/bmoren/p5.collide2D

如果您想在自己的反应中编程而不是遵循 matter.js 的物理估计,那么它非常适合检测碰撞。我主要使用它来避免进行丑陋的手动碰撞计算(尤其是不规则多边形)。


推荐阅读