Menu
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>
689
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.
To detect the arrow key when it is pressed, use onkeydown in JavaScript. The button has key code. As you know the left arrow key has the code 37. The up arrow key has the code 38 and right has the 39 and down has 40.
1) Create HTML and CSS with absolutely-positioned div . 2) Track arrow keys being pressed. 3) Change CSS top and left properties of div as appropriate.
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
145
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
