diff --git a/css/style.css b/css/style.css index 46b2400..65885c2 100644 --- a/css/style.css +++ b/css/style.css @@ -27,7 +27,7 @@ } #background { - background: transparent url(/images/debug-bg.jpg) repeat 0 0; + background: transparent url(../images/debug-bg.jpg) repeat 0 0; z-index: 0; } @@ -51,7 +51,7 @@ display: block; width: 70px; height: 55px; - background: transparent url(/images/sprites/wings_eagle_sprite.png) no-repeat 0 0; + background: transparent url(../images/sprites/wings_eagle_sprite.png) no-repeat 0 0; } #ship .wing.right { left: 83px; background-position: right 0; } @@ -62,7 +62,7 @@ left: 0; width: 154px; height: 137px; - background: transparent url(/images/sprites/spaceship_body.png) no-repeat 0 0; + background: transparent url(../images/sprites/spaceship_body.png) no-repeat 0 0; } #ship .ship-canon { @@ -72,7 +72,7 @@ left: 71px; width: 18px; height: 40px; - background: transparent url(/images/sprites/weapon_pilot.png) no-repeat 0 0; + background: transparent url(../images/sprites/weapon_pilot.png) no-repeat 0 0; } #ship .ship-foray { @@ -82,7 +82,7 @@ left: 117px; width: 19px; height: 33px; - background: transparent url(/images/sprites/weapon_foray.png) no-repeat 0 0; + background: transparent url(../images/sprites/weapon_foray.png) no-repeat 0 0; } #ship .ship-foray.right { @@ -93,7 +93,7 @@ #ship .ship-reactor { position: absolute; display: block; - background: transparent url(/images/sprites/reactor_drum.png) no-repeat 0 0; + background: transparent url(../images/sprites/reactor_drum.png) no-repeat 0 0; top:85px; left:72px; width: 15px; @@ -103,7 +103,7 @@ #ship .ship_reactor_fire { position: absolute; display: block; - background: transparent url(/images/sprites/reactor_fire_sprite.png) no-repeat 0px 0; + background: transparent url(../images/sprites/reactor_fire_sprite.png) no-repeat 0px 0; top:88px; left: 58px; width: 44px; @@ -156,11 +156,62 @@ } /* Debug Panel */ -#debug { +#game-over { position: absolute; - display: block; - right: 10px; - top: 10px; + display: none; + left: 0px; + top: 50%; + margin-top: -100px; color:#fff; z-index: 1000; + width:100%; + text-align: center; +} + +#game-over .text { + position: relative; + display: block; + font-size: 64px; +} + +#game-over #restart-game { + position: relative; + display: block; + margin: 20px auto; + width: 300px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border: 5px solid rgba(0,0,0, 0.3); + padding: 15px 0 10px; + font-size: 24px; + background: rgba(0,0,0, 0.1); +} + +#game-over #restart-game.hover { + cursor: pointer; + background: rgba(0,0,0, 0.2); + box-shadow: 0 0 10px rgba(27, 161, 255, 0.5) ; +} + +/* Credits */ +#credits { + position: absolute; + display: block; + right: 20px; + bottom: 10px; + color:#ddd; + z-index: 1000; + text-align: right; + font-size: 12px; + font-family: "Lucida Grande", Verdana; +} + +#credits a { + text-decoration: none; + color: #1ba1ff; +} + +#credits a:hover { + text-decoration: underline; } \ No newline at end of file diff --git a/images/sprites/alien_1.png b/images/sprites/alien_1.png new file mode 100644 index 0000000..c4a4968 Binary files /dev/null and b/images/sprites/alien_1.png differ diff --git a/images/sprites/alien_1.psd b/images/sprites/alien_1.psd new file mode 100644 index 0000000..d622df0 Binary files /dev/null and b/images/sprites/alien_1.psd differ diff --git a/images/sprites/alien_2.png b/images/sprites/alien_2.png new file mode 100644 index 0000000..3798310 Binary files /dev/null and b/images/sprites/alien_2.png differ diff --git a/images/sprites/wings_flower_sprite.png b/images/sprites/wings_flower_sprite.png new file mode 100644 index 0000000..e8e330e Binary files /dev/null and b/images/sprites/wings_flower_sprite.png differ diff --git a/images/sprites/wings_tronconeuse_sprite.png b/images/sprites/wings_tronconeuse_sprite.png new file mode 100644 index 0000000..b59f4d6 Binary files /dev/null and b/images/sprites/wings_tronconeuse_sprite.png differ diff --git a/index.html b/index.html index ea33b4e..98a393d 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,33 @@ - - - + + + + + + + + +Wyrian - A clone Game of Tyrian in HTML5 + + + + + + + -
RESET
+
+
GAME OVER
+
Restart
+
+
+ HTML5 Game Jam 2011
+ Wyrian v0.2a | Guillaume DE LA RUE
Thanks to Glenux for design and Matthieu Bosquet and all people presents :) +
diff --git a/js/.empty b/js/.empty deleted file mode 100644 index e69de29..0000000 diff --git a/js/GameClass.js b/js/GameClass.js index 5fdcee4..58c5609 100644 --- a/js/GameClass.js +++ b/js/GameClass.js @@ -39,7 +39,7 @@ app.prototype.init = function() { var self = this ; require({ - baseUrl: "/js/", + baseUrl: "js/", urlArgs: "bust=" + self.version }, @@ -76,6 +76,9 @@ app.prototype.loopAnimation = function() { } } + // -- Get level + Level = Math.floor((Wyrian.score||0)/1000) ; + // -- Create ennemies if needed var numEnnemies = 0 ; for ( var i in Layouts.Ennemies.els ) { diff --git a/js/LayoutClass.js b/js/LayoutClass.js index 9613870..73a85b5 100644 --- a/js/LayoutClass.js +++ b/js/LayoutClass.js @@ -236,7 +236,7 @@ Layout.prototype.createObj = function(opts) { } ; // -- Test if in viewport - if ( (type != this.name) && (this.name != 'default') && (el.settings.type != this.settings.type) ) { + if ( (type != this.name) && (this.name != 'default' && this.name != 'explosion') && (el.settings.type != this.settings.type) ) { var touchTopRight = ( ( B.x <= A.xX && B.x >= A.x ) diff --git a/js/Wyrian.js b/js/Wyrian.js index 5759ccb..40fa0c5 100644 --- a/js/Wyrian.js +++ b/js/Wyrian.js @@ -22,7 +22,7 @@ jQuery(document).ready(function() { * Load Dependencies & Create Application ***************************************************************************/ require({ - baseUrl: "/js/", + baseUrl: "js/", urlArgs: "bust=" + Wyrian.version }, Wyrian.settings.libs, @@ -48,7 +48,6 @@ jQuery(document).ready(function() { // -- Game is loaded $(document).bind('gameLoaded', function(e, res) { - if ( timers.loopGame ) clearInterval(timers.loopGame) ; timers.loopGame = setInterval(Wyrian.loopAnimation, 1000/FPS) ; }); @@ -63,11 +62,14 @@ jQuery(document).ready(function() { Wyrian.score = 0 ; Wyrian.loops = 0 ; Layouts.Ennemies.els = [] ; + $('.sprite').remove() ; $.each(Layouts, function(key, val){ Layouts[key].running = true ; $.each(val.els, function(key2, val2){ - Layouts[key].els[key2].x = Layouts[key].els[key2].settings.origin.x ; - Layouts[key].els[key2].y = Layouts[key].els[key2].settings.origin.y ; + if ( Layouts[key].els.length && Layouts[key].els[key2] ) { + Layouts[key].els[key2].x = Layouts[key].els[key2].settings.origin.x ; + Layouts[key].els[key2].y = Layouts[key].els[key2].settings.origin.y ; + } }) ; }) ; @@ -84,17 +86,27 @@ jQuery(document).ready(function() { $(document).bind('gameComplete', function(e, res) { // -- Stop layouts running - $('.sprite').remove() ; + $('.sprite').not('.explosion').remove() ; Layouts.Ennemies.running = false ; Layouts.Background.running = false ; + // -- Show game over overlay + $('#game-over:hidden').fadeIn(500) ; + // -- Stop loopAnimation if ( timers.loopGame ) clearInterval(timers.loopGame) ; }) ; - $('#debug').click(function() { - $(document).trigger('gameReset') ; + // -- Bind Restart Screen controls + $('#game-over #restart-game').click(function() { + $('#game-over:visible').fadeOut(500, function() { + $(document).trigger('gameReset') ; + }) ; + }).hover(function() { + $(this).addClass('hover') ; + }, function() { + $(this).removeClass('hover') ; }) ; }) ; \ No newline at end of file diff --git a/js/layouts/Ennemies.js b/js/layouts/Ennemies.js index 54e21a9..4137c37 100644 --- a/js/layouts/Ennemies.js +++ b/js/layouts/Ennemies.js @@ -26,41 +26,55 @@ Layouts.Ennemies.reinitObj = function(obj) { // -- Create a random ennemy Layouts.Ennemies.createRandom = function(opts) { - var self = this, + var self = this ; - alien = { - name: 'ennemy', - type: 'alien', - width: 60, - height: 60, - power: 40, - imageSrc: '/images/bullet-electric-sprite.png', - sprites: [0,1,2], - speed: Math.round(Math.max(10, Math.random()*20)), - direction: 1, - origin: {x:Math.round(Math.random()*self.width), y:Math.round(-Math.random()*self.height)}, - explode: function(obj) { - if ( ! obj || obj.explosing ) return false ; - self.createExplosion(obj) ; - obj.explosing = true ; - obj.box.hide(0); - obj = self.reinitObj(obj); - - Wyrian.score = Wyrian.score || 0 ; - Wyrian.score += obj.settings.power ; + var libsAlien = [ + { + width: 80, + height: 80, + imageSrc: 'images/sprites/alien_1.png?_=1', + sprites: [0,1,2,3] }, - animate: function (obj) { - if ( obj.explosing ) { - obj.y = obj.parent.heigh+1000 ; - } else { - obj.y += obj.settings.speed*obj.settings.direction ; - } - if ( obj.y > obj.parent.height+obj.height ) { - obj = self.reinitObj(obj); - } + { + width: 80, + height: 80, + imageSrc: 'images/sprites/alien_2.png?_=1', + sprites: [0] } - } ; + ] ; + + // Choose one in the lib + var alien = libsAlien[Math.floor(Math.random()*libsAlien.length)] ; + + // Construct global properties + alien.name = 'ennemy' ; + alien.type = 'alien' ; + alien.power = 40 ; + alien.speed = Math.round(Math.max(10, Math.random()*20)) ; + alien.direction = 1 ; + alien.origin = {x:Math.round(Math.random()*self.width), y:Math.round(-Math.random()*self.height)} ; + alien.explode = function(obj) { + if ( ! obj || obj.explosing ) return false ; + self.createExplosion(obj) ; + obj.explosing = true ; + obj.box.hide(0); + obj = self.reinitObj(obj); + + Wyrian.score = Wyrian.score || 0 ; + Wyrian.score += obj.settings.power ; + } ; + alien.animate = function (obj) { + if ( obj.explosing ) { + obj.y = obj.parent.height+1000 ; + } else { + obj.y += obj.settings.speed*obj.settings.direction ; + } + if ( obj.y > obj.parent.height+obj.height ) { + obj = self.reinitObj(obj); + } + } ; + // Add it to scene this.els.push(this.createObj(alien)) ; } ; @@ -73,7 +87,7 @@ Layouts.Ennemies.createExplosion = function(object) { type: 'neutral', width:330, height:330, - imageSrc: '/images/sprites/explosion-sprite.png', + imageSrc: 'images/sprites/explosion-sprite.png', sprites: [0,1,2], origin: {x: object.x-330/2+object.width/2, y: object.y-330/2+object.height/2}, animate: function(obj) { diff --git a/js/layouts/PlayerLayer.js b/js/layouts/PlayerLayer.js index 6d8982f..2180402 100644 --- a/js/layouts/PlayerLayer.js +++ b/js/layouts/PlayerLayer.js @@ -50,7 +50,7 @@ Layouts.Player = new Layout({ id: 'ship_reactor', width: 44, height: 68, - imageSrc: '/images/sprites/reactor_fire_sprite.png', + imageSrc: 'images/sprites/reactor_fire_sprite.png', sprites: [0,1], nomove: true, animate: function(obj) { @@ -77,7 +77,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) { var bulletConf = { power: 40, - imageSrc: '/images/bullet-electric-sprite.png', + imageSrc: 'images/bullet-electric-sprite.png', sprites: [0,1,2], speed: 40, direction: -1, @@ -96,7 +96,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) { bulletConf.width = 16 ; bulletConf.height = 64 ; bulletConf.sprites = false ; - bulletConf.imageSrc = '/images/12px-long-blue.png' ; + bulletConf.imageSrc = 'images/12px-long-blue.png' ; bulletConf.origin.x = obj.x-6+obj.width/2 ; bulletConf.origin.y = obj.y - bulletConf.height ; }