如何使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