Обнаружение столкновения JavaScript не работает

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

На основании вашего оператора if по оси Y я бы сказал, что вы хотите if(game.playerX >= 200 скорее, чем if(game.playerX <= 200, Прямо сейчас вы проверяете, playerX и меньше 200, и меньше 250, что удовлетворяет 50.

Answer 2

Вы используете неправильные коды клавиш: коды клавиш JavaScript. Кроме того, вы запускаете проверку столкновений только один раз, когда вы вручную вызываете game.update(). Вам необходимо запустить проверку столкновения в событии keydown:

Вот скрипка

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