我不希望我的 "player" 离开屏幕，如何防止这种情况发生？

Question

这是我的JavaScript。在底部附近，您将看到一个用于 keydown 事件的 addEventListener。在那个函数中，keydown 代码就在那里。该代码包含在 if 函数中，if 函数中的内容用于阻止玩家离开 canvas。

function initCanvas() {
    var canvas = document.getElementById('my_canvas');
    var ctx = canvas.getContext('2d');
    var cW = ctx.canvas.width;
    var cH = ctx.canvas.height;
    var dist = 10;

    function Player() {
        this.x = 0, this.y = 0, this.w = 50, this.h = 50;

        this.render = function() {
            ctx.fillStyle = "orange";
            ctx.fillRect(this.x, this.y, this.w, this.h);
        }
    }

    var player = new Player();
    player.x = 100;
    player.y = 225;

    function animate() {
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        player.render();
     }
    var animateInterval = setInterval(animate, 30);

    document.addEventListener('keydown', function(event) {
        var key_press = String.fromCharCode(event.keyCode);
        if (//I don't know what should go here) {
            if (key_press == "W") {
                player.y -= dist;
            } else if (key_press == "S") {
                player.y += dist;
            } else if (key_press == "A") {
                player.x -= dist;
            } else if (key_press == "D") {
                player.x += dist;
            }
        }
    });

}

window.onload = initCanvas();

Answer 1

document.addEventListener('keydown', function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    if (//I don't know what should go here) {
        if (key_press == "W" && player.y >= dist) {
            player.y -= dist;
        } else if (key_press == "S" && player.y <= (cH - dist)) {
            player.y += dist;
        } else if (key_press == "A" && player.x >= dist) {
            player.x -= dist;
        } else if (key_press == "D" && player.x < (cW - dist)) {
            player.x += dist;
        }
    }
});

额外的检查将检查他不在 canvas 的边缘，也不在距离边缘 < dist 的距离。 假设左上角为(0,0).

请注意，当用户距离 < dist 一定距离时，将用户移动到 canvas 的边缘会更好。我会把这个留给你。

我不希望我的 "player" 离开屏幕，如何防止这种情况发生？

I don't want my "player" to leave the screen, how do I prevent this?

html

javascript

canvas

keydown