Created
September 23, 2012 10:16
-
-
Save ynonp/3769591 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 9/23/12 | |
| * Time: 11:55 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| var GameLoop = function() { | |
| var self = {}; | |
| var go = []; | |
| var clock_id; | |
| self.addGameObject = function(o) { | |
| go.push(o); | |
| return go.length - 1; | |
| }; | |
| self.removeGameObject = function(id) { | |
| go[id] = undefined; | |
| }; | |
| self.start = function() { | |
| self.stop(); | |
| clock_id = setInterval(function() { | |
| for ( var i=0; i < go.length; i++ ) { | |
| if | |
| ( ( go[i] ) && | |
| ( typeof go[i].update === 'function') ) { | |
| go[i].update(); | |
| } | |
| } | |
| }, 1000/33); | |
| }; | |
| self.stop = function() { | |
| if ( clock_id ) { | |
| clearInterval(clock_id); | |
| } | |
| }; | |
| return self; | |
| }; | |
| var CommanderKeen = function(el) { | |
| var self = {}; | |
| var idx = 0; | |
| var counter = 0; | |
| el.setAttribute('class', 'finish sprite'); | |
| var sprites = [ | |
| { style: 'background-position:-8px -5px;width:13px;height:32px;' }, | |
| { style: 'background-position:-52px -6px;width:17px;height:30px;' }, | |
| { style: 'background-position:-94px -6px;width:19px;height:30px;' }, | |
| { style: 'background-position:-139px -5px;width:16px;height:32px;' } | |
| ]; | |
| self.update = function() { | |
| if ( counter++ % 5 != 0 ) { | |
| return; | |
| } | |
| el.setAttribute('style', sprites[idx++].style ); | |
| if ( idx >= sprites.length ) { | |
| idx = 0; | |
| } | |
| }; | |
| return self; | |
| }; | |
| var g = new GameLoop(); | |
| var keen_el = document.querySelector('div.sprite'); | |
| var commander = new CommanderKeen(keen_el); | |
| g.addGameObject(commander); | |
| g.start(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Sprites</title> | |
| <style> | |
| .sprite { | |
| background-image:url('CommanderKeen4-BillyBlazeSheet.png'); | |
| background-repeat: no-repeat; | |
| } | |
| body { | |
| background: #F08100; | |
| } | |
| .finish { | |
| -webkit-transform:translate(200px); | |
| -webkit-transition: -webkit-transform 5s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="sprite"></div> | |
| <script src="animation.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment