KOF

Animation with The King of Fiters characters

HTML

<div class='town'></div>
<div id="terry"></div>

CSS

.town{
background : url('http://spritedatabase.net/files/neogeo/849/Background/KOF03_Town.png') 
        no-repeat -5px -2036px;
    width: 752px;
	height: 244px;
}
#terry{
    position : absolute;
    top : 140px;
    left : 150px;
    background : 
url('http://spritedatabase.net/files/neogeo/848/Sprite/KOF02_Terry.png') no-repeat;
    background-position :  -174px -96px;
	width: 46px;
	height: 106px;
    border : solid 1px;
}

JavaScript

function SpriteMap(bTop, bLeft, width, height, top, left){
   this.top = top;
    this.left = left;
    this.bTop = bTop;
    this.bLeft = bLeft;
    this.width = width;
    this.height = height;
}
var frames = [
  new SpriteMap(-174,-96,46,106),
  new SpriteMap(-235,-93,47,109)   
];
    var index = 0;
    var terry = $('#terry');
    function animate(){
    terry.css({'background-position' :
           frames[index].bTop + 'px ' + 
    frames[index].bLeft + 'px',
    'width' : frames[index].width + 'px',
        'height': frames[index].height    
     });
    index = index>=frames.length?0:index+1;
    }
    setInterval(animate, 500);