jQuery move element with arrows

jQuery move element with arrows

Hello !

I'm making pacman game. For now I have only map and pacman in there. Now I wanna move him but my code doesnt work. I tried about 4 methods but still nothing.Methods that I tried are in comment.

You will understand a lot more if you download. So problem now is that pacman is not moving,first I just want to move him,no matter if there is wall or not.  Thanks for help.
 
I puted files into rar so u can download and its also under attachments (not a virus):[code] http://speedy.sh/pKDTX/pac-man.rar[/code]

And I will post my code also here:

HTML:
  1. <div class="obroba">
  2. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
  3. X......................................X<br/>
  4. X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  5. X......................................X<br/>
  6. X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  7. X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  8. X.XXXX........XXXXX.XXXXX........XXXXX.X<br/>
  9. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  10. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  11. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  12. X......................................X<br/>
  13. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  14. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  15. X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
  16. X.XXXX........XXXXX.XXXXX........XXXXX.X<br/>
  17. X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  18. X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  19. X..................P...................X<br/>
  20. X.XXXXX.XXXXXXXXXXX.XXXXXX.XXXXXXXXXXX.X<br/>
  21. X.XXXXX.XXXXXXXXXXXXXXXXXX.XXXXXXXXXXXXX<br/>
  22. X.......XXXXXXXXXXXXXXXXXX.XXXXXXXXXXXXX<br/>
  23. XXXXXXX..........................XXXXXXX<br/>
  24. XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
  25. XX......XXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
  26. XX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
  27. XX....XXXXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
  28. X......................................X<br/>
  29. X.XXXXX.XXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
  30. X......................................X<br/>
  31. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
  32. </div>

  33. <p></p>      
jQuery:
  1. $(document).ready(function(){
  2. $(".obroba").hide();
  3. var htmlString = $('div').html();
  4. var zid = htmlString.replace(/[.]/g, "<img src=\"images/krogec.png\" />");
  5. var  zid1 = zid.replace(/[X]/g, "<img src=\"images/zid.png\" />");
  6. //var zid2 = zid1.replace(/[P]/g, "<img src=\"images/pac_desno.png\"/>");
  7. var igralec='<div class="pacman"></div>';
  8. var zid2 = zid1.replace(/[P]/g, igralec);
  9. $("p").addClass( "velikost" );
  10. $("p").html(zid2);

  11. /*var element=document.getElementByClass('pacman')
  12. var mesto=document.getElementByClass('velikost')
  13. var pozicija=$(".pacman").position.left();
  14. function anim(e){
  15. if(e.keyCode==39){
  16. pozicija +=2;
  17. element.style.left=pozicija + 'px';
  18. }
  19. if(e.keyCode==37){
  20. pozicija -=2;
  21. element.style.left=pozicija + 'px';
  22. }
  23. }*/

  24. /*$(document).keydown(function(e){
  25. var pozicija=$(".pacman").position();
  26. switch(e.which)
  27. {
  28. case 37:
  29. $(".pacman").css('left',position.left - 20 + 'px');
  30. break;
  31. case 38:
  32. $(".pacman").css('top',position.top - 20 + 'px');
  33. break;
  34. case 39:
  35. $(".pacman").css('left',position.left + 20 + 'px');
  36. break;
  37. case 40:
  38. $(".pacman").css('top',position.top + 20 + 'px');
  39. break;
  40. }
  41. });*/
  42. var $div = $('.pacman');
  43. $(document).keydown(function(e) {
  44. switch (e.which) {
  45. case 37:
  46. $('.pacman').css('left', $div.offset().left - 10);
  47. break;
  48. case 38:
  49. $('.pacman').css('top', $div.offset().top - 10);
  50. break;
  51. case 39:
  52. $('.pacman').css('left', $div.offset().left + 10);
  53. break;
  54. case 40:
  55. $('.pacman').css('top', $div.offset().top + 10);
  56. break;
  57. }
  58. })
  59. /*
  60. $(document).keydown(function(e) {
  61. switch (e.which) {
  62. case 37:
  63. $('.pacman').stop().animate({
  64. left: '-=10'
  65. }); //left arrow key
  66. break;
  67. case 38:
  68. $('.pacman').stop().animate({
  69. top: '-=10'
  70. }); //up arrow key
  71. break;
  72. case 39:
  73. $('.pacman').stop().animate({
  74. left: '+=10'
  75. }); //right arrow key
  76. break;
  77. case 40:
  78. $('.pacman').stop().animate({
  79. top: '+=10'
  80. }); //bottom arrow key
  81. break;
  82. }
  83. })*/
  84. });

CSS:
  1. .pacman
  2. {
  3. position:absoulte;
  4. background: url(pac_desno.png) no-repeat;
  5. width:20px;
  6. height:20px;
  7. display:inline-block;
  8. z-index:2;
  9. }


  10. .velikost
  11. {
  12. position:relative;
  13. width:800px;
  14. height:600px;
  15. border: 2px solid black; 
  16. padding:0px;
  17. margin:0px;
  18. line-height:10px;
  19. }
  20. img
  21. {
  22. width:20px;
  23. height:20px;
  24. padding:0px;
  25. margin:0px;
  26. }