球不动的顺利

Question

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

<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/

但是如果左再右，球停一秒钟然后开始向相反的方向移动。任何想法如何解决这个问题？

Answer 1

我怀疑你可能还抱着左箭头键当你按下右箭头键，然后让左箭头的去稍迟。

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

(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) 

你需要跟踪的多少个键被按下/释放，和/或使用的键码的向上事件来检查哪些关键提出了。理想情况下，不是只记录最后一次按键的值，而是跟踪当前关闭的所有按键。

这个版本是完全光滑的，也可以让你斜走：

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); 

Answer 2

只是计算按键/释放。这样，如果你有两个按键，它不会停止。

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/