使用JavaScript进行冲突检查

我正在创建一个游戏，用户在一个公墓周围闲逛，收集来自不同坟墓的故事。这是一个经典的自上而下的游戏。我正在构建一个脚本，如果用户走进坟墓，他们的移动就会停止，但我在设置冲突时遇到了问题。我正在使用jQuery。以下是我到目前为止的情况：

var position = -1;
var $char = $('#char');
var keyCode = null;
var fired = false;
var $stones = $('.stones div');
var collision = null;

document.onkeydown = function(e) {

keyCode = e.which || e.keyCode;

if (!fired) {
    position = -1;
    fired = true; 
    switch (keyCode) {
        case 38: position = 0; break; //up
        case 40: position = 1; break; //down
        case 37: position = 2; break; //left
        case 39: position = 3; break; //right
    }

    walking();
    stepping = setInterval(walking,125);
}

};

document.onkeyup = function(e) {
  //standing
  clearInterval(stepping);
  stepping = 0;
  fired = false;
};


function walking() {

$stones.each(function() { //check all the stones...

    collision = collision($(this), $char, position); ...for collisions

    if (collision) { //if any, then break loop
        return false; 
    }

});

if (!collision) { //check if there was a collision
   //if no collision, keep walking x direction
}


function collision($el, $charEl, position) {

var $el = $el[0].getBoundingClientRect();
var $charEl = $charEl[0].getBoundingClientRect();

var elBottom = parseInt($el.bottom);
var elRight = parseInt($el.right);
var elLeft = parseInt($el.left);
var elTop = parseInt($el.top);

var charBottom = parseInt($charEl.bottom);
var charRight = parseInt($charEl.right);
var charLeft = parseInt($charEl.left);
var charTop = parseInt($charEl.top);

//this is where I'm stuck

}
}

我试过各种不同的代码，但似乎都不管用。我一直有一个问题，如果我向前走，然后撞到墓碑，我转身，我被卡住了。下面是我的意思的示例代码：

if (position == 0 && 
    !(elTop > charBottom ||
    elBottom < charTop ||
    elRight < charLeft + 1 ||
    elLeft > charRight - 1)
   ) {
    return true; 
}


if (position == 1 && 
    !(elTop > charBottom ||
    elBottom < charTop ||
    elRight < charLeft + 1 ||
    elLeft > charRight - 1)
   ) {
    return true; 
}

return false;

if（位置==0&&
！（elTop>charBottom||
埃尔博托姆charRight-1）
) {
返回true；
}
如果（位置==1&&
！（elTop>charBottom||
埃尔博托姆charRight-1）
) {
返回true；
}
返回false；

我已经看过了，到目前为止我没有任何运气。有人能帮我解释一下逻辑或者提供一个我需要做什么的示例代码吗

---

多谢各位

你的比赛看起来不错，伙计

我最近写了一些碰撞检测，遇到了完全相同的问题。问题是，一旦你的坐标在碰撞的情况下是真的，那么在任何其他运动中它们都是真的

---

在更改角色坐标之前，您需要存储角色所在的上一个位置，并恢复到该位置或执行检查。

多亏了stwitz关于idea的介绍，以及此脚本，我找到了以下解决方案：

var位置=-1；
var$char=$（“#char”）；
var-keyCode=null；
var=false；
var步长=32；
变量$stones=$（'.stones div'）；
//新的
var cancelTop=cancelRight=cancelLeft=cancelBottom=false；
var charEl=$char[0]。getBoundingClientRect（）；
var charLeft=parseInt（charEl.left）；
var charRight=parseInt（charEl.right）；
var charTop=parseInt（charEl.top）；
var charBottom=parseInt（charEl.bottom）；
函数行走（）{
如果（位置==0&&！取消顶部）{
//如果向上移动&可以安全地向上移动
}else if（位置==1&&！取消底部）{
//如果向下移动&向下移动是否安全
}else if（位置==2&&！取消EFT）{
//如果向左移动并且向左移动是安全的
}else if（位置==3&&！取消右侧）{
//如果向右移动并且向右移动是安全的
}
cancelTop=cancelRight=canceleft=cancelBottom=false；//在检查之前将所有标记为安全
$stones.each（函数（）{
碰撞（$（this））；
});
}
document.onkeydown=函数（e）{
keyCode=e.which | | e.keyCode；
如果（！发射）{
位置=-1；
激发=真；
开关（钥匙代码）{
案例38:position=0；break；//up
案例40:position=1；break；//故障
案例37:position=2；break；//左
案例39:position=3；break；//右侧
}
行走（）；
步进=设定间隔（步行，125）；
}
};
document.onkeyup=函数（e）{
//站立
间隙（步进）；
步进=0；
解雇=假；
};
函数冲突（$el）{
var el=$el[0]。getBoundingClientRect（）；
var elBottom=parseInt（el.bottom）；
var elRight=parseInt（el.right）；
var elLeft=parseInt（左立面）；
var elTop=parseInt（el.top）；
如果（
（elRight==charLeft）&&
（elBottom-stepSize>=charBottom和&charBottom>=elTop+stepSize）
) { 
cancelLeft=true；
返回true；
}
如果（
（elLeft==charRight）&&
（elBottom-stepSize>=charBottom和&charBottom>=elTop+stepSize）
) { 
取消右=真；
返回true；
}
如果（
（elTop+步长>charBottom）和
（埃尔托普·查勒左）
) 
{ 
cancelBottom=true；
返回true；
}
如果（
（elBottom-步长<图表）和
（埃尔博托姆>=charTop）和
（elLeft右）
) 
{ 
cancelTop=true；
返回true；
}
返回false；
}

var position = -1;
var $char = $('#char');
var keyCode = null;
var fired = false;
var stepSize = 32;
var $stones = $('.stones div');

//new
var cancelTop = cancelRight = cancelLeft = cancelBottom = false;

var charEl = $char[0].getBoundingClientRect();
var charLeft = parseInt(charEl.left);
var charRight = parseInt(charEl.right);
var charTop = parseInt(charEl.top);
var charBottom = parseInt(charEl.bottom);

function walking() {

if (position == 0 && !cancelTop) {
    //if moving up & is safe to move up
} else if (position == 1 && !cancelBottom) {
    //if moving down & is safe to move down
} else if (position == 2 && !cancelLeft) {
   //if moving left and is safe to move left
} else if (position == 3 && !cancelRight) {
   //if moving right and is safe to move right
}

cancelTop = cancelRight = cancelLeft = cancelBottom = false; //mark all as safe until we check

$stones.each(function() {

    collision($(this));

});

}

document.onkeydown = function(e) {

keyCode = e.which || e.keyCode;

if (!fired) {
    position = -1;
    fired = true; 
    switch (keyCode) {
        case 38: position = 0; break; //up
        case 40: position = 1; break; //down
        case 37: position = 2; break; //left
        case 39: position = 3; break; //right
    }

    walking();
    stepping = setInterval(walking,125);
}

};

document.onkeyup = function(e) {
  //standing
  clearInterval(stepping);
  stepping = 0;
  fired = false;
};


function collision($el) {

var el = $el[0].getBoundingClientRect();

var elBottom = parseInt(el.bottom);
var elRight = parseInt(el.right);
var elLeft = parseInt(el.left);
var elTop = parseInt(el.top);

if ( 
    (elRight == charLeft) &&
    (elBottom - stepSize >= charBottom && charBottom >= elTop + stepSize)
    ) { 
    cancelLeft = true;
    return true;  
}

if ( 
    (elLeft == charRight) &&
    (elBottom - stepSize >= charBottom && charBottom >= elTop + stepSize)
    ) { 
    cancelRight = true;
    return true;  
}

if ( 
    (elTop + stepSize > charBottom) && 
    (elTop <= charBottom) && 
    (elLeft < charRight) && 
    (elRight > charLeft) 
    ) 
{ 
    cancelBottom = true;
    return true; 
}

if ( 
    (elBottom - stepSize < charTop) && 
    (elBottom >= charTop) && 
    (elLeft < charRight) && 
    (elRight > charLeft) 
    ) 
{ 
    cancelTop = true;
    return true; 
}

return false;
}