Javascript jQuery：一个奇怪的小问题。事件键控同步

jQuery/javascript不太好，但正在尝试创建一个小游戏

以下是JSFIDLE链接：

我试着在div周围移动img。我能够成功地在所有方向上移动img，也可以通过按住一个或两个箭头键进行对角移动来对角移动img

但问题是，如果我按住向右箭头键向右移动，如果我按下向上键以对角向上移动，现在如果我松开向上键（仍然按住向右箭头键）。。。移动停止，我希望它向右移动

这在所有情况下都会发生。。按住左键，向上按并向上释放。。。运动停止

第二：一旦我改变方向，图像会暂停第二秒。任何平稳运动的指南

多谢各位

以下是JSFIDLE链接：

我还在这里粘贴相同的代码

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

var-keys={}；
$（'body'）.keydown（函数（事件）{
keys[event.which]=true；
moveDot（）；
});
$（文档）.keyup（函数（事件）{
删除键[event.which]；
moveDot（）；
});
函数moveDot（）{
var html=''；
for（键中的变量i）{
如果（！keys.hasOwnProperty（i））继续；
html+=''+i+'
'；
如果（i='37'）{
var left=$（'#点'）.css（“left”）；
left=parseInt（left.match（/\d+/）；
左=左-3；
$（'#点'）.css（{'left'：left+'px'}）；
}
如果（i='38'）{
var top=$（'#点'）.css（“top”）；
top=parseInt（top.match（/\d+/）；
top=top-3；
$（'#点'）.css（{'top'：top+'px'}）；
}
如果（i='39'）{
var left2=$（'#点'）.css（“左”）；
left2=parseInt（left2.match（/\d+/）；
left2=left2+3；
$（'#点'）.css（{'left'：left2+'px'}）；
}
如果（i='40'）{
var top2=$（'#点'）.css（“top”）；
top2=parseInt（top2.match（/\d+/）；
top2=top2+3；
$（'dot'）.css（{'top'：top2+'px'}）；
}     
}
$（'#out'）.html（html）；
}
#游戏面板{位置：相对；边框：2px实心#ccc；高度：200px；}
#游戏面板img{位置：绝对；}
#点{左：100px；上：100px；}

您的问题是在keyup上破坏了更新机制。如果您使用一个间隔来控制刷新循环，它就可以正常工作。请参阅此更新的小提琴：

---

顺便说一句，我真的可以推荐本教程：它似乎非常适合您的需要，尽管它采用了稍微不同的方法。

除了m90s解决方案之外，我建议您只获取一次dom元素：

$dot=$（“#dot”）

并在之后使用$dot。@m90:非常感谢您的解释，非常感谢您更新的小提琴。我肯定会研究html5链接。Thanks@Christoph谢谢你的推荐。我将接着说：D