SuperMario jQuery

A simple animation with Mario Bros , using jquery library

by edgardleal

HTML

<div id="level"></div>
<div id="mario" class="direita_parado"> </div>

CSS

.direita_parado { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png')  no-repeat -206px -3px; width: 15px; height: 28px;}

.sprite1 { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -366px -3px; width: 16px; height: 28px; }

.sprite2 { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -121px -163px; width: 14px; height: 19px; }

.sprite3 { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -121px -190px; width: 15px; height: 19px; }

#mario{
    position : absolute;
    top : 372px;
    left : 300px;    
}
#level{
    position : absolute;
    top : 0;
    left : 0;
    width : 500px;
    height : 500px;
    background : URL('http://papercraft.wikidot.com/local--files/papercraft:mario-level-1-1/LEVELGUIDE.png')
}

.esquerda_parado { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -167px -3px; width: 15px; height: 28px; }

.esquerda_andando { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -6px -3px; width: 16px; height: 28px; }

.direita_pulando { background: url('http://indiedevstories.files.wordpress.com/2011/04/sprite-sheet-mario.png') no-repeat -206px -41px; width: 16px; height: 31px; }

JavaScript

var cenarioX = 0;
var alturaDoSalto = 65;
var deslocamento = 3;
var direcao = 0;
var direcaoAnterior = 0;
var $mario = $('#mario');
function animateCenario(){
    cenarioX = cenarioX - (direcao * deslocamento);
    $('#level').css('background-position', cenarioX + 'px 0px');
   setTimeout(animateCenario, 100);
}
function animate(){    
    if(direcao!=direcaoAnterior){
        if(direcao==0){
            if(direcaoAnterior==-1 &&
               $mario.hasClass('esquerda_andando'))
               $mario
               .removeClass('esquerda_andando')
               .addClass('esquerda_parado');
            else
                $mario
                .removeClass('direita_andando')
                .addClass('direita_parado');
            console.log('parado');
        }
    }
    else
        if(direcao==-1)
            if($mario.hasClass('esquerda_andando'))
                $mario
                .removeClass('esquerda_andando')
                .addClass('esquerda_parado');
             else
                 if($mario.hasClass('esquerda_parado'))
                     $mario
                     .removeClass('esquerda_parado')
                     .addClass('esquerda_andando');
    else{
            $mario.removeClass('direita_andando')
            .removeClass('direita_parado')
            .addClass('esquerda_parado');
    }                    
    direcaoAnterior = direcao;
    setTimeout(animate, 280);
}
var pulando = false;
function pular(){
    if(pulando) return;
    pulando = true;
     $("#mario")
        .animate({top: '-=' +
              alturaDoSalto
              + 'px'},
              300,function(){
                 $("#mario")
                 .animate({top : "+=" +
                           alturaDoSalto
                           + "px"},
                          500, function(){
                          pulando = false;
                          });   
                });
}

function parar(){
   direcao = 0;   
}

function esquerda(){
  ...