Question

我在JavaScript HTML5 Canvas中制作游戏。这是一款类似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

有几种方法可以做到这一点。

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

示例：

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

如何在HTML5 Canvas中进行碰撞？

2 个答案: