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>

score 3 · Answer 1 · edited Sep 21 '16 at 04:05

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.

Add this JS to a scriptag just above `
`
– Jonathan Mar 17 '15 at 22:15 — Jonathan, Mar 17 '15 at 22:15

score 3 · Accepted Answer · answered Mar 17 '15 at 22:06

3

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

onLoad="position()"

answered Mar 17 '15 at 22:06

Guffa

687,336
108
737
1,005

by any chance, do u know how i can modify my code so that the arrow keys will also move the sprite? thanks – Chalupa Mar 17 '15 at 22:09
1

@Chalupa: Use the `onkeydown` event for that. See: http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript – Guffa Mar 17 '15 at 22:13

score 0 · Answer 3 · answered Mar 17 '15 at 22:08

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

3 Answers3