HTML5画布如何给它一个边界？

Question

为了学校作业，我正在制作风筝游戏..

我是一个 JavaScript 新手，我真的需要一些帮助。

所以我现在可以通过按箭头按钮来移动图像。 现在的问题是我的图像可以超出画布，我不希望它..

我真的不知道如何做到这一点，我尝试了多个教程，但它似乎不起作用。

 window.onload = function() {

 var canvas = document.getElementById("game");
 window.addEventListener('keydown', keyDown, true);

 var context = canvas.getContext("2d");
 var kite = document.getElementById("kite");

 var kite = new Image ();
 kite.src = "kite.png";

 context.drawImage(kite, 250, 300, 300, 150);

 var x = 250;
 var y = 300;

 function keyDown(e){

//  up
    if (e.keyCode == 38) {
        clearCanvas();
        y = y - 3;
        context.drawImage(kite, x, y, 300, 150);    
    }

//  down
    if (e.keyCode == 40) {
        clearCanvas();
        y = y + 3;
        context.drawImage(kite, x, y, 300, 150);
    }

//  left
    if (e.keyCode == 37) {
        clearCanvas();
        x = x - 10;
        context.drawImage(kite, x, y, 300, 150);
    }

//  right
    if (e.keyCode == 39) {
        clearCanvas();
        x = x + 10;
        context.drawImage(kite, x, y, 300, 150);
    }

}

function clearCanvas() {
    canvas.width = canvas.width;
}



};

如果有人能帮我解决这个问题，我将不胜感激：D

Answer 1

您需要为每个 keyStroke 执行这些操作，在其中调整 x 或 y 变量。注意新的if 声明：

//  up
if (e.keyCode == 38) {
    clearCanvas();
    if (y - 3 > 0) {
        y = y - 3;
    }
    context.drawImage(kite, x, y, 300, 150);    
}

//  down
if (e.keyCode == 40) {
    clearCanvas();
    if (y + 3 + 150 < canvas.height) {
        y = y + 3;
    }
    context.drawImage(kite, x, y, 300, 150);
}

//  left
if (e.keyCode == 37) {
    clearCanvas();
    if (x - 10 > 0) {
        x = x - 10;
    }
    context.drawImage(kite, x, y, 300, 150);
}

//  right
if (e.keyCode == 39) {
    clearCanvas();
    if (x + 10 + 300 < canvas.width) {
        x = x + 10;
    }
    context.drawImage(kite, x, y, 300, 150);
}