New Version : 0.2

guiltouf/css/style.css

@@ -1,11 +1,13 @@
 .container {
-
+	width: 100%;
+	height: 100%;
 }
 
 .container .layout {
 	width: 100%;
 	height: 100%;
 	position: absolute;
+	display: block;
 	top: 0;
 	right: 0;
 	overflow: hidden;
@@ -25,10 +27,55 @@
 }
 
 
-#game .ship { border: 1px solid red; }
+/* The Ship */
+#game #ship { 
+	position: absolute;
+	display: block;
+	top:0;
+	left:0;
+	background: rgba(20, 20, 20, 1);
+}
+
+#ship .wing { 
+	position: absolute;
+	top:33px;
+	left:6px;
+	display: block;
+	width: 70px;
+	height: 55px;
+	background: transparent url(/images/sprites/wings_eagle_sprite.png) no-repeat 0 0;
+}
+
+#ship .wing.right {
+	left: 83px;
+	background-position: right 0;
+}
+
+#ship .ship-body {
+	position: absolute;
+	display: block;
+	top: 20px;
+	left: 0;
+	width: 154px;
+	height: 137px;
+	background: transparent url(/images/sprites/spaceship_body.png) no-repeat 0 0;
+}
+
+#ship .ship-canon {
+	position: absolute;
+	display: block;
+	top:0;
+	left: 70.5px;
+	width: 18px;
+	height: 40px;
+	background: transparent url(/images/sprites/weapon_pilot.png) no-repeat 0 0;
+}
+
+/* Ennemies */
 #game .ennemy { border: 1px solid blue; }
 #hud {
 	z-index: 90;	
+	display: none;
 }
 
 #ship {

guiltouf/index.html

@@ -7,10 +7,17 @@
 	<div id="debug">
 		yep
 	</div>
-	<div class="container">
+	<div class="container" id="GameContainer">
 		<div id="background" class="layout"></div>
 		<div id="ground" class="layout"></div>
-		<div id="game" class="layout"><div id="ship"></div></div>
+		<div id="game" class="layout">
+			<div id="ship">
+				<div class="ship-canon"></div>
+				<div class="ship-body"></div>
+				<div class="wing left"></div>
+				<div class="wing right"></div>
+			</div>
+		</div>
 		<div id="hud" class="layout"></div>
 	</div>
 	

guiltouf/js/GameClass.js

@@ -22,6 +22,10 @@ var app = function(opts) {
 	$.extend(true, settings, opts);
 	this.settings = settings ;
 	
+	// Set Scene size
+	this.width = $(document).width() ;
+	this.height = $(document).height() ;
+	
 	// If canvas supported in native or use extended support for croos browsing like excnvas for ie
 	this.support = this.support || {} ;
 	if ( typeof G_vmlCanvasManager != 'undefined' ) {
@@ -89,7 +93,7 @@ app.prototype.loopAnimation = function() {
 		if ( ! _el.deleteAfter ) numEnnemies++ ;
 	}
 	$('#debug').html(numEnnemies) ;
-	for ( var i = numEnnemies-1 ; i < Level + 2 ; i++ ) {
+	for ( var i = numEnnemies-1 ; i < Level + 3 ; i++ ) {
 		Layouts.Ennemies.createRandom() ;
 	}
 }

guiltouf/js/LayoutClass.js

@@ -98,7 +98,7 @@ Layout.prototype.createObj = function(opts) {
 		
 		// -- Store options
 		this.name = settingsObj.name || 'default' ;
-		this.id = settingsObj.id || Wyrian.uniqId++ ;
+		this.id = settingsObj.id || 'element_'+Wyrian.uniqId++ ;
 		this.width = settingsObj.width ? settingsObj.width : self.width  ;
 		this.height = settingsObj.height ? settingsObj.height : self.height  ;
 		this.settings = settingsObj ;
@@ -115,21 +115,28 @@ Layout.prototype.createObj = function(opts) {
 		this.init() ;
 		
 		// -- Create a DOM object
-		this.box = $('<div>', {
-			class:'sprite '+this.name,
-			id: 'element_'+this.id,
-			css: {
-				position: 'absolute', 
-				display: 'block', 
-				top: 0,
-				left: 0,
-				width: this.width,
-				height: this.height,
-				backgroundColor: settingsObj.backgroundColor, 
-				backgroundRepeat: settingsObj.backgroundRepeat,
-				backgroundPosition: settingsObj.backgroundPosition,
-				backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
-			}	
+		this.box = $('#'+this.id) ;
+		if ( ! this.box.length ) {
+			this.box = $('<div>', {
+				class:'sprite '+this.name,
+				id: this.id,
+				css:{
+					position: 'absolute', 
+				    display: 'block', 
+				    top: 0,
+				    left: 0,
+				    backgroundColor: settingsObj.backgroundColor, 
+				    backgroundRepeat: settingsObj.backgroundRepeat,
+				    backgroundPosition: settingsObj.backgroundPosition,
+				    backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
+				}
+			})
+		}
+		
+		// -- Apply CSS
+		this.box.css({
+		    width: this.width,
+		    height: this.height
 		}).transform({'translate': this.x+'px, '+this.y+'px'}) ;
 		
 		// -- Append to scene
@@ -145,7 +152,7 @@ Layout.prototype.createObj = function(opts) {
 	
 	// -- Draw object into scene
 	Obj.prototype.draw = function() {
-		if ( (this.y >= -this.height) && (this.y <= (self.height+this.height)) && this.x >= -this.width && this.x <= (self.width+this.width) ) {
+		if ( (this.y >= -this.height) && (this.y <= (Wyrian.height+this.height)) && this.x >= -this.width && this.x <= (Wyrian.width+this.width) ) {
 		
 			// -- Set sprite to display
 			if ( this.settings.sprites ) {
@@ -157,7 +164,11 @@ Layout.prototype.createObj = function(opts) {
 			}
 			
 			// -- Move div
-			this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ;
+			if ( this.settings.moveParent ) {
+				this.box.parent().transform({'translate': this.x+'px, '+this.y+'px'}) ;
+			} else {
+				this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ;
+			}
 		}
 		
 	} ;

guiltouf/js/Wyrian.js

@@ -3,14 +3,15 @@
 ***************************************************************************/
 Wyrian = new app({
 	'libs': [
-		'order!jquery.transform-0.9.3.min'
+		'order!jquery.transform-0.9.3.min',
+		'order!LayoutClass'
 	],
 	'layers': [
-		'order!LayoutClass',
 		'order!layouts/BgLayer',
 		'order!layouts/PlayerLayer',
 		'order!layouts/Ennemies'
-	]
+	],
+	'wrapper': $('#GameContainer') 
 }) ;
 
 	    	    

guiltouf/js/layouts/Ennemies.js

@@ -23,7 +23,7 @@ Layouts.Ennemies.createRandom = function(opts) {
 		power: 40,
 		imageSrc: '/images/bullet-electric-sprite.png',
 		sprites: [0,1,2],
-		speed:  Math.round(Math.max(10, Math.random()*30)),
+		speed:  Math.round(Math.max(10, Math.random()*20)),
 		direction: 1,
 		origin: {x:Math.round(Math.random()*this.width), y:0},
 		animate: function (obj) {

guiltouf/js/layouts/PlayerLayer.js

@@ -4,17 +4,22 @@ Layouts.Player = new Layout({
 
 	// -- Define elements to draw with options
 	el: [{
-		name: 'ship',
-		width: 200,
-		height: 80,
+		id: 'ship',
+		width: 160,
+		height: 137,
+		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.down && (obj.y < (obj.parent.height-obj.height) ) ) {
+			if ( Wyrian.input.keyboard.down && (obj.y < (Wyrian.height-obj.height) ) ) {
 				obj.y += obj.parent.settings.speed;
 			}
 			
@@ -23,7 +28,7 @@ Layouts.Player = new Layout({
 				obj.spriteIndex = 0 ;
 				obj.x -= obj.parent.settings.speed;
 			} 
-			else if ( Wyrian.input.keyboard.right && (obj.x < obj.parent.width-obj.width) ) {
+			else if ( Wyrian.input.keyboard.right && (obj.x < Wyrian.width-obj.width) ) {
 				obj.spriteIndex = 2 ;
 				obj.x += obj.parent.settings.speed;
 			}