Move an image with the arrow keys using JavaScript
Question
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>
3 answers
solution1
6 ACCPTED 2014-02-14 22:25:42
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
solution2
2 2014-02-14 22:14:38
Try this. You need to set an initial left, right, et cetera. And get the event from keyup to get the key pressed and use the key for executing the right function.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Move Object</title>
<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(event) {
switch (event.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="moveSelection(event)" bgcolor='yellow'>
Test
<img id="image1" src="pug.jpeg" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="15" width="15">
</body>
end html
</html>
solution3
0 2021-04-12 17:39:48
Formatted HTML:
The formatted code formatted to fit your document.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test Move Object</title>
<script>
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) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function docReady() {
window.addEventListener('keydown', moveSelection);
}
</script>
</head>
<body onload="docReady()" onkeydown="" onkeyup="" bgcolor='yellow'>
<img id="image1" src="https://netphp.geonevestudios.repl.co/images/favicon/web-icon.ico" style="position:absolute;left:0; top:0;" height="15" width="15">
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.