Skip to content
Browse files

Presentation refactoring

  • Loading branch information...
1 parent f2b64e2 commit ed06f58920ec88f287f5ee31ede74b4bbeb2a368 @cykod committed Nov 17, 2010
Showing with 121 additions and 89 deletions.
  1. +5 −59 index.html
  2. +40 −26 js/engine.js
  3. +10 −4 js/game.js
  4. +66 −0 js/level.js
View
64 index.html
@@ -6,70 +6,16 @@
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='js/engine.js'></script>
<script src='js/game.js'></script>
+ <script src='js/level.js'></script>
<style>
#gameboard { background-color:black; }
+ #game-wrapper { margin:0 auto; width: 500px; }
</style>
-
</head>
<body>
-
-
-<canvas id='gameboard' width='500' height='500'></canvas>
-<script>
- var levelData = {
- 1: [[0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,1,1,1,2,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0]],
- 2: [[0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,0,0,0,0,0,0,0,0,0],
- [0,0,2,2,2,2,2,2,2,2,0],
- [0,0,2,2,2,2,2,2,2,2,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0],
- [0,0,1,1,1,1,1,1,1,1,0]] };
-
- var spriteData = {
- 'alien1': { sx: 0, sy: 0, w: 23, h: 18, cls: Alien, frames: 2 },
- 'alien2': { sx: 0, sy: 18, w: 23, h: 18, cls: Alien, frames: 2 },
- 'player': { sx: 0, sy: 36, w: 26, h: 17, cls: Player },
- 'missle': { sx: 0, sy: 86, w: 3, h: 14, cls: Missle }
- }
-
- function startGame() {
- var screen = new GameScreen("Alien Invaders","press space to start",
- function() {
- Game.loadBoard(new GameBoard(1));
- });
- Game.loadBoard(screen);
- Game.loop();
- }
-
- function endGame() {
- var screen = new GameScreen("Game Over","(press space to restart)",
- function() {
- Game.loadBoard(new GameBoard(1));
- });
- Game.loadBoard(screen);
- }
-
- $(function() {
- GameAudio.load({ 'fire' : 'media/laser.ogg', 'die' : 'media/explosion.ogg' }, function() {
- Game.initialize("#gameboard", levelData, spriteData, startGame, endGame);
- });
- });
-</script>
+ <div id='game-wrapper'>
+ <canvas id='gameboard' width='500' height='500'></canvas>
+ </div>
</body>
</html>
View
66 js/engine.js
@@ -1,8 +1,8 @@
-var Game = new function() {
+var Game = new function() {
var KEY_CODES = { 37:'left', 39:'right', 32 :'fire' };
this.keys = {};
- this.initialize = function(canvas_dom,level_data,sprite_data,callback,endCallback) {
+ this.initialize = function(canvas_dom,level_data,sprite_data,callbacks) {
this.canvas_elem = $(canvas_dom)[0];
this.canvas = this.canvas_elem.getContext('2d');
this.width = $(this.canvas_elem).attr('width');
@@ -17,8 +17,8 @@ var Game = new function() {
});
this.level_data = level_data;
- this.endCallback = endCallback;
- Sprites.load(sprite_data,callback);
+ this.callbacks = callbacks;
+ Sprites.load(sprite_data,this.callbacks['start']);
}
this.loadBoard = function(board) { Game.board = board; }
@@ -37,7 +37,7 @@ var Sprites = new function() {
this.map = sprite_data;
this.image = new Image();
this.image.onload = callback;
- this.image.src = 'images/sprites.png?1231';
+ this.image.src = 'images/sprites.png';
}
this.draw = function(canvas,sprite,x,y,frame) {
@@ -69,18 +69,19 @@ var GameBoard = function GameBoard(level_number) {
this.missles = 0;
this.level = level_number;
var board = this;
-
- this.loadLevel = function(level) {
- this.objects = [];
- this.player = this.addSprite('player', Game.width/2, Game.height - Sprites.map['player'].h - 10);
- var flock = this.add(new AlienFlock());
- for(var y=0,rows=level.length;y<rows;y++) {
- for(var x=0,cols=level[y].length;x<cols;x++) {
- var alien = Sprites.map['alien' + level[y][x]];
- if(alien) this.addSprite('alien' + level[y][x],(alien.w+10)*x, alien.h*y, { flock: flock });
- }
- }
+
+ this.add = function(obj) { obj.board=this; this.objects.push(obj); return obj; }
+ this.remove = function(obj) { this.removed_objs.push(obj); }
+
+ this.addSprite = function(name,x,y,opts) {
+ var sprite = this.add(new Sprites.map[name].cls(opts));
+ sprite.name = name;
+ sprite.x = x; sprite.y = y;
+ sprite.w = Sprites.map[name].w;
+ sprite.h = Sprites.map[name].h;
+ return sprite;
}
+
this.iterate = function(func) {
for(var i=0,len=this.objects.length;i<len;i++) {
@@ -113,7 +114,8 @@ var GameBoard = function GameBoard(level_number) {
}
this.collision = function(o1,o2) {
- return !((o1.y+o1.h-1<o2.y) || (o1.y> o2.y+o2.h-1) || (o1.x+o1.w-1<o2.x) || (o1.x>o2.x+o2.w-1));
+ return !((o1.y+o1.h-1<o2.y) || (o1.y> o2.y+o2.h-1) ||
+ (o1.x+o1.w-1<o2.x) || (o1.x>o2.x+o2.w-1));
};
this.collide = function(obj) {
@@ -123,16 +125,28 @@ var GameBoard = function GameBoard(level_number) {
});
}
- this.add = function(obj) { obj.board=this; this.objects.push(obj); return obj; }
- this.remove = function(obj) { this.removed_objs.push(obj); }
+ this.loadLevel = function(level) {
+ this.objects = [];
+ this.player = this.addSprite('player', // Sprite
+ Game.width/2, // X
+ Game.height - Sprites.map['player'].h - 10); // Y
- this.addSprite = function(name,x,y,opts) {
- var sprite = this.add(new Sprites.map[name].cls(opts));
- sprite.name = name;
- sprite.x = x; sprite.y = y;
- sprite.w = Sprites.map[name].w;
- sprite.h = Sprites.map[name].h;
- return sprite;
+ var flock = this.add(new AlienFlock());
+ for(var y=0,rows=level.length;y<rows;y++) {
+ for(var x=0,cols=level[y].length;x<cols;x++) {
+ var alien = Sprites.map['alien' + level[y][x]];
+ if(alien) {
+ this.addSprite('alien' + level[y][x], // Which Sprite
+ (alien.w+10)*x, // X
+ alien.h*y, // Y
+ { flock: flock }); // Options
+ }
+ }
+ }
+ }
+
+ this.nextLevel = function() {
+ return Game.level_data[level_number + 1] ? (level_number + 1) : false
}
this.loadLevel(Game.level_data[level_number]);
View
14 js/game.js
@@ -23,7 +23,13 @@ var AlienFlock = function AlienFlock() {
cnt++;
}
});
- if(cnt == 0) { Game.loadBoard(new GameBoard(Game.board.level+1)); }
+ if(cnt == 0) {
+ if(Game.board.nextLevel()) {
+ Game.loadBoard(new GameBoard(Game.board.nextLevel()));
+ } else {
+ Game.callbacks['win']();
+ }
+ }
this.max_y = max;
return true;
};
@@ -56,8 +62,8 @@ Alien.prototype.step = function(dt) {
this.x += this.mx;
this.mx = 0;
this.frame = (this.frame+1) % 2;
- if(this.x > 450) this.flock.hit = -1;
- if(this.x < 10) this.flock.hit = 1;
+ if(this.x > Game.width - Sprites.map.alien1.w * 2) this.flock.hit = -1;
+ if(this.x < Sprites.map.alien1.w) this.flock.hit = 1;
}
return true;
}
@@ -101,7 +107,7 @@ Player.prototype.step = function(dt) {
Player.prototype.die = function() {
GameAudio.play('die');
- Game.endCallback();
+ Game.callbacks['die']();
}
var Missle = function Missle(opts) {
View
66 js/level.js
@@ -0,0 +1,66 @@
+
+ var levelData = {
+ 1: [[0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,2,2,0,0,0,0],
+ [0,0,0,0,0,1,1,0,0,0,0]],
+ 2: [[0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,0,0,0,0,0,0,0,0,0],
+ [0,0,2,2,2,2,2,2,2,2,0],
+ [0,0,2,2,2,2,2,2,2,2,0],
+ [0,0,1,1,1,1,1,1,1,1,0],
+ [0,0,1,1,1,1,1,1,1,1,0],
+ [0,0,1,1,1,1,1,1,1,1,0],
+ [0,0,1,1,1,1,1,1,1,1,0]] };
+
+ var spriteData = {
+ 'alien1': { sx: 0, sy: 0, w: 23, h: 18, cls: Alien, frames: 2 },
+ 'alien2': { sx: 0, sy: 18, w: 23, h: 18, cls: Alien, frames: 2 },
+ 'player': { sx: 0, sy: 36, w: 26, h: 17, cls: Player },
+ 'missle': { sx: 0, sy: 86, w: 3, h: 14, cls: Missle }
+ }
+
+ function startGame() {
+ var screen = new GameScreen("Alien Invaders","press space to start",
+ function() {
+ Game.loadBoard(new GameBoard(1));
+ });
+ Game.loadBoard(screen);
+ Game.loop();
+ }
+
+ function endGame() {
+ var screen = new GameScreen("Game Over","(press space to restart)",
+ function() {
+ Game.loadBoard(new GameBoard(1));
+ });
+ Game.loadBoard(screen);
+ }
+
+
+ function winGame() {
+ var screen = new GameScreen("You Win!","(press space to restart)",
+ function() {
+ Game.loadBoard(new GameBoard(1));
+ });
+ Game.loadBoard(screen);
+ }
+
+ $(function() {
+ GameAudio.load({ 'fire' : 'media/laser.ogg', 'die' : 'media/explosion.ogg' }, function() {
+ Game.initialize("#gameboard", levelData, spriteData,
+ { "start": startGame,
+ "die" : endGame,
+ "win" : winGame });
+ });
+ });

0 comments on commit ed06f58

Please sign in to comment.
Something went wrong with that request. Please try again.