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.
And I will post my code also here:
HTML:
- <div class="obroba">
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
- X......................................X<br/>
- X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X......................................X<br/>
- X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X.XXXX........XXXXX.XXXXX........XXXXX.X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X......................................X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X.XXXX.XXXXXX.XXXXX.XXXXX.XXXXXX.XXXXX.X<br/>
- X.XXXX........XXXXX.XXXXX........XXXXX.X<br/>
- X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X.XXXXXXXXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X..................P...................X<br/>
- X.XXXXX.XXXXXXXXXXX.XXXXXX.XXXXXXXXXXX.X<br/>
- X.XXXXX.XXXXXXXXXXXXXXXXXX.XXXXXXXXXXXXX<br/>
- X.......XXXXXXXXXXXXXXXXXX.XXXXXXXXXXXXX<br/>
- XXXXXXX..........................XXXXXXX<br/>
- XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
- XX......XXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
- XX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
- XX....XXXXXXXXXXXXXXXXXXXXXXXXXX.XXXXXXX<br/>
- X......................................X<br/>
- X.XXXXX.XXXXXXXXXXX.XXXXXXXXXXXXXXXXXX.X<br/>
- X......................................X<br/>
- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
- </div>
- <p></p>
jQuery:
- $(document).ready(function(){
- $(".obroba").hide();
-
- var htmlString = $('div').html();
- var zid = htmlString.replace(/[.]/g, "<img src=\"images/krogec.png\" />");
- var zid1 = zid.replace(/[X]/g, "<img src=\"images/zid.png\" />");
- //var zid2 = zid1.replace(/[P]/g, "<img src=\"images/pac_desno.png\"/>");
- var igralec='<div class="pacman"></div>';
- var zid2 = zid1.replace(/[P]/g, igralec);
-
- $("p").addClass( "velikost" );
- $("p").html(zid2);
-
- /*var element=document.getElementByClass('pacman')
- var mesto=document.getElementByClass('velikost')
-
- var pozicija=$(".pacman").position.left();
-
- function anim(e){
-
- if(e.keyCode==39){
- pozicija +=2;
- element.style.left=pozicija + 'px';
- }
-
- if(e.keyCode==37){
- pozicija -=2;
- element.style.left=pozicija + 'px';
- }
-
- }*/
-
- /*$(document).keydown(function(e){
-
- var pozicija=$(".pacman").position();
-
- switch(e.which)
- {
- case 37:
- $(".pacman").css('left',position.left - 20 + 'px');
- break;
-
- case 38:
- $(".pacman").css('top',position.top - 20 + 'px');
- break;
-
- case 39:
- $(".pacman").css('left',position.left + 20 + 'px');
- break;
-
- case 40:
- $(".pacman").css('top',position.top + 20 + 'px');
- break;
- }
- });*/
-
-
- var $div = $('.pacman');
- $(document).keydown(function(e) {
- switch (e.which) {
- case 37:
- $('.pacman').css('left', $div.offset().left - 10);
- break;
- case 38:
- $('.pacman').css('top', $div.offset().top - 10);
- break;
- case 39:
- $('.pacman').css('left', $div.offset().left + 10);
- break;
- case 40:
- $('.pacman').css('top', $div.offset().top + 10);
- break;
- }
- })
-
- /*
- $(document).keydown(function(e) {
- switch (e.which) {
- case 37:
- $('.pacman').stop().animate({
- left: '-=10'
- }); //left arrow key
- break;
- case 38:
- $('.pacman').stop().animate({
- top: '-=10'
- }); //up arrow key
- break;
- case 39:
- $('.pacman').stop().animate({
- left: '+=10'
- }); //right arrow key
- break;
- case 40:
- $('.pacman').stop().animate({
- top: '+=10'
- }); //bottom arrow key
- break;
- }
- })*/
- });
CSS:
- .pacman
- {
- position:absoulte;
- background: url(pac_desno.png) no-repeat;
- width:20px;
- height:20px;
- display:inline-block;
- z-index:2;
- }
- .velikost
- {
- position:relative;
- width:800px;
- height:600px;
- border: 2px solid black;
- padding:0px;
- margin:0px;
- line-height:10px;
- }
- img
- {
- width:20px;
- height:20px;
- padding:0px;
- margin:0px;
- }