jQuery：小さな奇妙なprob。イベントのkeydownと同時に

Question

jQuery/javascriptではあまり良くありませんが、小さなゲームを作成しようとしています。私はすべてのdivの周りのimgを移動しようとしていますhttp://jsfiddle.net/zDer5/

：ここ

はjsfiddleリンクです。私は成功裏にすべての方向にそれを移動することができますまた対角線移動のための矢印キーまたは2つを保持することによって斜めに。

しかし、問題は、右に移動するには右矢印キーを押したままにし、上矢印キーを押したままにすると、私はそれが右に動くことを期待した動き停止。

それはすべての場合に起こります..左を保持し、押し上げて解放します...動きを止めます。

秒：1秒間画像が停止すると、方向が変わります。滑らかな動きのためのガイド。私もここに

var keys = {}; 

$('body').keydown(function(event){ 

    keys[event.which] = true; 
    moveDot(); 
}); 

$(document).keyup(function (event) { 
    delete keys[event.which]; 
    moveDot(); 
}); 

function moveDot(){ 


      var html = ''; 
       for (var i in keys) { 
        if (!keys.hasOwnProperty(i)) continue; 
         html += '<p>' + i + '</p>'; 

        if(i == '37'){ 
         var left = $('#dot').css("left"); 
         left = parseInt(left.match(/\d+/)); 
         left = left-3; 
         $('#dot').css({ 'left': left + 'px' }); 
        } 
        if(i == '38'){ 
         var top = $('#dot').css("top"); 
         top = parseInt(top.match(/\d+/)); 
         top = top-3; 
         $('#dot').css({ 'top': top + 'px' }); 
        } 
        if(i == '39'){ 
         var left2 = $('#dot').css("left"); 
         left2 = parseInt(left2.match(/\d+/)); 
         left2 = left2+3; 
         $('#dot').css({ 'left': left2 + 'px' }); 
        } 
        if(i == '40'){ 
         var top2 = $('#dot').css("top"); 
         top2 = parseInt(top2.match(/\d+/)); 
         top2 = top2+3; 
         $('#dot').css({ 'top': top2 + 'px' }); 
        }  

       } 
       $('#out').html(html); 
} 

<div id="game-panel"> 
    <img src="http://203.157.202.2/photos2009/Pic/thumbnails/black_dot_400x400.jpg" id="dot" /> 
</div> 

#game-panel{ position: relative; border: 2px solid #ccc; height: 200px; } 
    #game-panel img{ position:absolute; } 
    #dot{ left:100px; top:100px; } 

Answer 1

同じコードを貼り付けていますhttp://jsfiddle.net/zDer5/

あなたの問題はあなたがkeyUpイベントであなたの更新メカニズムを破ることです：

はここ

がjsfiddleリンクです、ありがとうございました。インターバルを使用してリフレッシュループを制御すると、うまく動作します。この更新されたフィドルを参照してくださいhttp://jsfiddle.net/zDer5/1/

私は実際にこのチュートリアルをお勧めします：http://www.html5rocks.com/en/tutorials/canvas/notearsgame/あなたのニーズに完全に合っているようですが、若干異なるアプローチが必要です。