Javascript 解决两个二维元素的碰撞

我试着让我的玩家在另一个玩家周围移动，在X轴上看起来不错，但Y轴不工作。就像我想让它检测“边界”，就像它是一个块，我想防止玩家重叠的敌人

if ((87 in keysDown) && player.y > 0) {
  if ((player.x < player2.x -50 || player.x > player2.x+50))
    if( player.y < player2.y+50){
      player.y -= player.speed;
    }
}

if（（87英寸向下键）和&player.y>0）{
如果（（player.xplayer2.x+50））
if（player.y

2D无逃生 防止元素移动到地图/舞台之外

 // After new x and y are set:
 this.x = Math.min(Math.max(0,this.x), Stage.w-this.w);
 this.y = Math.min(Math.max(0,this.y), Stage.h-this.h);
 // Where `this` is the moving element and `Stage` is the game area.

二维碰撞检测 二维解析碰撞 如果您不希望被动碰撞检测，而是希望解决移动播放器的碰撞：

function resolveCollision(A, B) {
    // get the vectors to check against
    var vX = (A.x + (A.w / 2))  - (B.x + (B.w / 2)),
        vY = (A.y + (A.h / 2)) - (B.y + (B.h / 2)),
        // Half widths and half heights of the objects
        ww2 = (A.w / 2) + (B.w / 2),
        hh2 = (A.h / 2) + (B.h / 2),
        colDir = "";

    // if the x and y vector are less than the half width or half height,
    // they we must be inside the object, causing a collision
    if (Math.abs(vX) < ww2 && Math.abs(vY) < hh2) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = ww2 - Math.abs(vX),
            oY = hh2 - Math.abs(vY);
        if (oX >= oY) {
            if (vY > 0) {
                colDir = "TOP";
                A.y += oY;
            } else {
                colDir = "BOTTOM";
                A.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "LEFT";
                A.x += oX;
            } else {
                colDir = "RIGHT";
                A.x -= oX;
            }
        }
    }
    return colDir; // If you need info of the side that collided
}

或：

行动中的例子：

//碰撞布尔值（用于被动碰撞检测）
函数冲突（A，B）{
返回！（（A.y+A.h）（B.y+B.h））|（A.x+A.w）（B.x+B.w））；
}
//解决冲突
函数解析冲突（A，B）{
//获取要检查的向量
var vX=（A.x+（A.w/2））-（B.x+（B.w/2）），
vY=（A.y+（A.h/2））-（B.y+（B.h/2）），
//对象的一半宽度和一半高度
ww2=（A.w/2）+（B.w/2），
hh2=（A.h/2）+（B.h/2），
colDir=“”；
//如果x和y向量小于半宽或半高，
//它们一定在物体内部，造成碰撞
如果（数学abs（vX）=oY）{
如果（vY>0）{
colDir=“TOP”；
A.y+=oY；
}否则{
colDir=“底部”；
A.y-=oY；
}
}否则{
如果（vX>0）{
colDir=“左”；
A.x+=oX；
}否则{
colDir=“右”；
A.x-=牛；
}
}
}
返回colDir；
}
//元素
var cvs=document.createElement（“画布”），
ctx=cvs.getContext（“2d”），
EL_collisionInfo=document.getElementById（“collisionInfo”）；
//博弈变量
var阶段={
w:300，
h:200
},
键={}，
玩家={
x:0,，
y:0，
w:30，
h:30，
颜色：“蓝色”，
速度：4，
move:function（）{
如果（键[65]）{//A
这个.x-=这个速度；
} 
如果（键[87]）{//W
这个.y-=这个速度；
}
如果（键[68]）{//D
这个.x+=这个速度；
} 
如果（键[83]）{//S
这个.y+=这个速度；
}
//一般碰撞/接触
var orgColor=“”；
如果（碰撞（这个，敌人））{
this.color=“red”；
}否则{//不会发生碰撞
this.color=“蓝色”；
}
//解决冲突
var coll=解决冲突（这是敌人）；
//并在屏幕上写入信息
EL_collisionInfo.innerHTML=coll；
//防止退出舞台
this.x=Math.min（Math.max（0，this.x），Stage.w-this.w）；
this.y=Math.min（Math.max（0，this.y），Stage.h-this.h）；
}
},
敌人={
x:130，
y:80，
w:50，
h:50，
颜色：“红色”
};
//初始化画布和大小
文件.正文.附件（cvs）；
cvs.width=Stage.w；
cvs.height=Stage.h；
功能画布绘制（el）{
ctx.beginPath（）；
ctx.fillStyle=el.color；
ctx.fillRect（el.x，el.y，el.w，el.h）；
}
// /////
//键盘侦听器
文件.添加的文件列表器（“键控”，功能（e）{
键[e.which]=1；
}，假）；
文件.附录列表（“键控”，功能（e）{
删除键[e.which]；
}，假）；
// /////
//引擎
（函数引擎（）{
Player.move（）；
//清除画布并绘制
ctx.clearRect（0，0，cvs.width，cvs.height）；
拉票（球员）；
拉票（敌人）；
window.requestAnimationFrame（引擎）；
}());
*{框大小：边框框；-webkit框大小：边框框；}
html，正文{高度：100%；边距：0；字体：16px/20px无衬线；}
画布{背景：#eee；}
#碰撞信息{位置：绝对；}
WASD移动

我们只是普通的普通人，对你的问题一无所知。请解释您的问题所指的
玩家在其他玩家周围移动的意思，所提供的代码不够清楚。你有什么问题？想要的行为是什么？阅读并请尝试制作一个。我有一个画布游戏，我设置了两个玩家，我不希望他们相互重叠/通过，所以我尝试创建一种方法来检测边界，然后你在它周围移动。这叫做碰撞检测，而不是“移动”。你见过如何在2d certesian平面上计算碰撞检测吗？这里有很多例子。你没有考虑你的球员人数。还有
player.y
。。。。假设玩家2在地图的底部。P1Y将始终
<比
P2Y的位置…另外，当P1碰到P2时应该怎么做？停止？注：上述公式可进一步改进性能。
if( collision(Player,Enemy) ) {
   // explodePlayer(); // or whatever, they collided!
}

function resolveCollision(A, B) {
    // get the vectors to check against
    var vX = (A.x + (A.w / 2))  - (B.x + (B.w / 2)),
        vY = (A.y + (A.h / 2)) - (B.y + (B.h / 2)),
        // Half widths and half heights of the objects
        ww2 = (A.w / 2) + (B.w / 2),
        hh2 = (A.h / 2) + (B.h / 2),
        colDir = "";

    // if the x and y vector are less than the half width or half height,
    // they we must be inside the object, causing a collision
    if (Math.abs(vX) < ww2 && Math.abs(vY) < hh2) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = ww2 - Math.abs(vX),
            oY = hh2 - Math.abs(vY);
        if (oX >= oY) {
            if (vY > 0) {
                colDir = "TOP";
                A.y += oY;
            } else {
                colDir = "BOTTOM";
                A.y -= oY;
            }
        } else {
            if (vX > 0) {
                colDir = "LEFT";
                A.x += oX;
            } else {
                colDir = "RIGHT";
                A.x -= oX;
            }
        }
    }
    return colDir; // If you need info of the side that collided
}

resolveCollision(Player, Enemy);

var res = resolveCollision(Player, Enemy);
console.log( res ); // "TOP", "BOTTOM"... (the side that collided uppercase)