Question

我正在尝试制作一个简单的Javascript和Jquery游戏，其中用户控制蓝色球并且必须避免红球。我试图建立一个碰撞检测系统，当一个人被触摸时它会摆脱红球。这有效但是当没有碰撞时偶尔会发现碰撞，我无法弄清楚原因。我做了一个游戏的jsfiddle。顺便说一句，我评论了使红球移动的功能，以便更容易测试碰撞。感谢

https://jsfiddle.net/clayjames/bxcffwty/4/

到目前为止，这是游戏的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);
});

Answer 1

测试2个球之间的碰撞很容易（与其他形状相比），你必须计算2个球的距离（使用毕达哥拉斯）然后看看这个距离是否小于2个球的半径之和

Answer 2

使用绝对值可能更容易，如下所示：

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

Demo

Answer 3

我不知道这是否是唯一的问题，但您的check功能存在缺陷。它目前所做的是检查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;
}

游戏中的碰撞检测

3 个答案: