JavaScript 碰撞检测不起作用答案

【问题标题】：JavaScript collision detection not workingJavaScript 碰撞检测不起作用
【发布时间】：2014-01-28 12:28:50
【问题描述】：

我正在尝试在我目前正在使用的 JavaScript 程序中进行碰撞检测，但我无法弄清楚为什么它会在如此奇怪的坐标中触发。 X 50 Y 199

如果你们有任何好的帮助，那将不胜感激。这是我的代码。

var game = {};
game.fps = 50;
game.playerX = 50;
game.playerY = 50;


game.draw = function () {

    c = document.getElementById('canvas');
    ctx = c.getContext("2d");
    clearCanvas();
    //PLAYER
    ctx.fillStyle = "blue";
    ctx.fillRect(game.playerX, game.playerY, 50, 50);
    //ENEMY 
    ctx.fillStyle = "green";
    ctx.fillRect(200, 200, 50, 50);

    //Coords 
    ctx.font = "20px Arial";
    ctx.fillStyle = "red";
    ctx.fillText(game.playerX, 400, 480);
    ctx.fillText(game.playerY, 450, 480);

};

game.update = function () {    
    document.onkeydown = function () {
        switch (window.event.keyCode) {
            case 87:
                //up
                --game.playerY;
                break;
            case 83:
                //down
                ++game.playerY;
                break;
            case 65:
                //left
                --game.playerX;
                break;
            case 68:
                //right
                ++game.playerX;
                break;
        }
    };
    //COLLISION DETECTION 
    if (game.playerX <= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) {
        alert("it worked!");
        game.playerX = 400;

    }
    //END OF COLLISION DETECTION    
};

game.run = function () {
    game.update();
    game.draw();
};

game.start = function () {
    game._intervalId = setInterval(game.run, 1000 / game.fps);
};

game.stop = function () {
    clearInterval(game._intervalId);
};

【问题讨论】：

标签： javascript html canvas collision

【解决方案1】：

根据您在 Y 轴上的 if 语句，我会说您想要 if(game.playerX >= 200 而不是 if(game.playerX <= 200。现在您正在检查 playerX 是否既小于 200 又小于 250，其中 50 满足。

【讨论】：

【解决方案2】：

您使用了错误的键码：JavaScript Keycodes。此外，当您手动调用 game.update() 时，您只会运行一次碰撞检查。您需要在 keydown 事件中运行碰撞检查：

这是Fiddle

document.onkeydown = function (e) {
    switch (e.keyCode) {
        case 38:
            //up
            console.log('up');
            --game.playerY;
            break;
        case 40:
            //down
            ++game.playerY;
            break;
        case 37:
            //left
            --game.playerX;
            break;
        case 39:
            //right
            ++game.playerX;
            break;
    }

    console.log(game.playerX + ', ' + game.playerY);

    //COLLISION DETECTION 
    if (game.playerX >= 200 && game.playerX <= 250 && game.playerY >= 200 && game.playerY <= 250) {
        alert("it worked!");
        game.playerX = 400;
    }
};

【讨论】：