Question

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

我是一个完整的javascript noob，我真的需要一些帮助。

因此，我按下箭头按钮即可移动图像。现在的问题是我的图像可以超出画布而我不希望它...

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

 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

对于调整x或y变量的每个keyStroke，您需要沿着这些行执行某些操作。请注意新的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);
}

HTML5 canvas如何赋予它一个边界？

1 个答案: