Javascript 如何在HTML5画布中进行冲突？

我正在用JavaScript HTML5画布制作一个游戏。这是一款2D雷击游戏，但我搞不懂碰撞检测。。。 我已经向我兄弟求助了，但他不知道如何帮助我 在HTML5画布JavaScript中进行冲突检测。 如果有人能帮助我，我将非常感激

这是我的游戏代码：

var g = document.getElementById("canvas").getContext("2d");
setInterval(update, 1000/100);

window.addEventListener("keydown", function(e) {
    keys[e.keyCode] = true;
});
window.addEventListener("keyup", function(e) {
    delete keys[e.keyCode];
});

var keys = [];

var player = {
    x: 0,
    y: 0,
    isFalling: true,
};

var up = true;
var left = true;
var right = true;

var w = 10;
var h = 10;

var block_size = 20;

var m = {};

for(var x = 0; x < w; x++) {
    m[x] = {};
    for(var y = 0; y < w; y++) {
        m[x][y] = "sky";
    }
}

generateWorld();

function isColl(x1,y1,w1,h1,x2,y2,w2,h2) {
    return(x1 <= x2 && x1+w1 >= x2 && y1 <= y2 && y1+h1 >= y2 || x2 <= x1 && x2+w2 >= x1 && y2 <= y1 && y2+h2 >= y1);           
}

function update() {
    g.fillStyle = "rgb(255,255,255)";
    g.fillRect(0,0,200,200);

    var dx = player.x/block_size;
    var dy = player.y/block_size;

    for(var x = 0; x < w; x++) {
        for(var y = 0; y < h; y++) {
            if(m[x][y] == "grass") {
                g.fillStyle = "rgb(0,200,0)";
                g.fillRect(x*20,y*20,20,20);
            } else if(m[x][y] == "sky") {
                g.fillStyle = "rgb(100,100,255)";
                g.fillRect(x*20,y*20,20,20);
            } else if(m[x][y] == "dirt") {
                g.fillStyle = "rgb(100,40,0)";
                g.fillRect(x*20,y*20,20,20);
            } else if(m[x][y] == "grass") {
                g.fillStyle = "rgb(0,0,255)";
                g.fillRect(x*20,y*20,20,20);
            } else {
                g.fillStyle = "rgb(200,50,200)";
                g.fillRect(x*20,y*20,20,20);
                g.fillStyle = "rgb(0,0,0)";
                g.fillText("404", (x*20), (y*20)+15);
            }
        }
    }

    g.fillStyle = "rgb(255,50,0)";
    g.fillRect(player.x,player.y,20,20);

    if(keys[38] && player.y > 0 && up) {
        player.y--;
        player.isFalling = false;
    } else {
        player.isFalling = true;
    }
    if(keys[39] && player.x < 180 && right) {
        player.x++;
    }
    if(keys[37] && player.x > 0 && left) {
        player.x--;
    }   
    if(player.isFalling && player.y < 180) {
        player.y++;
    }
}

var g=document.getElementById（“画布”）.getContext（“2d”）；
设置间隔（更新，1000/100）；
window.addEventListener（“向下键”，函数（e）{
键[e.keyCode]=真；
});
window.addEventListener（“键控”，函数（e）{
删除键[e.keyCode]；
});
var键=[]；
变量播放器={
x:0,，
y:0，
是的，
};
var up=真；
var left=真；
var-right=true；
var w=10；
var h=10；
var块大小=20；
var m={}；
对于（变量x=0；x0&&up）{
player.y--；
player.isFalling=false；
}否则{
player.isFalling=true；
}
if（键[39]&&player.x<180&&right）{
player.x++；
}
if（键[37]&&player.x>0&&left）{
player.x--；
}   
如果（player.isFalling&&player.y<180）{
player.y++；
}
}

---

谢谢

我想这可能会对你有很大帮助：

---

有两种方法可以做到这一点

将所有对象视为球体，并检查对象之间的距离是否低于所述球体的半径

例如：

function checkCollision_Sph(centerX,centerY,radius,centerX_2,centerY_2,radius_2){
distance = Math.sqrt((centerX_2 - centerX)^2 + (centerY_2 - centerY)^2)
if(distance <= (radius+radius_2)){ 
//Distance between spheres is less than the sum of theirs radius, colliding!
}

function checkCollision_Rec(x1,w1,y1,h1,x2,w2,y2,h2){
//x1, x2           = Left
//x1 + w1, x2 + w2 = Right
//y1, y2           = Bottom
//y1 - h1, y2 - h2 = Top


if((y1 < y2)     || 
  ((y1 - h1) > y2) ||
   (x1 > (x2 + w2)) ||
  ((x1 + w1) < x2)
){
//Is not colliding!
}
else{
//Is colliding!
}

功能检查碰撞（centerX，centerY，radius，centerX_2，centerY_2，radius_2）{
距离=数学.sqrt（（centerX_2-centerX）^2+（centerY_2-centerY）^2）
如果（距离我不明白！），我将开始使用JavaScript画布HTML5。我试图使代码适应我的游戏，但没有成功。。。