Chalupa Chalupa - 1 year ago 83
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>

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


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

var dx = 5;
var dy = 5;

var xPos = 0;
var yPos = 0;

function position()
kitty = document.getElementById("sprite"); = xPos+"px"; = yPos+"px";

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;


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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download