New Version : 0.2
|
@ -1,11 +1,13 @@
|
||||||
.container {
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container .layout {
|
.container .layout {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
display: block;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
overflow: hidden;
|
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; }
|
#game .ennemy { border: 1px solid blue; }
|
||||||
#hud {
|
#hud {
|
||||||
z-index: 90;
|
z-index: 90;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#ship {
|
#ship {
|
||||||
|
|
BIN
guiltouf/images/sprites/fire.001.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
guiltouf/images/sprites/fire.002.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
guiltouf/images/sprites/fire.003.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
guiltouf/images/sprites/fire.004.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
guiltouf/images/sprites/fire.005.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
guiltouf/images/sprites/fire.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
guiltouf/images/sprites/reactor_drum.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
guiltouf/images/sprites/reactor_fire.001.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
guiltouf/images/sprites/reactor_fire.002.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
guiltouf/images/sprites/reactor_fire.003.png
Normal file
After Width: | Height: | Size: 3.7 KiB |
BIN
guiltouf/images/sprites/reactor_fire.004.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
guiltouf/images/sprites/reactor_fire.005.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
guiltouf/images/sprites/reactor_fire.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
guiltouf/images/sprites/spaceship_body.png
Normal file
After Width: | Height: | Size: 3.8 KiB |
BIN
guiltouf/images/sprites/weapon_foray.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
guiltouf/images/sprites/weapon_pilot.png
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
guiltouf/images/sprites/wings_eagle.png
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
guiltouf/images/sprites/wings_eagle_sprite.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
guiltouf/images/sprites/wings_flower.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
guiltouf/images/sprites/wings_tronconeuse.png
Normal file
After Width: | Height: | Size: 4.8 KiB |
|
@ -7,10 +7,17 @@
|
||||||
<div id="debug">
|
<div id="debug">
|
||||||
yep
|
yep
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container" id="GameContainer">
|
||||||
<div id="background" class="layout"></div>
|
<div id="background" class="layout"></div>
|
||||||
<div id="ground" 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 id="hud" class="layout"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,10 @@ var app = function(opts) {
|
||||||
$.extend(true, settings, opts);
|
$.extend(true, settings, opts);
|
||||||
this.settings = settings ;
|
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
|
// If canvas supported in native or use extended support for croos browsing like excnvas for ie
|
||||||
this.support = this.support || {} ;
|
this.support = this.support || {} ;
|
||||||
if ( typeof G_vmlCanvasManager != 'undefined' ) {
|
if ( typeof G_vmlCanvasManager != 'undefined' ) {
|
||||||
|
@ -89,7 +93,7 @@ app.prototype.loopAnimation = function() {
|
||||||
if ( ! _el.deleteAfter ) numEnnemies++ ;
|
if ( ! _el.deleteAfter ) numEnnemies++ ;
|
||||||
}
|
}
|
||||||
$('#debug').html(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() ;
|
Layouts.Ennemies.createRandom() ;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -98,7 +98,7 @@ Layout.prototype.createObj = function(opts) {
|
||||||
|
|
||||||
// -- Store options
|
// -- Store options
|
||||||
this.name = settingsObj.name || 'default' ;
|
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.width = settingsObj.width ? settingsObj.width : self.width ;
|
||||||
this.height = settingsObj.height ? settingsObj.height : self.height ;
|
this.height = settingsObj.height ? settingsObj.height : self.height ;
|
||||||
this.settings = settingsObj ;
|
this.settings = settingsObj ;
|
||||||
|
@ -115,21 +115,28 @@ Layout.prototype.createObj = function(opts) {
|
||||||
this.init() ;
|
this.init() ;
|
||||||
|
|
||||||
// -- Create a DOM object
|
// -- Create a DOM object
|
||||||
|
this.box = $('#'+this.id) ;
|
||||||
|
if ( ! this.box.length ) {
|
||||||
this.box = $('<div>', {
|
this.box = $('<div>', {
|
||||||
class:'sprite '+this.name,
|
class:'sprite '+this.name,
|
||||||
id: 'element_'+this.id,
|
id: this.id,
|
||||||
css:{
|
css:{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
width: this.width,
|
|
||||||
height: this.height,
|
|
||||||
backgroundColor: settingsObj.backgroundColor,
|
backgroundColor: settingsObj.backgroundColor,
|
||||||
backgroundRepeat: settingsObj.backgroundRepeat,
|
backgroundRepeat: settingsObj.backgroundRepeat,
|
||||||
backgroundPosition: settingsObj.backgroundPosition,
|
backgroundPosition: settingsObj.backgroundPosition,
|
||||||
backgroundImage: settingsObj.imageSrc ? 'url('+settingsObj.imageSrc+')' : ''
|
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'}) ;
|
}).transform({'translate': this.x+'px, '+this.y+'px'}) ;
|
||||||
|
|
||||||
// -- Append to scene
|
// -- Append to scene
|
||||||
|
@ -145,7 +152,7 @@ Layout.prototype.createObj = function(opts) {
|
||||||
|
|
||||||
// -- Draw object into scene
|
// -- Draw object into scene
|
||||||
Obj.prototype.draw = function() {
|
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
|
// -- Set sprite to display
|
||||||
if ( this.settings.sprites ) {
|
if ( this.settings.sprites ) {
|
||||||
|
@ -157,8 +164,12 @@ Layout.prototype.createObj = function(opts) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// -- Move div
|
// -- Move div
|
||||||
|
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'}) ;
|
this.box.transform({'translate': this.x+'px, '+this.y+'px'}) ;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
} ;
|
} ;
|
||||||
|
|
||||||
|
|
|
@ -3,14 +3,15 @@
|
||||||
***************************************************************************/
|
***************************************************************************/
|
||||||
Wyrian = new app({
|
Wyrian = new app({
|
||||||
'libs': [
|
'libs': [
|
||||||
'order!jquery.transform-0.9.3.min'
|
'order!jquery.transform-0.9.3.min',
|
||||||
|
'order!LayoutClass'
|
||||||
],
|
],
|
||||||
'layers': [
|
'layers': [
|
||||||
'order!LayoutClass',
|
|
||||||
'order!layouts/BgLayer',
|
'order!layouts/BgLayer',
|
||||||
'order!layouts/PlayerLayer',
|
'order!layouts/PlayerLayer',
|
||||||
'order!layouts/Ennemies'
|
'order!layouts/Ennemies'
|
||||||
]
|
],
|
||||||
|
'wrapper': $('#GameContainer')
|
||||||
}) ;
|
}) ;
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@ Layouts.Ennemies.createRandom = function(opts) {
|
||||||
power: 40,
|
power: 40,
|
||||||
imageSrc: '/images/bullet-electric-sprite.png',
|
imageSrc: '/images/bullet-electric-sprite.png',
|
||||||
sprites: [0,1,2],
|
sprites: [0,1,2],
|
||||||
speed: Math.round(Math.max(10, Math.random()*30)),
|
speed: Math.round(Math.max(10, Math.random()*20)),
|
||||||
direction: 1,
|
direction: 1,
|
||||||
origin: {x:Math.round(Math.random()*this.width), y:0},
|
origin: {x:Math.round(Math.random()*this.width), y:0},
|
||||||
animate: function (obj) {
|
animate: function (obj) {
|
||||||
|
|
|
@ -4,17 +4,22 @@ Layouts.Player = new Layout({
|
||||||
|
|
||||||
// -- Define elements to draw with options
|
// -- Define elements to draw with options
|
||||||
el: [{
|
el: [{
|
||||||
name: 'ship',
|
id: 'ship',
|
||||||
width: 200,
|
width: 160,
|
||||||
height: 80,
|
height: 137,
|
||||||
|
origin: {
|
||||||
|
x: Wyrian.width/2 - 80,
|
||||||
|
y: Wyrian.height-220
|
||||||
|
},
|
||||||
fireInterval: 300,
|
fireInterval: 300,
|
||||||
|
//moveParent: true,
|
||||||
animate: function(obj) {
|
animate: function(obj) {
|
||||||
|
|
||||||
// -- KEY up /down
|
// -- KEY up /down
|
||||||
if ( Wyrian.input.keyboard.up && obj.y > 0 ) {
|
if ( Wyrian.input.keyboard.up && obj.y > 0 ) {
|
||||||
obj.y -= obj.parent.settings.speed ;
|
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;
|
obj.y += obj.parent.settings.speed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,7 +28,7 @@ Layouts.Player = new Layout({
|
||||||
obj.spriteIndex = 0 ;
|
obj.spriteIndex = 0 ;
|
||||||
obj.x -= obj.parent.settings.speed;
|
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.spriteIndex = 2 ;
|
||||||
obj.x += obj.parent.settings.speed;
|
obj.x += obj.parent.settings.speed;
|
||||||
}
|
}
|
||||||
|
|