的JavaScript的KeyDown衝突

Question

我不知道如何解決這個問題： 當我把左+空間一起按下，動畫作品，但是當我把離開壓（不離開它），然後我按空間（一次，保持按左），動畫跳轉，但它不會離開...即使我按其他鍵（重置它，我必須離開所有）動畫停止。有人能解釋我爲什麼這樣，並給我一些實際的解決方案？非常感謝你！這是代碼：

<style> 
#map{ 
    position:relative; 
    height:220px; 
    width:800px; 
} 
#character{ 
    height:100px; 
    width:100px; 
    position:absolute; 
    bottom: 10px; 
    left: 0px; 
    z-index:1; 
} 
</style> 
<div id="map"><div id="character"><img src="images/bart.gif"></div></div> 
<script> 
enableJump = true; 
jump = function(){ 
    if(enableJump){ enableJump = false; 
     salta = function(){ 
      if(flagY){ 
       posY++; 
       if(posY >= 90) flagY = false; 
       jj = document.getElementById('character').style.bottom=posY; 
      } 
      else{ 
       posY--; 
       jj = document.getElementById('character').style.bottom=posY; 
       if(posY < 10){ 
        flagY = true; 
        clearInterval(j); 
        enableJump = true; 
        up = false; 
       } 
      } 
     } 
     j = setInterval(salta,8); 
    } 
} 
up = false; dx = false; 
document.onkeydown = function(evt){ 
    code = evt.keyCode; 
    if(code == 32) up=true; 
    if(code == 39) dx=true; 
    moveCharacter(); 
} 
document.onkeyup = function(evt){ 
    code = evt.keyCode; 
    if(code == 32) up=false; 
    if(code == 39) dx=false; 
} 
posX = 10; posY = 10; flagY = true; var j; 
moveCharacter = function(){ 
    if(dx == true && up == true){ 
     jump(); 
     posX+=10; 
     x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)'; 
     temp = document.getElementById('character').style.left=posX; 
    } 
    else if(dx){ 
     posX+=10; 
     x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)'; 
     temp = document.getElementById('character').style.left=posX; 
    } 
    else if(up){ jump(); } 
} 
</script> 

代碼清潔（不跳，但同樣的問題，一直按住左，按另一個鍵停止，我必須讓它復位）僅

<script> 
var dx = false; 
var posX = 10; 
var posY = 10; 
document.onkeydown = function(evt){ 
    if(evt.keyCode == 39) dx=true; 
    moveCharacter(); 
} 
document.onkeyup = function(evt){ 
    if(evt.keyCode == 39) dx=false; 
} 
moveCharacter = function(){ 
    if(dx){ 
     posX+=10; 
     document.getElementById('character').style.left=posX; 
    } 
} 
</script> 

Answer 1

最後我解決了這個問題： 功能的keydown，KEYUP，movecharacter被刪除。 我說：

var keysDown = {}; 
try { 
    if (window.addEventListener) { 
     window.addEventListener("keydown", function (v) {keysDown[v.keyCode] = true;}, false); 
     window.addEventListener("keyup", function (v) {delete keysDown[v.keyCode];}, false); 
    } else if (document.attachEvent) { 
     document.attachEvent("onkeydown", function (v) {keysDown[v.keyCode] = true;}); 
     document.attachEvent("onkeyup", function (v) {delete keysDown[v.keyCode];}); 
    } else if (window.attachEvent) { 
     window.attachEvent("onkeydown", function (v) {keysDown[v.keyCode] = true;}); 
     window.attachEvent("onkeyup", function (v) {delete keysDown[v.keyCode];}); 
    } else { 
     document.addEventListener("keydown", function (v) {keysDown[v.keyCode] = true;}, false); 
     document.addEventListener("keyup", function (v) {delete keysDown[v.keyCode];}, false); 
    } 
} catch (e) { 
    alert("Keys don't work!\nError: "+e); 
} 
... 
var update = function() { 
    if (38 in keysDown) { // Player holding up 
     .. 
    } 
    if (40 in keysDown) { // Player holding down 
     .. 
    } 
    if (37 in keysDown) { // Player holding left 
     .. 
    } 
    if (39 in keysDown) { // Player holding right 
     .. 
    } 
}; 
setInterval(update,10); 

參考：http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/ http://stackoverflow.com/questions/9507200/why-keydown-listener-doesnt-work-in-ie

它與Chrome瀏覽器，火狐，IE7/8 /怪癖模式（不以文檔模式IE9標準） 感謝您的關注！

Answer 2

的JavaScript在最後一個按鍵上重複​​事件。您需要存儲按下的鍵的狀態，同時聽取​​和keyup事件。

Answer 3

這可能不是回答你的問題，但會幫助你更好地設計你的遊戲邏輯：http://jsfiddle.net/N2UYx/