i'm following tutorial on making character move around screen using html, css , jquery. not sure why arrow keys not making character move. when press left, up, right, or down keys, thing happens scroll bar on left , 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>
javascript case sensitive.
//e.keycode wrong switch (e.keycode) { //blah } //e.keycode correct switch (e.keycode) { //blah } and there missing operand error too,
// wrong $("#player").css('top', position.top + +'px'); // correct $("#player").css('top', position.top + 20 +'px'); 
Comments
Post a Comment