Moving a sprite

Question

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 1

Instead of doing onkeydown="move(event)" do document.addEventListener("keydown", move) . It's cleaner.

You're position loop is never called. I recommend calling it like window.setInterval(position, 10) and drop the setTimeout in the function.

Here's a working example:

 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") { yPos -= dy; } else if (keyPressed == "D") { xPos += dx; } else if (keyPressed == "S") { yPos += dy; } else if (keyPressed == "A") { xPos -= dx; } } document.addEventListener("keydown", move) position();

 #sprite { position: absolute; }

 <div class="box"> <img src="https://placekitten.com/g/50/50" alt="kitty" id="sprite" width="70px" style="position: absolute; left: 0px; top: 0px;" /> </div>

Fiddle

You can also consider using window.requestAnimationFrame() for the animationloop.

Answer 2

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

onLoad="position()"

Answer 3

Your events are properly firing, however there are 2 issues that I currently see:

You are comparing keyPressed to uppercase letters, meanwhile keyPressed is lowercase. So either convert the string to uppercase, or fix your comparison
I don't see an actual spot where you update your sprites coordinates. While you do set yPos and xPos you never actually assign it to the sprite - therefore it is never going to move. You only assign it onload while you should just call the position() function at the end of the move() function

Moving a sprite

Question

3 answers

solution1
2 2015-03-17 22:05:21

solution2
2 ACCPTED 2015-03-17 22:06:46

solution3
0 2015-03-17 22:08:36

Moving a sprite

Question

3 answers

solution1 2 2015-03-17 22:05:21

solution2 2 ACCPTED 2015-03-17 22:06:46

solution3 0 2015-03-17 22:08:36

solution1
2 2015-03-17 22:05:21

solution2
2 ACCPTED 2015-03-17 22:06:46

solution3
0 2015-03-17 22:08:36