如何使HTML5 Canvas发生碰撞？

Question

我在JavaScript HTML5画布中制作游戏。这是一个类似2D Minecraft的游戏，但我无法弄清楚碰撞检测... 我已经问了我的兄弟，但他不知道如何在HTML5 Canvas 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++; 
    } 
} 

谢谢！

Answer 1

我想这可能会帮助你很多： https://msdn.microsoft.com/en-us/library/gg589497%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

Answer 2

有几个这样做的方法。

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

实施例：

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! 
} 

我找到了一个不错的网页，也有类似的例子，可以帮助你弄明白：我入门Basic collision detection in 2d