2

我想用箭头做一个简单的移动球，所以我做了：

<canvas id="canvas" width="300" height="300" ></canvas>

<script>
var x=120;
var y=120;
var key,pos=0;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function()
{
    ctx.drawImage(img,x,y);
}
img.src="http://www.infogridpacific.com/blog/i/ball_online.png";

document.onkeydown=function(e)
{
    pos=1;
    key=window.event?e.keyCode:e.which;
}
document.onkeyup=function(e){pos=0;}

setInterval(function()
{
    if(pos==0)return;
    if(key==37)x-=2;
    if(key==38)y-=2;
    if(key==39)x+=2;
    if(key==40)y+=2;
    canvas.width=canvas.width;
    ctx.drawImage(img,x,y);
},5);
</script>

http://jsfiddle.net/mageek/ny3uz/6/

但是如果你先从左到右，球会停一秒钟，然后开始向相反的方向移动。知道如何解决这个问题吗？

4

2 回答 2

3

我怀疑当您按下右箭头键时您可能仍在按住左箭头键，然后稍晚放开左箭头。

所以事件的顺序是这样的：

(you press left)             key=37 pos=1
(ball moves left for a bit)
(you press right)            key=39 pos=1
(you let go of left)         key=39 pos=0
(the ball stops moving)
(1s later the OS autorepeat kicks in) key=39 pos=1
(ball moves right)

您需要跟踪按下/释放了多少键，和/或使用 up 事件中的键码来检查哪个键被触发。理想情况下，不仅仅是记录最后一次按键的值，还要跟踪当前按下的所有键。

这个版本非常流畅，还可以让您沿对角线移动：

var x=120;
var y=120;
var key = [];

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function()
{
    ctx.drawImage(img,x,y);
}
img.src="http://www.infogridpacific.com/blog/i/ball_online.png";

document.onkeydown=function(e)
{
    code=window.event?e.keyCode:e.which;
    key[code]=1;
}
document.onkeyup=function(e)
{
    code=window.event?e.keyCode:e.which;
    key[code]=0;
}

setInterval(function()
{
    if(key[37])x-=2;
    if(key[38])y-=2;
    if(key[39])x+=2;
    if(key[40])y+=2;
    canvas.width=canvas.width;
    ctx.drawImage(img,x,y);
},5);
于 2013-06-27T21:06:47.037 回答
1

只需计算按键/释放。这样，如果您按下两个键，它就不会停止。

var x=120;
var y=120;
var key,pos=0;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,x,y);
}
img.src="http://www.infogridpacific.com/blog/i/ball_online.png";

document.onkeydown=function(e){
pos++;
key=window.event?e.keyCode:e.which;
}
document.onkeyup=function(e){pos--}

setInterval(function(){
if(pos==0)return;
if(key==37)x-=2;
if(key==38)y-=2;
if(key==39)x+=2;
if(key==40)y+=2;
canvas.width=canvas.width;
ctx.drawImage(img,x,y);
},5);

http://jsfiddle.net/stMh9/

于 2013-06-27T21:04:47.183 回答