New Version : 0.2

This commit is contained in:
Guillaume DE LA RUE 2011-02-12 18:54:57 +01:00
parent 33384bc1fb
commit d5893960ba
27 changed files with 108 additions and 33 deletions

View file

@ -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 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -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>

View file

@ -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() ;
} }
} }

View file

@ -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'}) ;
} }
}
} ; } ;

View file

@ -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')
}) ; }) ;

View file

@ -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) {

View file

@ -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;
} }