183
rated 0 times
[
188]
[
5]
/ answers: 1 / hits: 52174
/ 10 Years ago, fri, february 14, 2014, 12:00:00
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:Usersitpr13266Desktopmp.jpg style=position:absolute;
height=15 width=15>
</body>
end html
</html>
More From » html
