按下箭头键时，“我的图像跳”怪异（HTML + JS）

Question

我是HTML / Javascript的新手，并尝试使用箭头键移动图像。 它起作用了，但是当图像的style.top低于某个数字（看起来为100px）时，它会跳到style.top = 425px，这应该仅在style.top> = 450时才会发生。这是我的代码：

 var keys = []; window.addEventListener("keydown", function(e){ keys[e.keyCode] = true; }, false); window.addEventListener("keyup", function(e){ delete keys[e.keyCode] }, false); function init(){ var link = document.getElementById("link"); setTimeout(function(){ loop(); }, 1) } function update(){ if(keys[38]){ link.style.top = parseInt(link.style.top) - 3 + 'px' if(link.style.top <= 000 + 'px'){ link.style.top = 000; } console.log(link.style.top) } if(keys[40]) { link.style.top = parseInt(link.style.top) + 3 + 'px' if(link.style.top >= 425 + 'px') { link.style.top = 425; } console.log(link.style.top) } if(keys[37]) { link.style.left = parseInt(link.style.left) - 3 + 'px' } if(keys[39]) { link.style.left = parseInt(link.style.left) + 3 + 'px' } } function loop(){ setInterval(function(){ update(); }, 1000/60) } 

 <html> <head> <title>Game</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src = "script.js"></script> </head> <body onload = "init()"> <!-- Images for the page --> <img id = "link" src = "http://i.imgur.com/clcuHKG.jpg" style = "position: absolute; top:250; left:500;" height = "200" width = "200"> </body> </html> 

Answer 1

您正在使用字符串进行计算。 尽量避免这种情况！ 字符串的行为不像数字。

例如，你比较前值，这一点，如'99px'的值'425px' 。 字符串比较常规认为99px较大，因为第一个字符，9的ASCII值，比4的ASCII值。

因此，您需要使用数值 。 例如parseInt(link.style.top) 。 然后，你要比较的数字99和425和一切都会好的。