Chalupa Chalupa - 2 months ago 6
HTML Question

Moving a sprite

I simply want to be able to move the the sprite "kitty" using the keys W,A,S,D. So when i load the page and press the keys the kitty picture does not move and i can't figure out what i'm doing wrong. Can anyone help point me in the right direction?

my code:

<!DOCTYPE html>

<html>
<head>
<title>Project 3</title>
<style>
div.box{ width: 600px; height: 400px; border: 5px solid black;
margin: auto; position: relative; }

</style>
</head>

<body onLoad ="position" onKeyDown = "move(event)">
<script>

var dx = 5;
var dy = 5;

var xPos = 0;
var yPos = 0;

function position()
{
kitty = document.getElementById("sprite");
kitty.style.left = xPos+"px";
kitty.style.top = yPos+"px";
setTimeout("position()",10);
}

function move(event)
{

var keyPressed = String.fromCharCode(event.keyCode);

if (keyPressed == "W")
{
xPos -= dx;
}
else if (keyPressed == "D")
{
xPos += dx;
}
else if (keyPressed == "S")
{
yPos -= dy;
}
else if (keyPressed == "A")
{
yPos += dy;
}

}
</script>

<div class="box">
<img src="sprite.jpg" alt="kitty" id="sprite" width="70px"
style="position: absolute; left: 0px; top: 0px;">
</div>
</body>
</html>

Answer

The position function is never called. You are missing the parantheses in the code:

onLoad="position()"
Comments