0

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

我是一个完全的 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

4

1 回答 1

2

您需要为调整xory变量的每个 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);
}
于 2013-03-07T22:31:33.070 回答