Javascript 游戏中的碰撞检测

我正在尝试制作一个简单的Javascript和Jquery游戏，在这个游戏中，用户控制一个蓝球，并且必须避免红球。我试图制造一个碰撞检测系统，当一个红色的球被触碰时，它将被清除。这是可行的，但它偶尔会在没有碰撞的情况下检测到碰撞，我不知道为什么。我玩得很开心。顺便说一句，我注释掉了使红球移动的函数，以便更容易测试碰撞。谢谢

以下是迄今为止游戏的javascript：

var keyDown = function() {
$(document).keydown(function(e) {
    switch(e.which) {
        case 37 :
            $("#blue").css("marginLeft","-=40");
            blue.xcordinate = blue.xcordinate - 40;
            check();
            break;
        case 38 :
            $("#blue").css("marginTop","-=40");
            blue.ycordinate = blue.ycordinate - 40;
            check();
            break;
        case 39 :
            $("#blue").css("marginLeft","+=40");
            blue.xcordinate = blue.xcordinate + 40;
            check();
            break;
        case 40 :
            $("#blue").css("marginTop","+=40");
            blue.ycordinate = blue.ycordinate + 40;
            check();
            break;
        };
    });
};

var redX = [0];
var redY = [0];
var loop = 0;
var createRed = function() {
    var randTop = Math.floor(1+Math.random()*600);
    var randLeft = Math.floor(1+Math.random()*1308);
    $("body").append($("<div></div>").addClass("red").css("marginTop",randTop).css("marginLeft",randLeft));
    redX[loop] = randLeft;
    redY[loop] = randTop;
    loop++;
}

var redMovement = function(){
    var redDirection = Math.floor(1 + Math.random() * 4);
    switch(redDirection) {
        case 1 :
            $(".red").animate({"marginLeft": "-=20"});
            break;
        case 2 :
            $(".red").animate({"marginLeft": "+=20"});
            break;
        case 3 :
            $(".red").animate({"marginTop": "-=20"});
            break;
        case 4 :
            $(".red").animate({"marginTop": "+=20"});
    };
};

var blue = {
    xcordinate: 630,
    ycordinate: 320
}

var xMatch = false;
var yMatch = false;

var check = function() {
    for(x = 0; x < redX.length; x++){
        if(((redX[x] - 25) <= blue.xcordinate + 25 && blue.xcordinate + 25 <= (redX[x] + 25)) || ((redX[x] - 25) <= blue.xcordinate - 25 && blue.xcordinate - 25 <= (redX[x] + 25))) {
        xMatch = true;
    };
};
for(y = 0; y < redY.length; y++){
    if(((redY[y] - 25) <= blue.ycordinate + 25 && blue.ycordinate + 25 <= (redY[y] + 25)) || ((redY[y] - 25) <= blue.ycordinate - 25 && blue.ycordinate - 25 <= (redY[y] + 25))) {
        yMatch = true;
    };
};
if (xMatch === true && yMatch === true) {
    $(".red").remove();
};
};

$(document).ready(function() {
    $("#blue").hide()
    $(".red").remove()
    $("#border").hide()
    setInterval(function(){
    $("h5").fadeOut(500).fadeIn(500)
    },1000);
    $("body").keydown(function(e){
        if(e.which == 13) {
            var clayRocks = setInterval(createRed,10000);
            $("h1, h5").remove();
            $("#blue, #border").show();
        };
    });
    keyDown();
    //setInterval(redMovement,500);
});

var keyDown=function（）{
$（文档）.keydown（函数（e）{
开关（e.which）{
案例37：
$（“#蓝”）.css（“marginLeft”，“-=40”）；
blue.xcordio=blue.xcordio-40；
检查（）；
打破
案例38：
$（“#蓝”）.css（“marginTop”，“-=40”）；
blue.ycoordinate=blue.ycoordinate-40；
检查（）；
打破
案例39：
$（“#蓝”）.css（“marginLeft”，“+=40”）；
blue.xcordiom=blue.xcordiom+40；
检查（）；
打破
案例40：
$（“#蓝”）.css（“marginTop”，“+=40”）；
blue.ycoordinate=blue.ycoordinate+40；
检查（）；
打破
};
});
};
var redX=[0]；
var redY=[0]；
var循环=0；
var createRed=函数（）{
var randTop=Math.floor（1+Math.random（）*600）；
var randLeft=Math.floor（1+Math.random（）*1308）；
$（“body”）.append（$（“”）.addClass（“red”）.css（“marginTop”，randTop）.css（“marginLeft”，randLeft））；
redX[loop]=randLeft；
redY[loop]=randTop；
loop++；
}
var redMovement=函数（）{
var redDirection=Math.floor（1+Math.random（）*4）；
开关（红色方向）{
案例1：
$（“.red”）.animate（{“marginLeft”：“-=20”}）；
打破
案例2：
$（“.red”）.animate（{“marginLeft”：“+=20”}）；
打破
案例3：
$（“.red”）.animate（{“marginTop”：“-=20”}）；
打破
案例4：
$（“.red”）.animate（{“marginTop”：“+=20”}）；
};
};
蓝色变量={
坐标：630，
Y坐标：320
}
var xMatch=false；
var-yMatch=false；
var check=函数（）{
对于（x=0；x如果（（（redX[x]-25）测试两个球之间的碰撞很容易（与其他形状相比），则必须计算两个球之间的距离（使用毕达哥拉斯定理），并查看该距离是否小于两个球半径的总和。
仅使用绝对值可能更容易，如下所示：

for (x = 0; x < redX.length; x++) {
    if (Math.abs(redX[x] - blue.xcordinate) <= 25) {
        xMatch = true;
    };
};

for（x=0；xif（Math.abs（redX[x]-blue.xcordiom）我不知道这是否是唯一的问题，但是您的
检查
函数有缺陷。它目前所做的是检查x坐标上是否有与任何红色球的碰撞，以及y坐标上是否有与任何（其他）球的碰撞红色球。它不强制两个碰撞发生在同一个红色球上

顺便说一句，这是一种非常奇怪且不准确的检测球面之间碰撞的方法：自然的方法是检查中心之间的欧几里德距离是否小于半径之和，即

function collides(blueX, blueY, blueR, redX, redY, redR) {
  return Math.sqrt(Math.pow(blueX - redX, 2) + Math.pow(blueY - redY, 2)) < blueR + redR;
}

函数冲突（blueX，blueY，blueR，redX，redY，redR）{
返回Math.sqrt（Math.pow（blueX-redX，2）+Math.pow（blueY-redY，2））