1

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

Juego introducir la descripción de la imagen aquí

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.

1 respuesta 1

0

Lo puedes hacer con CSS, solo tienes que especificar con JQuery donde tendría que comenzar el movimiento del fondo

    var traslado = 100;

if(middleMap>=400){
    $pj.addClass('walk').css();
    $map.animate({backgroundPosition: traslado});
    traslado = traslado + 100;

después solo seria especificar que se traslade decentemente según valla hacia atrás hasta llegar al inicio

Aqui se habla sobre ello: Animacion con CSS

3
  • 1
    Hola de nuevo Marco ;), tu respuesta es perfectamente válida, pero de preferencia no pongas solo el enlace ya que, si este cae por algún motivo, tu respuesta ya no será válida. Te recomiendo extraer algunas partes de dicho enlace y ponerla en tu respuesta de acuerdo a como lo entiendes, sin olvidar poner la fuente.
    – gugadev
    el 19 mar. 2017 a las 15:35
  • Gracias por el consejo, ya la edito c:
    – Marco Diaz
    el 19 mar. 2017 a las 15:36
  • Si funciona ya se mueva el fondo cuando el pj va por la mitad del juego, pero se me descolocan los demas elementos pero bueno ya será retocarlo e ir modificando algunas cosas. Gracias por la ayuda el 20 mar. 2017 a las 17:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.