我希望能够使用 JavaScript 在屏幕上移动图像。我下面的代码会将图像放在屏幕上，但不会让我移动它。
问题:想要使用箭头键在屏幕上移动图像吗？
我确定必须有一个游戏循环，当页面处于事件状态时，它以某种方式一直在运行。这是如何完成的，我也不确定，但我认为它可能是加载函数。
JavaScript 代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Move Object</title>
<script type="text/javascript">
<script type="text/javascript">
function leftArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 5 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 5 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 5 + 'px';
}
function moveSelection() {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function gameLoop()
{
// change position based on speed
moveSelection();
setTimeout("gameLoop()",10);
}
</script>
</head>
<body onload="gameLoop()" onkeydown="" onkeyup="" bgcolor='yellow'>
Test
<img id="image1" src="C:\Users\itpr13266\Desktop\mp.jpg" style="position:absolute;"
height="15" width="15">
</body>
end html
</html>
最佳答案
您可以为“keydown”使用事件监听器，只要按键被按住，它就会重复触发。我相信这将是首选方法。 另外，'top' 和 'left' 的初始值什么都没有，因此您需要分配初始值。
我在这里创建了您的代码的固定副本: http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview
关于javascript - 使用 JavaScript 使用箭头键移动图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21790295/