Zelda

HTML

<script src="http://www.spritely.net/scripts/jquery.spritely-0.4.js"></script>
<div class="container"></div>

CSS

.container{
    position:relative;
    width:100%;
    height:500px;
    overflow:hidden;
    position:relative;
}

.myMap {
    left:-1800px;
    position:absolute;
    top:-2600px;
    z-index:1;
}

.character {
    background:url(chickabo.png) no-repeat;
    height:25px;
    left: 431.42062745157176px;
    overflow:hidden;
    position:absolute;
    top: 245.42062745157176px; 
    width:21px;
    z-index:100;
}

JavaScript

function Zeldor() {
    var isWalking = false;
    var direction = "down";
    var character, map;
    
    
    this.init = function(){
        map = $("<img class=\"myMap\" />");
        map.attr('src', 'http://zs.ffshrine.org/link-to-the-past/maps/light_world-1.png'); 
        map.appendTo(".container");
        
        character = $("<div class=\"character\" />");
        character.appendTo(".container");
        character.sprite({fps: 12, no_of_frames: 8});
        
        setInterval(mainLoop, 100);
    }
        
    function mainLoop() {
        if (direction == "down"){
            if (isWalking){
                character.spState(5).spStart();
                map.stop(true).animate({top: '-=8'},35);
            }else{
                character.spStop(true).spState(1).stop(true);
            }
             
        }
        if (direction == "up"){
            if (isWalking){
                character.spState(6).spStart();
                map.stop(true).animate({top: '+=8'},35);
            }else{
                character.spStop(true).spState(2).stop(true);
            }
             
        }
        if (direction == "left"){
            if (isWalking){
                character.spState(7).spStart();
                map.stop(true).animate({left: '+=8'},35);
            }else{
                character.spStop(true).spState(3).stop(true);
            }
             
        }
        if (direction == "right"){
            if (isWalking){
                character.spState(8).spStart();
                map.stop(true).animate({left: '-=8'},35);
            }else{
                character.spStop(true).spState(4).stop(true);
            }
             
        }
    }
    
    $('body').keydown(function(event) {
        console.log("test");
        switch (event.keyCode) {
            case 37: // left arrow key
                direction = "left";
                isWalking = true;
                break;
            case 38: // up arrow key
               ...