[jQuery] premikanje elementa

Delam igro pacman za zdaj sem izrisal začetno postavitev sedaj pa se mi pacman noče premikati sem poizkusil z nekaj variantami ampak mi ne deluje.

Tu je rar datoteka: http://speedy.sh/Pshwv/pacman.rar

Trenutno mam eno varianto noter ampak ne deluje čeprav ne vem zakaj. Pa prosim če bi se dalo na čim bolj enostaven način,ker sem šele začetnik :)

Kaj ce bi tukaj objavil?

http://jsfiddle.net/

brodul je 3. dec 2013 ob 20:06 izjavil:

Kaj ce bi tukaj objavil?

http://jsfiddle.net/

Sem poizkusil,ampak ker mam slike za izris mape se pol to tam ne pokaže in so samo x ter pikice. Sem poizskuil da be zamenjal z kvadrati barv ampak mi ne gre,sicer lahko vstavim tu če se bo kdo razumel iz tega :)

Pri jQuery-ju so metode ki sem jih probal v komentarju.

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>
</body>

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;
}