javascript - HTML5 canvas如何给它一个边界？

Question

对于学校作业，我正在制作一个风筝游戏..

我是个 javascript 菜鸟，我真的需要一些帮助。

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

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

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