Can not use jQuery keycode to change element's CSS

Question

I'm following a tutorial on making a character move around the screen using html, css and jquery. I am not sure why the arrow keys are not making the character move. When I press the left, up, right, or down keys, the only thing that happens is the scroll bar on the left and bottom moves. What's wrong??

$(function() {
  var player = '<div id="player"></div>';
  $("#map").append(player);


  $(document).keydown(function(e) {
    //alert(e.keyCode);

    var position = $("#player").position();


    switch (e.keycode) {
      case 37: //left
        $("#player").css('left', position.left - 20 + 'px');
        break;

      case 38: //up
        $("#player").css('top', position.top - 20 + 'px');
        break;

      case 39: //right
        $("#player").css('left', position.left + 20 + 'px');
        break;

      case 40: //down
        $("#player").css('top', position.top + +'px');
        break;

    }
  });

});

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0") no-repeat;
  width: 165px;
  height: 175px;
}
#map {
  position: relative;
  border: 1px solid black;
  height: 600px;
  width: 800px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="maze.css" />
</head>

<body>
  <h1>Maze</h1>


  <div id="map"></div>
  <div id="output"></div>


</body>

</html>

this line: $("#player").css('top', position.top + +'px');

damiano celent
– damiano celent

2016-01-25 00:16:15 +00:00
Commented Jan 25, 2016 at 0:16 — damiano celent
– damiano celent, Commented Jan 25, 2016 at 0:16

blurfx · Accepted Answer · 2016-01-25 00:27:24Z

3

Javascript is case sensitive.

//e.keycode is wrong
switch (e.keycode) {
    //blah
}

//e.keyCode is correct
switch (e.keyCode) {
    //blah
}

and there is missing operand error too,

// Wrong
$("#player").css('top', position.top + +'px');
// Correct
$("#player").css('top', position.top + 20 +'px');

Fiddle

edited Jan 25, 2016 at 0:27

answered Jan 25, 2016 at 0:12

blurfx

1,37011 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AMACB Over a year ago

Also, there is no reason to use position.top + 20 + 'px'; you can use .css('top': '+=20px');. See the second answer: stackoverflow.com/questions/4359184/…

Blake Allen Over a year ago

Question: I put "alert(position.top)" after the switch statement. Whenever I move the character, it should tell me the position of the character. However, it tells me the top position of the character BEFORE I pressed the arrow key. Do you know what I should do? @AMACB

AMACB Over a year ago

Move the alert(...); to after the switch statement.

Bindrid · Accepted Answer · 2016-01-25 00:24:24Z

1

Also,

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) no-repeat;
  width: 165px;
  height: 175px;
}

should be

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) ;
  background-repeat:no-repeat; 
  width: 165px;
  height: 175px;
}

answered Jan 25, 2016 at 0:24

Bindrid

3,7452 gold badges20 silver badges19 bronze badges

Comments

Peyman Mohamadpour · Accepted Answer · 2016-01-25 00:26:12Z

1

You should use e.keyCode instead of e.keycode.

answered Jan 25, 2016 at 0:26

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

Collectives™ on Stack Overflow

Can not use jQuery keycode to change element's CSS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related