zelda2

by AaronLayton

HTML

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

CSS

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

.link{
   width: 22px;
   height: 24px;
   background: url(http://www.tryordie.co.uk/zeldaSUD.png) no-repeat; 
   z-index: 10;
   position: absolute;
   top:100px;
   left:100px;
}

JavaScript

var ddZelda = function () {
    this.map = $("<img />");
    this.map.attr('src', 'http://zs.ffshrine.org/link-to-the-past/maps/light_world-1.png'); 
    this.map.appendTo(".container");
    
    $('.link').sprite({fps: 12, no_of_frames: 8});
    
   
    
   
    
    $('body').keydown(function(event) {
        
        switch (event.keyCode) {
            case 37: // left arrow key
                
                break;
                    
            case 38: // up arrow key
                $('.link').spState(2).stop(true).animate(
                    {top: '-=2'}, 60);
                break;
                    
            case 39: // right arrow key
                
                break;
                    
            case 40: // down arrow key
                $('.link').spState(1).stop(true).animate(
                    {top: '+=2'}, 35);
                break;
        }
    });
    
   
    function newone() {
        console.log("Logged");
    }
    
    setInterval(newone, 100);
    
    //
}  
    
ddZelda();