0
我正在做一个风筝游戏..HTML5 canvas如何给它一个边界?
我是一个总的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
感谢它的工作原理! 但只为左和顶部,它仍然从右侧和底部的画布出来,我填充的宽度和高度就像你的例子,但它似乎并不工作。左侧确实有效! – 2013-03-07 22:41:41
查看我对右侧和底部if语句所作的编辑。我添加了正在绘制的图像的宽度和高度(因为x/y代表图像左上角的位置) – 2013-03-08 03:29:51
呃,该死的移动浏览器将我的< and >更改为lt和gt – 2013-03-08 03:31:42