Question

我正在尝试在我目前正在使用的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);
};

Answer 1

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

Answer 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;
    }
};

JavaScript冲突检测不起作用

2 个答案: