JavaScript冲突检测不起作用

Question

I am trying to make collision detection work in a JavaScript program I am working in currently, and I can't figure out why it is triggering in such strange coordinates. X 50 Y 199

If any of you good help that would be much appreciated. Here is my code.

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

You are using the wrong keycodes: JavaScript Keycodes . Additionally, you are only running the collision check one time, when you manually call game.update(). You need to run the collision check within the keydown event:

Here is a 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;
    }
};