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>
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>
- 1 Not really. You need to set some "triggers" so, when they happen, the action is executed. I can only do it in jquery (javascript's framework), but still might give you some idea, want me to show it anyway? – Francisco Presencia Commented Feb 14, 2014 at 22:06
- You have duplicate opening script tags (and you don't need to specify the type in HTML5). – isherwood Commented Feb 14, 2014 at 22:07
- I would imagine the newest version of HTML. HTML 5. – Doug Hauf Commented Feb 15, 2014 at 0:19
3 Answers
Reset to default 6You 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
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>
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>