Бала не двигается плавно

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/