glenux/wyrian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Last version before sleeping...

Browse source 
On line at : http://www.html5place.com/lab/wyrian/
This commit is contained in:
Guillaume DE LA RUE 2011-02-13 08:16:43 +01:00
parent c02cd9cdd7
commit 23909d5874
13 changed files with 161 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
css/style.css
View file

@ -27,7 +27,7 @@
} }
#background { #background {
background: transparent url(/images/debug-bg.jpg) repeat 0 0; background: transparent url(../images/debug-bg.jpg) repeat 0 0;
z-index: 0; z-index: 0;
} }
@ -51,7 +51,7 @@
display: block; display: block;
width: 70px; width: 70px;
height: 55px; 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; } #ship .wing.right { left: 83px; background-position: right 0; }
@ -62,7 +62,7 @@
left: 0; left: 0;
width: 154px; width: 154px;
height: 137px; 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 { #ship .ship-canon {
@ -72,7 +72,7 @@
left: 71px; left: 71px;
width: 18px; width: 18px;
height: 40px; 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 { #ship .ship-foray {
@ -82,7 +82,7 @@
left: 117px; left: 117px;
width: 19px; width: 19px;
height: 33px; 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 { #ship .ship-foray.right {
@ -93,7 +93,7 @@
#ship .ship-reactor { #ship .ship-reactor {
position: absolute; position: absolute;
display: block; 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; top:85px;
left:72px; left:72px;
width: 15px; width: 15px;
@ -103,7 +103,7 @@
#ship .ship_reactor_fire { #ship .ship_reactor_fire {
position: absolute; position: absolute;
display: block; 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; top:88px;
left: 58px; left: 58px;
width: 44px; width: 44px;
@ -156,11 +156,62 @@
} }
/* Debug Panel */ /* Debug Panel */
#debug { #game-over {
position: absolute; position: absolute;
display: block; display: none;
right: 10px; left: 0px;
top: 10px; top: 50%;
margin-top: -100px;
color:#fff; color:#fff;
z-index: 1000; 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;
} }

BIN
images/sprites/alien_1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
images/sprites/alien_1.psd Normal file
View file

Binary file not shown.

BIN
images/sprites/alien_2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/sprites/wings_flower_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
images/sprites/wings_tronconeuse_sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.3 KiB

30
index.html
View file

@ -1,11 +1,33 @@
<!doctype html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <html xmlns="http://www.w3.org/1999/xhtml"
<head> xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook Meta Tags -->
<title>Wyrian - A clone Game of Tyrian in HTML5</title>
<meta property="og:type" content="game" />
<meta property="og:title" content="Wyrian - A clone Game of Tyrian in HTML5" />
<meta property="og:site_name" content="Wyrian" />
<meta property='og:url' content='http://www.html5place.com/lab/wyrian/' />
<meta property="fb:admins" content="100001668966106,582526084,100001643794747"/>
<meta property="og:description" content="An alpha version clone of the Tyrian Game. Developed during the HTML5 Game Jam 2011 at Paris."/>
<link rel="stylesheet" media="all" href="css/style.css" /> <link rel="stylesheet" media="all" href="css/style.css" />
<link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" > <link href="http://fonts.googleapis.com/css?family=Orbitron:400,500,700,900" rel="stylesheet" type="text/css" >
</head> </head>
<body> <body>
<div id="debug">RESET</div> <div id="game-over">
<div class="text orbitron">GAME OVER</div>
<div id="restart-game" class="orbitron">Restart</div>
</div>
<div id="credits" class="">
<strong>HTML5 Game Jam 2011</strong><br>
<strong><a href="https://github.com/glenux/wyrian" target="_blank" title="View Project on GitHub">Wyrian</a> v0.2a</strong> | <a href="http://www.html5place.com/" title="View my Website">Guillaume DE LA RUE</a><br>Thanks to <a href="https://github.com/glenux" target="_blank" title="View profile of Glenux on GitHub">Glenux</a> for design and Matthieu Bosquet and all people presents :)
</div>
<div class="container" id="GameContainer"> <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>

0
js/.empty
View file

5
js/GameClass.js
View file

@ -39,7 +39,7 @@ app.prototype.init = function() {
var self = this ; var self = this ;
require({ require({
baseUrl: "/js/", baseUrl: "js/",
urlArgs: "bust=" + self.version 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 // -- Create ennemies if needed
var numEnnemies = 0 ; var numEnnemies = 0 ;
for ( var i in Layouts.Ennemies.els ) { for ( var i in Layouts.Ennemies.els ) {

2
js/LayoutClass.js
View file

@ -236,7 +236,7 @@ Layout.prototype.createObj = function(opts) {
} ; } ;
// -- Test if in viewport // -- 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 = ( var touchTopRight = (
( B.x <= A.xX && B.x >= A.x ) ( B.x <= A.xX && B.x >= A.x )

26
js/Wyrian.js
View file

@ -22,7 +22,7 @@ jQuery(document).ready(function() {
* Load Dependencies & Create Application * Load Dependencies & Create Application
***************************************************************************/ ***************************************************************************/
require({ require({
baseUrl: "/js/", baseUrl: "js/",
urlArgs: "bust=" + Wyrian.version urlArgs: "bust=" + Wyrian.version
}, Wyrian.settings.libs, }, Wyrian.settings.libs,
@ -48,7 +48,6 @@ jQuery(document).ready(function() {
// -- Game is loaded // -- Game is loaded
$(document).bind('gameLoaded', function(e, res) { $(document).bind('gameLoaded', function(e, res) {
if ( timers.loopGame ) clearInterval(timers.loopGame) ; if ( timers.loopGame ) clearInterval(timers.loopGame) ;
timers.loopGame = setInterval(Wyrian.loopAnimation, 1000/FPS) ; timers.loopGame = setInterval(Wyrian.loopAnimation, 1000/FPS) ;
}); });
@ -63,11 +62,14 @@ jQuery(document).ready(function() {
Wyrian.score = 0 ; Wyrian.score = 0 ;
Wyrian.loops = 0 ; Wyrian.loops = 0 ;
Layouts.Ennemies.els = [] ; Layouts.Ennemies.els = [] ;
$('.sprite').remove() ;
$.each(Layouts, function(key, val){ $.each(Layouts, function(key, val){
Layouts[key].running = true ; Layouts[key].running = true ;
$.each(val.els, function(key2, val2){ $.each(val.els, function(key2, val2){
Layouts[key].els[key2].x = Layouts[key].els[key2].settings.origin.x ; if ( Layouts[key].els.length && Layouts[key].els[key2] ) {
Layouts[key].els[key2].y = Layouts[key].els[key2].settings.origin.y ; 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) { $(document).bind('gameComplete', function(e, res) {
// -- Stop layouts running // -- Stop layouts running
$('.sprite').remove() ; $('.sprite').not('.explosion').remove() ;
Layouts.Ennemies.running = false ; Layouts.Ennemies.running = false ;
Layouts.Background.running = false ; Layouts.Background.running = false ;
// -- Show game over overlay
$('#game-over:hidden').fadeIn(500) ;
// -- Stop loopAnimation // -- Stop loopAnimation
if ( timers.loopGame ) clearInterval(timers.loopGame) ; if ( timers.loopGame ) clearInterval(timers.loopGame) ;
}) ; }) ;
$('#debug').click(function() { // -- Bind Restart Screen controls
$(document).trigger('gameReset') ; $('#game-over #restart-game').click(function() {
$('#game-over:visible').fadeOut(500, function() {
$(document).trigger('gameReset') ;
}) ;
}).hover(function() {
$(this).addClass('hover') ;
}, function() {
$(this).removeClass('hover') ;
}) ; }) ;
}) ; }) ;

78
js/layouts/Ennemies.js
View file

@ -26,41 +26,55 @@ Layouts.Ennemies.reinitObj = function(obj) {
// -- Create a random ennemy // -- Create a random ennemy
Layouts.Ennemies.createRandom = function(opts) { Layouts.Ennemies.createRandom = function(opts) {
var self = this, var self = this ;
alien = { var libsAlien = [
name: 'ennemy', {
type: 'alien', width: 80,
width: 60, height: 80,
height: 60, imageSrc: 'images/sprites/alien_1.png?_=1',
power: 40, sprites: [0,1,2,3]
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 ;
}, },
animate: function (obj) { {
if ( obj.explosing ) { width: 80,
obj.y = obj.parent.heigh+1000 ; height: 80,
} else { imageSrc: 'images/sprites/alien_2.png?_=1',
obj.y += obj.settings.speed*obj.settings.direction ; sprites: [0]
}
if ( obj.y > obj.parent.height+obj.height ) {
obj = self.reinitObj(obj);
}
} }
} ; ] ;
// 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)) ; this.els.push(this.createObj(alien)) ;
} ; } ;
@ -73,7 +87,7 @@ Layouts.Ennemies.createExplosion = function(object) {
type: 'neutral', type: 'neutral',
width:330, width:330,
height:330, height:330,
imageSrc: '/images/sprites/explosion-sprite.png', imageSrc: 'images/sprites/explosion-sprite.png',
sprites: [0,1,2], sprites: [0,1,2],
origin: {x: object.x-330/2+object.width/2, y: object.y-330/2+object.height/2}, origin: {x: object.x-330/2+object.width/2, y: object.y-330/2+object.height/2},
animate: function(obj) { animate: function(obj) {

6
js/layouts/PlayerLayer.js
View file

@ -50,7 +50,7 @@ Layouts.Player = new Layout({
id: 'ship_reactor', id: 'ship_reactor',
width: 44, width: 44,
height: 68, height: 68,
imageSrc: '/images/sprites/reactor_fire_sprite.png', imageSrc: 'images/sprites/reactor_fire_sprite.png',
sprites: [0,1], sprites: [0,1],
nomove: true, nomove: true,
animate: function(obj) { animate: function(obj) {
@ -77,7 +77,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
var bulletConf = { var bulletConf = {
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: 40, speed: 40,
direction: -1, direction: -1,
@ -96,7 +96,7 @@ Layouts.Player.bulletLib = function(obj, bulletType) {
bulletConf.width = 16 ; bulletConf.width = 16 ;
bulletConf.height = 64 ; bulletConf.height = 64 ;
bulletConf.sprites = false ; 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.x = obj.x-6+obj.width/2 ;
bulletConf.origin.y = obj.y - bulletConf.height ; bulletConf.origin.y = obj.y - bulletConf.height ;
} }