Estoy desarrollando para una práctica de la universidad el juego del super mario bros mediante html5,jquery y css3.
Para poner en situación, tengo un div "map" y dentro de el otro div "pj" el cual mediante js indico que el div "pj" se vaya moviendo por el div "map". El problema viene cuando el "pj" llega a la mitad de la pantalla no consigo mover el div map para simular el avance en el juego, en otras palabras no consigo que avance el mapa conforme va avanzando el pj.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="basic.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="map">
<div class="pj" id='pj'></div>
</div>
</body>
<script type="text/javascript" src="core.js"/></script>
</html>
CSS
.map{
width:800px;
height:225px;
float:left;
position:fixed;
margin:200px 0px 0px 200px;
background-image:url('sprites/mapa.png');
border-style:solid;
border-color:red;
overflow:hidden;
}
.pj{
width:32px; height:32px; /* exactly the size of an image in our sprite */
background-image:url('sprites/sprites_ff.png');
position:relative;
float:left;
top:170px;
}
.walk_human{
animation: walk steps(4) 0.3s infinite alternate;
}
.walk{
animation: walk steps(2) 0.1s infinite alternate;
}
.walk_back{
animation: walk_back steps(2) 0.1s infinite alternate;
}
.jump{ animation: jump steps(2) 0.5s; }
@keyframes walk_human {
from { background-position:-0px -192px; }
to { background-position:-160px -192px; }
}
@keyframes walk{
from { background-position:-0px -64px; }
to { background-position:-64px -64px; }
}
@keyframes walk_back{
from { background-position:-0px -32px; }
to { background-position:-64px -32px; }
}
@keyframes jump{
from { background-position:-0px -0px; }
to { background-position:-64px -0px; }
}
Jquery
var middleMap=0; //acumula posicion del pj para sincronizar con la mitad del mapa
var posMap=$map.offset();
$(document).keydown(function(e) {
if (e.keyCode == 39) {
var posPj=$pj.offset();
if(middleMap>=400){
$pj.addClass('walk').css();
$map.animate({left:'+=40px'});
}else{
$pj.addClass('walk').css();
$pj.animate({marginLeft:'+=40px'});
middleMap+=30;
}
}
if(e.keyCode ==37){
var posPj=$pj.offset();
if(posPj.left<=posMap.left){
alert(posMap.top+""+posMap.left);
}else{
$pj.addClass('walk_back').css();
$pj.animate({marginLeft:'-=40px'});
middleMap-=30;
}
}
if(e.keyCode ==32 && !saltando){
salta();
}
});
function salta(){
saltando = true;
$pj.stop(true,false);
$pj.animate({marginTop:'-=30px'});
baja();
}
function baja(){
setTimeout(function() {
$pj.animate({marginTop:'+=30px'});}, 250);
setTimeout(function() {saltando=false;}, 1000)
}
$(document).keyup(function(e) {
$pj.removeClass('walk');
$pj.removeClass('walk_back');
if(!saltando){
$pj.stop(true,false);
//saltando=false;
}
});
Lo que pretendo es que cuando el pj llegue a la mitad del mapa, éste se vaya moviendo dando la sensación de que esta avanzando en el mapa pero sin que se salga o descoloque del div.