使用JavaScript使用箭头键移动图像 [英] Move an image with the arrow keys using JavaScript
问题描述
我希望能够使用JavaScript在屏幕上移动图像。我在下面的代码会将图像放在屏幕上，但不会让我移动它。
问题：希望能够在屏幕上移动图像箭头键？
我确定必须有一个游戏循环，当页面处于活动状态时，它总是以某种方式运行。这是怎么做的我也不确定，但我认为这可能是他加载函数。int
JavaScript代码：
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = ISO-8859-1>
< title> Test Move Object< / title>
< script type =text / javascript>
< script type =text / javascript>
函数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（）;
休息;
案例39：
rightArrowPressed（）;
休息;
情况38：
upArrowPressed（）;
休息;
case 40：
downArrowPressed（）;
休息;
}
};
函数gameLoop（）
{
//根据速度改变位置
moveSelection（）;
setTimeout（gameLoop（），10）;
}
< / script>
< / head>
< body onload =gameLoop（）onkeydown =onkeyup =bgcolor ='yellow'>
测试
< img id =image1src =C：\Users\itpr13266\Desktop\mp.jpgstyle =position：absolute;
height =15width =15>
< / body>
结束html
< / html>
您可以使用keydown的事件侦听器只要按住键，就会反复发射。我相信这将是首选方法。
此外，'top'和'left'的初始值都没有，因此您需要指定初始值。
我创建了一个固定副本代码在这里：
http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview
I want to be able to move an image around the screen with JavaScript. The code I have below will put the image on the screen but will not let me move it around.
Question: Want to be able to move the image around the screen with the arrow keys?
I am certain there has to be a game loop that somehow is running all the time when the page is active. How this is done I am not certain either but I think that it might be int he load function.
JavaScript Code:
<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>
You can use an event listener for "keydown" which fires repeatedly, as long as the key is held down. I believe this would be the preferred approach. Also, the initial values for 'top' and 'left' are nothing, so you need to assign initial values.
I created a fixed copy of your code here: http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview
这篇关于使用JavaScript使用箭头键移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
