因此,我正在尝试从头开始制作蛇游戏,这是使用javascript制作游戏的一种做法。我已经在画布内部制作了正方形,现在我正在尝试使其移动。这是我为此编写的代码。
<!DOCTYPE html>
<html>
<body>
<canvas id = "gameCanvas" width="700" height="600" style="border:4px solid black; background-color: yellow"></canvas>
<script type = "text/javascript">
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");
this.x = 0;
this.y = 0;
var snake = ctx.fillRect(this.x,this.y,10,10);
myMovement = function(){
var moveUp = event.keyCode;
if(moveUp == 39){
snake = ctx.fillRect(this.x + 1, this.y,10,10);
}
}
</script>
</body>
</html>
不幸的是,当我按下按钮时,什么也没发生。我的代码有什么问题。
答案 0 :(得分:3)
您的代码有一些问题。
this
引用全局对象的地方使用window
。 myMovement
函数没有附加任何内容,这意味着它没有设置为事件侦听器,因此按下键时需要调用它event
对象定义为参数,因此您的函数会出错,因为没有event
对象可以访问对于 1 ,如果您要跟踪x,y,则可以将它们放置在对象中并从那里访问它们:
var rect={
x:0,
y:0
};
//then when needing to use them access them like rect.x, rect.y
//also fillRect doesn't return anything so no need for "var snake = "
ctx.fillRect(rect.x, rect.y, 10, 10);
对于 2 和 3 ,您可以为功能使用各种key *事件。您可以使用addEventListener附加功能。最后,为您的函数定义一个event
参数,以便您实际上有一个要使用的事件对象:
function myMovement(event) {
var moveUp = event.keyCode;
if(moveUp == 39){
//++rect.x adds one and assigns the new value to rect.x
//and again fillRect doesn't return a value so no need for "snake ="
ctx.fillRect(++rect.x, rect.y,10,10);
}
}
window.addEventListner("keydown",myMovement);
演示
var myCanvas = document.getElementById("gameCanvas");
var ctx = myCanvas.getContext("2d");
var rect = {
x: 0,
y: 0
};
ctx.fillRect(rect.x, rect.y, 10, 10);
window.onkeydown = function(event) {
var moveUp = event.keyCode;
if (moveUp == 39) {
//erase last fill
ctx.clearRect(rect.x, rect.y, 10, 10);
ctx.fillRect(++rect.x, rect.y, 10, 10);
}
}
<canvas id="gameCanvas" width="100%" height="100%" style="border:4px solid black; background-color: yellow"></canvas>
答案 1 :(得分:0)
问题发现:
myMovement = function(){
var moveUp = event.keyCode;
if(moveUp == 39){
snake = ctx.fillRect(this.x + 1, this.y,10,10);
}
}
myMovement 将在不知道代码的情况下触发,并且
//x value just add 1 with previous but not increment gradually, so it should be this.x += 1
ctx.fillRect(this.x + 1, this.y,10,10);
解决方案:
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key == 39) {
snake = ctx.fillRect(this.x += 1, this.y,10,10);
}
}
您可以看到here的键盘键值
onkeyup事件在用户释放键时(在 键盘)。
实际上,有3种不同的选项可以触发按键事件
onkeydown
onpresspress
onkeyup