CODEWITHSUNDEEP
javascripthtml
Chalupa
Chalupa

Reputation: 367

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>

Upvotes: 2

Views: 1014

Answers (3)

Jonathan
Jonathan

Reputation: 9151

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.

Upvotes: 3

Adjit
Adjit

Reputation: 10305

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

  1. You are comparing keyPressed to uppercase letters, meanwhile keyPressed is lowercase. So either convert the string to uppercase, or fix your comparison
  2. 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

Upvotes: 0

Guffa
Guffa

Reputation: 700212

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

onLoad="position()"

Upvotes: 3

Related Questions