Animação MetalSlug mineiro

by edgardleal

HTML

<div id="frame" class="sprite block"></div>
  <div id="out"></div>

CSS

.sprite{
     background-image : url('http://spritedatabase.net/files/neogeo/834/Sprite/Miner.gif');
     background-position : -10px -0px;
   }
   .block{
      width : 45px;
      height : 80px;
      display : block;
      border : solid 1px;
   }

JavaScript

var i = 0;
    var frames = new Array('8','58','109','160','211','262','310','359');
    var incremento = 1;
    var interval;
    function up(){
       i += incremento;
       $("#frame").css("background-position",'-' + frames[i] + 'px -0px');
         incremento = i==0?1:i==8?-1:incremento;
         $("#out").text('Frame: ' + i);
         //clearInterval(interval);
    }
    interval = setInterval(up, 100);