JSFiddle - React, Tailwind, and code Playground
by erick
HTML
<script src="http://dl.dropbox.com/u/3902537/assets/js/yals.min.js"></script>
<script src="http://dl.dropbox.com/u/3902537/assets/js/requestAnimationFrame.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
CSS
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
canvas {
background-color: #000;
}
JavaScript
(function(){
var loadImages = (function() {
var stack = [],
imageLoaded = function( image, key, stackIdx ) {
var stackItem = stack[stackIdx];
++stackItem.currentLen;
stackItem.imgs[key] = image;
if( stackItem.currentLen === stackItem.originalLen ) {
stackItem.callback( stackItem.imgs );
stack.splice( stackIdx, 1 );
}
};
return function( imgs, callback ) {
var key, stackItem, idx = stack.length;
stackItem = {
currentLen : 0,
originalLen : 0,
callback : callback,
imgs : imgs
};
stackItem.originalLen = Object.keys( imgs ).length;
if( stackItem.originalLen === 0 )
throw new Error( 'Invalid number of images.' );
stack.push( stackItem );
for( key in imgs ) {
if( !imgs.hasOwnProperty( key ) )
continue;
var img = new Image();
img.src = imgs[key];
img.addEventListener( 'load', (function( key ){
return function( event ){
imageLoaded( this, key, idx );
};
}(key)), false );
}
}
}());
function onImagesLoaded( imgs ) {
var scene = new Yals.Scene(),
ctx = scene.context,
mouse = Yals.Mouse.capture( scene.canvasElement ),
game = new Yals.Game( 60 ),
gameManager = new Yals.GameManager( game ),
$debug = $( '#debug' ),
DEGREES_TO_RADIANS = Math.PI / 180,
isOperaOrChrome = ( $.browser.chrome ? true : ( $.browser.opera ? true : false ) ); //$.browser was removed from jQuery >=1.9
function Rand( from, to ) {
return ( Math.random() *...