diff --git a/guiltouf/css/style.css b/guiltouf/css/style.css
index a48bcfb..2846e98 100644
--- a/guiltouf/css/style.css
+++ b/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 {
diff --git a/guiltouf/images/sprites/fire.001.png b/guiltouf/images/sprites/fire.001.png
new file mode 100644
index 0000000..df34b5e
Binary files /dev/null and b/guiltouf/images/sprites/fire.001.png differ
diff --git a/guiltouf/images/sprites/fire.002.png b/guiltouf/images/sprites/fire.002.png
new file mode 100644
index 0000000..58f1e2f
Binary files /dev/null and b/guiltouf/images/sprites/fire.002.png differ
diff --git a/guiltouf/images/sprites/fire.003.png b/guiltouf/images/sprites/fire.003.png
new file mode 100644
index 0000000..b9361b0
Binary files /dev/null and b/guiltouf/images/sprites/fire.003.png differ
diff --git a/guiltouf/images/sprites/fire.004.png b/guiltouf/images/sprites/fire.004.png
new file mode 100644
index 0000000..adbe6f4
Binary files /dev/null and b/guiltouf/images/sprites/fire.004.png differ
diff --git a/guiltouf/images/sprites/fire.005.png b/guiltouf/images/sprites/fire.005.png
new file mode 100644
index 0000000..7ab1e63
Binary files /dev/null and b/guiltouf/images/sprites/fire.005.png differ
diff --git a/guiltouf/images/sprites/fire.png b/guiltouf/images/sprites/fire.png
new file mode 100644
index 0000000..10bdd98
Binary files /dev/null and b/guiltouf/images/sprites/fire.png differ
diff --git a/guiltouf/images/sprites/reactor_drum.png b/guiltouf/images/sprites/reactor_drum.png
new file mode 100644
index 0000000..fe80dce
Binary files /dev/null and b/guiltouf/images/sprites/reactor_drum.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.001.png b/guiltouf/images/sprites/reactor_fire.001.png
new file mode 100644
index 0000000..09a5d02
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.001.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.002.png b/guiltouf/images/sprites/reactor_fire.002.png
new file mode 100644
index 0000000..0ca7a81
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.002.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.003.png b/guiltouf/images/sprites/reactor_fire.003.png
new file mode 100644
index 0000000..3a5553d
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.003.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.004.png b/guiltouf/images/sprites/reactor_fire.004.png
new file mode 100644
index 0000000..339049a
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.004.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.005.png b/guiltouf/images/sprites/reactor_fire.005.png
new file mode 100644
index 0000000..7deb665
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.005.png differ
diff --git a/guiltouf/images/sprites/reactor_fire.png b/guiltouf/images/sprites/reactor_fire.png
new file mode 100644
index 0000000..ad30d5c
Binary files /dev/null and b/guiltouf/images/sprites/reactor_fire.png differ
diff --git a/guiltouf/images/sprites/spaceship_body.png b/guiltouf/images/sprites/spaceship_body.png
new file mode 100644
index 0000000..06fd88f
Binary files /dev/null and b/guiltouf/images/sprites/spaceship_body.png differ
diff --git a/guiltouf/images/sprites/weapon_foray.png b/guiltouf/images/sprites/weapon_foray.png
new file mode 100644
index 0000000..689569f
Binary files /dev/null and b/guiltouf/images/sprites/weapon_foray.png differ
diff --git a/guiltouf/images/sprites/weapon_pilot.png b/guiltouf/images/sprites/weapon_pilot.png
new file mode 100644
index 0000000..628d0f8
Binary files /dev/null and b/guiltouf/images/sprites/weapon_pilot.png differ
diff --git a/guiltouf/images/sprites/wings_eagle.png b/guiltouf/images/sprites/wings_eagle.png
new file mode 100644
index 0000000..4949249
Binary files /dev/null and b/guiltouf/images/sprites/wings_eagle.png differ
diff --git a/guiltouf/images/sprites/wings_eagle_sprite.png b/guiltouf/images/sprites/wings_eagle_sprite.png
new file mode 100644
index 0000000..05b0dfe
Binary files /dev/null and b/guiltouf/images/sprites/wings_eagle_sprite.png differ
diff --git a/guiltouf/images/sprites/wings_flower.png b/guiltouf/images/sprites/wings_flower.png
new file mode 100644
index 0000000..327bcd9
Binary files /dev/null and b/guiltouf/images/sprites/wings_flower.png differ
diff --git a/guiltouf/images/sprites/wings_tronconeuse.png b/guiltouf/images/sprites/wings_tronconeuse.png
new file mode 100644
index 0000000..ddcb89f
Binary files /dev/null and b/guiltouf/images/sprites/wings_tronconeuse.png differ
diff --git a/guiltouf/index.html b/guiltouf/index.html
index b0c4688..87d4f73 100644
--- a/guiltouf/index.html
+++ b/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>
diff --git a/guiltouf/js/GameClass.js b/guiltouf/js/GameClass.js
index 46cf01a..d0110c1 100644
--- a/guiltouf/js/GameClass.js
+++ b/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() ;
}
}
diff --git a/guiltouf/js/LayoutClass.js b/guiltouf/js/LayoutClass.js
index 5f30ad6..1411264 100644
--- a/guiltouf/js/LayoutClass.js
+++ b/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'}) ;
+ }
}
} ;
diff --git a/guiltouf/js/Wyrian.js b/guiltouf/js/Wyrian.js
index 3648a60..5b6d46f 100644
--- a/guiltouf/js/Wyrian.js
+++ b/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')
}) ;
diff --git a/guiltouf/js/layouts/Ennemies.js b/guiltouf/js/layouts/Ennemies.js
index 1a9510e..7d05adb 100644
--- a/guiltouf/js/layouts/Ennemies.js
+++ b/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) {
diff --git a/guiltouf/js/layouts/PlayerLayer.js b/guiltouf/js/layouts/PlayerLayer.js
index 96e5d96..108509a 100644
--- a/guiltouf/js/layouts/PlayerLayer.js
+++ b/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;
}