我是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> 

#1楼 票数:0

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

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

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

  ask by chris martinez translate from so

未解决问题?本站智能推荐:

3回复

带有箭头键移动对象的HTML和Java脚本?

好的,所以我制作了一个页面,可以使用箭头键移动图像,但是只有向下和向右功能可以使用。 我是从Hide show脚本制作函数的,因为我对javascript很陌生。 这是代码。 剩下 对 向上 下 然后是箭头键脚本 然后是html 您可
3回复

在jQuery scrollTo中使用箭头键

我已经成功实现了scrollTo jQuery插件,当单击链接时,该插件会滚动到具有“新”类的下一个div。 但是,我也希望能够使用箭头键上下滚动到同一类的下一个/上一个div。 我在互联网上四处张望,但一直找不到如何做到这一点。 我是JS的新手,因此非常感谢您的指导! 以下是相
1回复

在我的代码中,上下箭头键有效,但是由于某种原因左右键似乎不起作用

我正在为我的班级制作游戏,并且我可以进行所有操作,但是由于某些原因,左右箭头键不起作用,但是上下键可以正常工作。 我在Github中拥有一切-https: //github.com/Crouton18/game.git 这是箭头功能的html和java脚本
1回复

我正在尝试制作一个箭头键移动系统,但它不起作用。 有谁知道我的代码有什么问题?

我正在尝试使用 HTML5 canvas 和 node.js 制作一个 .io 游戏,但我对如何让玩家使用箭头键移动感到困惑。 我一直在尝试使用本教程来制作运动系统,并且我一直在摆弄它好几天,但我似乎无法让它移动。 播放器是保存为 .png 文件的图像。 它显示在画布上,但不会移动。
3回复

按左右箭头更改图像?

所以我有这个简单的幻灯片: 当我像这样单击时,我设法使图像发生了变化: 问题是当我按下右箭头(下一个)和左箭头(返回)时,我还希望图像发生变化。 我怎样才能做到这一点? 我试过添加一个“onkeypress”事件,但似乎没有任何效果。 我做错了什么。 我对 javascript 很陌生,所以
1回复

如何用箭头在画布中移动对象?

当我单击画布中的向右箭头时,请有人帮助我自动移动对象。 我的代码是 对于向右箭头移动的对象,我需要添加什么?
4回复

如何组合箭头以突出显示列表中的项目? (jQuery的)

我有一堆<DIV>兄弟姐妹,我想让用户使用向上和向下箭头在列表中上下移动并“突出显示”一个项目。 在任何给定时刻只应突出显示一个项目。 最简单的方法是什么?
4回复

键盘上下箭头

我有一个自动完成搜索,通过键入几个字符,它将显示所有名称,与输入的字符匹配。 我使用DIV标签在jsp中填充这些数据,使用鼠标我可以选择名称。 但我想使用键盘向上和向下箭头选择要在DIV标签中选择的名称。 任何人都可以帮助我解决这个问题。