球不動的順利

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/