Ready for collision !!

.gitignore

@@ -0,0 +1,2 @@
+.empty
+/css/.empty

guiltouf/css/style.css

@@ -33,7 +33,7 @@
 	display: block;
 	top:0;
 	left:0;
-	background: rgba(20, 20, 20, 1);
+	background: transparent;
 }
 
 #ship .wing { 
@@ -46,11 +46,7 @@
 	background: transparent url(/images/sprites/wings_eagle_sprite.png) no-repeat 0 0;
 }
 
-#ship .wing.right {
-	left: 83px;
-	background-position: right 0;
-}
-
+#ship .wing.right { left: 83px; background-position: right 0; }
 #ship .ship-body {
 	position: absolute;
 	display: block;
@@ -65,12 +61,32 @@
 	position: absolute;
 	display: block;
 	top:0;
-	left: 70.5px;
+	left: 71px;
 	width: 18px;
 	height: 40px;
 	background: transparent url(/images/sprites/weapon_pilot.png) no-repeat 0 0;
 }
 
+#ship .ship-reactor {
+	position: absolute;
+	display: block;
+	background: transparent url(/images/sprites/reactor_drum.png) no-repeat 0 0;
+	top:85px;
+	left:72px;
+	width: 15px;
+	height: 14px;
+}
+
+#ship .ship_reactor_fire {
+	position: absolute;
+	display: block;
+	background: transparent url(/images/sprites/reactor_fire_sprite.png) no-repeat -88px 0;
+	top:88px;
+	left: 58px;
+	width: 44px;
+	height: 68px;
+}
+
 /* Ennemies */
 #game .ennemy { border: 1px solid blue; }
 #hud {

guiltouf/index.html

@@ -13,6 +13,8 @@
 		<div id="game" class="layout">
 			<div id="ship">
 				<div class="ship-canon"></div>
+				<div class="ship_reactor_fire" id="ship_reactor"></div>
+				<div class="ship-reactor"></div>
 				<div class="ship-body"></div>
 				<div class="wing left"></div>
 				<div class="wing right"></div>

guiltouf/js/GameClass.js

@@ -5,7 +5,6 @@ var Level = 1 ;
 var Layouts = {} ;
 var timers = {} ;
 var Game = null ;
-var cos = Math.cos, sin = Math.sin, tan = Math.tan, exp = Math.exp, log = Math.log, pow = Math.pow ;
 
 // -- Init scene prototype
 var app = function(opts) {

guiltouf/js/LayoutClass.js

@@ -97,6 +97,7 @@ Layout.prototype.createObj = function(opts) {
 		$.extend(true, settingsObj, optsObj) ;
 		
 		// -- Store options
+		this.parent = self ;
 		this.name = settingsObj.name || 'default' ;
 		this.id = settingsObj.id || 'element_'+Wyrian.uniqId++ ;
 		this.width = settingsObj.width ? settingsObj.width : self.width  ;
@@ -130,17 +131,19 @@ Layout.prototype.createObj = function(opts) {
 				    backgroundPosition: settingsObj.backgroundPosition,
 				    backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
 				}
-			})
+			}).appendTo(self.dom) ;
 		}
 		
 		// -- Apply CSS
 		this.box.css({
 		    width: this.width,
 		    height: this.height
-		}).transform({'translate': this.x+'px, '+this.y+'px'}) ;
+		}) ;
 		
-		// -- Append to scene
-		this.box.appendTo(self.dom) ;
+		// -- Move
+		if ( ! this.settings.nomove ) {
+			this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ;
+		}
 		
 	} ;
 	
@@ -150,6 +153,11 @@ Layout.prototype.createObj = function(opts) {
 		this.y = this.settings.origin.y ;
 	} ;	
 	
+	// -- Return instance
+	Obj.prototype.getInstance = function() {
+		return this;
+	} ;
+	
 	// -- Draw object into scene
 	Obj.prototype.draw = function() {
 		if ( (this.y >= -this.height) && (this.y <= (Wyrian.height+this.height)) && this.x >= -this.width && this.x <= (Wyrian.width+this.width) ) {
@@ -158,16 +166,21 @@ Layout.prototype.createObj = function(opts) {
 			if ( this.settings.sprites ) {
 				this.lastSprite = this.lastSprite || 0 ;
 				this.lastSprite++ ;
-				if ( this.lastSprite >= this.settings.sprites.length ) 
-					this.lastSprite = 0 ;
-				this.box.css({'backgroundPosition': -1*this.lastSprite*this.settings.width+'px 0'}) ;
+				if ( typeof this.settings.sprites[this.lastSprite] == 'undefined' ) this.lastSprite = 0 ;
+				this.box.css({'backgroundPosition': -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0'}) ;
+				
+				
+				//if ( this.id == 'ship' ) 
+			//		console.log(this.settings.sprites,  -1*this.settings.sprites[this.lastSprite]*this.settings.width+'px 0') ;
 			}
 			
 			// -- Move div
+			if ( ! this.settings.nomove ) {
 				if ( this.settings.moveParent ) {
-				this.box.parent().transform({'translate': this.x+'px, '+this.y+'px'}) ;
+					this.box.parent().css({'translate': this.x+'px, '+this.y+'px'}) ;
 				} else {
-				this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ;
+					this.box.css({'translate': this.x+'px, '+this.y+'px'}) ;
+				}
 			}
 		}
 		
@@ -178,10 +191,8 @@ Layout.prototype.createObj = function(opts) {
 		if ( $.isFunction(this.settings.animate) ) {
 			this.parent = self ;
 			this.settings.animate(this) ;
-			this.draw(this) ;
-		} else {
-			this.draw() ;
 		} 
+		if ( ! this.nodraw ) this.draw() ;
 	}
 	
 	// -- Remove object

guiltouf/js/layouts/BgLayer.js

@@ -8,12 +8,14 @@ Layouts.Background = new Layout({
 		animate: function(obj) { 
 			obj.y -= obj.parent.settings.speed*obj.parent.settings.direction;
 			obj.parent.settings.dom.css({backgroundPosition: '0 '+obj.y+'px'}) ;
+			obj.nodraw = true ;
 		}
 	}],
 	
 	// -- Define current Speed
 	speed: 5,
 	direction: -1,
+	nomove: true,
 	
 	// -- Define canvas parent
 	dom: $('div#background')

guiltouf/js/layouts/Ennemies.js

@@ -16,6 +16,7 @@ Layouts.Ennemies = new Layout({
 
 // -- Create a random ennemy
 Layouts.Ennemies.createRandom = function(opts) {
+	var self = this ;
 	var bulletConf = {
 		name: 'ennemy',
 		width: 60,
@@ -25,12 +26,12 @@ Layouts.Ennemies.createRandom = function(opts) {
 		sprites: [0,1,2],
 		speed:  Math.round(Math.max(10, Math.random()*20)),
 		direction: 1,
-		origin: {x:Math.round(Math.random()*this.width), y:0},
+		origin: {x:Math.round(Math.random()*self.width), y:Math.round(-Math.random()*self.height)},
 		animate: function (obj) {
-			if ( obj.deleteAfter ) return false;
 	     	obj.y += obj.settings.speed*obj.settings.direction ;
-	    	if ( obj.y > obj.parent.height ) {
-	     		obj.deleteAfter = true ;
+	    	if ( obj.y > obj.parent.height+obj.height ) {
+	    		obj.x = Math.round(Math.random()*self.width)
+	     		obj.y = Math.round(-Math.random()*self.height) ;
 	    	}
 		}
 	} ;

guiltouf/js/layouts/PlayerLayer.js

@@ -6,18 +6,19 @@ Layouts.Player = new Layout({
 	el: [{
 		id: 'ship',
 		width: 160,
-		height: 137,
+		height: 160,
+		sprites: [0,1],
 		origin: {
 			x: Wyrian.width/2 - 80,
 			y: Wyrian.height-220
 		},
 		fireInterval: 300,
-		//moveParent: true,
 		animate: function(obj) { 
 		
 			// -- KEY up /down
-			if ( Wyrian.input.keyboard.up && obj.y > 0 ) {
-				obj.y -= obj.parent.settings.speed ;
+			if ( Wyrian.input.keyboard.up ) {
+				if ( obj.y > 0 ) obj.y -= obj.parent.settings.speed ;
+
 			}
 			if ( Wyrian.input.keyboard.down && (obj.y < (Wyrian.height-obj.height) ) ) {
 				obj.y += obj.parent.settings.speed;
@@ -25,16 +26,11 @@ Layouts.Player = new Layout({
 			
 			// -- Left/Right move : choose sprite sequence to display
 			if ( Wyrian.input.keyboard.left && (obj.x > 0)) {
-				obj.spriteIndex = 0 ;
 				obj.x -= obj.parent.settings.speed;
 			} 
-			else if ( Wyrian.input.keyboard.right && (obj.x < Wyrian.width-obj.width) ) {
-				obj.spriteIndex = 2 ;
+			if ( Wyrian.input.keyboard.right && (obj.x < Wyrian.width-obj.width) ) {
 				obj.x += obj.parent.settings.speed;
 			} 
-			else {
-				obj.spriteIndex = 1 ;
-			}
 			
 			// -- Press Space : fire
 			if ( Wyrian.input.keyboard.space ) {
@@ -42,6 +38,22 @@ Layouts.Player = new Layout({
 			}
 
 		}
+	}, {
+		
+		id: 'ship_reactor',
+		width: 44,
+		height: 68,
+		backgroundColor:'red',
+		imageSrc: '/images/sprites/reactor_fire_sprite.png',
+		sprites: [0,1],
+		nomove: true,
+		animate: function(obj) {
+			obj.settings.sprites = [0,1] ;
+			if ( Wyrian.input.keyboard.up ) {
+				obj.getInstance().settings.sprites = [2,3,4] ;
+			}
+		}
+		
 	}],
 	
 	// -- Define current Speed
@@ -66,24 +78,13 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
 	} ;
 	
 	// -- Default Left 
-	if ( bulletType == 'default_left' )  {
+	if ( bulletType == 'default' )  {
 		bulletConf.width = 16 ;
 		bulletConf.height = 64 ;
 		bulletConf.sprites = false ;
 		bulletConf.imageSrc = '/images/12px-long-blue.png' ;
 		bulletConf.name = 'bullet' ;
-		bulletConf.origin.x = obj.x+8+obj.width/2 ;
-		bulletConf.origin.y = obj.y - bulletConf.height ;
-	}
-	
-	// -- Default Right
-	if ( bulletType == 'default_right' )  {
-		bulletConf.width = 16 ;
-		bulletConf.height = 64 ;
-		bulletConf.sprites = false ;
-		bulletConf.imageSrc = '/images/12px-long-blue.png' ;
-		bulletConf.name = 'bullet' ;
-		bulletConf.origin.x = obj.x-8+obj.width/2 ;
+		bulletConf.origin.x = obj.x-6+obj.width/2 ;
 		bulletConf.origin.y = obj.y - bulletConf.height ;
 	}
 	
@@ -93,8 +94,8 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
 		bulletConf.height = 60 ;
 		bulletConf.speed = 20 ;
 		bulletConf.name = 'bullet' ;
-		bulletConf.origin.x = obj.x+30+obj.width/2 ;
-		bulletConf.origin.y = obj.y + 30 - bulletConf.height ;
+		bulletConf.origin.x = obj.x+20+obj.width/2 ;
+		bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
 	}
 	
 	// -- Big Left
@@ -103,8 +104,8 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
 		bulletConf.height = 60 ;
 		bulletConf.speed = 20 ;
 		bulletConf.name = 'bullet' ;
-		bulletConf.origin.x = obj.x-60+obj.width/2 ;
-		bulletConf.origin.y = obj.y + 30 - bulletConf.height ;
+		bulletConf.origin.x = obj.x-75+obj.width/2 ;
+		bulletConf.origin.y = obj.y + 50 - bulletConf.height ;
 	}
 	
 	// -- The animate function
@@ -136,8 +137,7 @@ Layouts.Player.fire = function(obj) {
 	
 	// Create new bullets
 	var bullets = [] ;
-	bullets.push(this.bulletLib(obj, 'default_left')) ;
-	bullets.push(this.bulletLib(obj, 'default_right')) ;
+	bullets.push(this.bulletLib(obj, 'default')) ;
 	bullets.push(this.bulletLib(obj, 'big_left')) ;
 	bullets.push(this.bulletLib(obj, 'big_right')) ;
 	for ( var i in bullets ) {