Permalink
Browse files

Trying to track down issues with client-side animation/loop - but fir…

…st need to fix line endings. Yuck.
  • Loading branch information...
1 parent da01f62 commit 3620184c159bf688af99f6660c4b566e0ea543e6 @dylanbeattie committed Jun 5, 2011
Showing with 607 additions and 597 deletions.
  1. +43 −42 public/index.html
  2. +98 −122 public/js/game/client.js
  3. +177 −174 public/js/game/kaboom.game.js
  4. +75 −48 public/js/game/kaboom.player.js
  5. +128 −128 public/js/game/kaboom.renderer.js
  6. +86 −83 public/js/game/kaboom.socket.js
View
85 public/index.html
@@ -1,46 +1,47 @@
<!doctype html>
<html>
- <head>
- <title>KaboomJS</title>
- <link rel="stylesheet" type="text/css" href="css/bomber.css" media="screen" />
- </head>
-
- <body>
- <a id="join" href="#">Join</a>
-
- <div id="container">
- <div id="arena"></div>
- <div id="playerLayer"></div>
- <div id="holding"></div>
- </div>
-
-
-
- <script src="js/libs/jquery-1.6.1.js"></script>
- <script src="js/libs/socket.io.min.js"></script>
- <script src="js/libs/jquery.hotkeys.js"></script>
- <script src="js/libs/key_status.js"></script>
- <script src="js/libs/json2.js"></script>
- <script src="js/game/client.js"></script>
- <script src="js/game/kaboom.socket.js"></script>
- <script src="js/game/kaboom.game.js"></script>
- <script src="js/game/kaboom.player.js"></script>
- <script src="js/game/kaboom.renderer.js"></script>
- <script src="js/game/level.js"></script>
- <script type="text/javascript">
- $(function(){
- var client = new KaboomClient({fps: 30});
- client.init();
-
- $('#join').click(function(){
- client.join();
- });
-
- });
-
-
- </script>
-
- </body>
+<head>
+ <title>KaboomJS</title>
+ <link rel="stylesheet" type="text/css" href="css/bomber.css" media="screen"/>
+</head>
+
+<body>
+<a id="join" href="#">Join</a>
+
+<div id="container">
+ <div id="arena"></div>
+ <div id="playerLayer"></div>
+ <div id="holding"></div>
+</div>
+
+
+<script src="js/libs/jquery-1.6.1.js"></script>
+<script src="js/libs/socket.io.min.js"></script>
+<script src="js/libs/jquery.hotkeys.js"></script>
+<script src="js/libs/key_status.js"></script>
+<script src="js/libs/json2.js"></script>
+<script src="js/game/client.js"></script>
+<script src="js/game/kaboom.socket.js"></script>
+<script src="js/game/kaboom.game.js"></script>
+<script src="js/game/kaboom.player.js"></script>
+<script src="js/game/kaboom.renderer.js"></script>
+<script src="js/game/level.js"></script>
+<script type="text/javascript">
+ $(function() {
+ var client = new KaboomClient({fps: 30});
+ client.init();
+
+ $('#join').click(function() {
+ client.join();
+ });
+
+ $("html").bind('keydown', client.onKeyDown.tie(client));
+ $("html").bind('keyup', client.onKeyUp.tie(client));
+ });
+
+
+</script>
+
+</body>
</html>
View
220 public/js/game/client.js
@@ -1,86 +1,64 @@
+/***
+ * Manages the interaction between the keyboard, renderer, socket/IO library and game engine, when running KaboomJS in a web browser.
+ * @constructor
+ * @param config the game configuration data.
+ */
function KaboomClient(config) {
config = config || {};
- this.fps = config.fps || 30;
- this.player = null;
- this.levelData = null;
- this.socket = null;
+ this.gameLoopTick = Math.floor(1000 / (config.fps || 30));
+ this.player = null;
+ this.levelData = null;
+ this.socket = null;
}
KaboomClient.prototype = {
init: function() {
- var that = this;
+ var that = this;
},
-
- onKeyDown : function(event){
- var player = window.player;
-
- var key = $.hotkeys.specialKeys[event.which] || String.fromCharCode(event.which).toLowerCase();
-
- var playerChanged = false;
- var handled = false;
-
- if (key == 'left') {
- handled = true;
- playerChanged = player.goLeft();
- }
-
- if (key == 'right') {
- handled = true;
- playerChanged = player.goRight();
- }
-
- if (key == 'up') {
- handled = true;
- playerChanged = player.goUp();
- }
-
- if (key == 'down') {
- handled = true;
- playerChanged = player.goDown();
- }
-
- if (playerChanged){
- this.notifyPlayerChanged();
- }
-
- return !handled;
- },
-
- onKeyUp : function(event){
- var player = window.player;
- var key = $.hotkeys.specialKeys[event.which] || String.fromCharCode(event.which).toLowerCase();
- var handled = false;
-
- switch (key){
- case 'left':
- case 'right':
- handled = true;
- player.horizontalStop();
- break
- case 'up':
- case 'down':
- handled = true;
- player.verticalStop();
- break;
- }
-
- this.notifyPlayerChanged();
- return !handled;
- },
-
-
- notifyPlayerChanged: function(){
- if (this.socket) this.socket.playerChangedDirection(player);
- },
-
- draw : function(){
- this.player.draw();
- },
-
-
- join: function(){
- console.log('Joining...');
+
+ /**
+ * Controls whether a key event is handled by Kaboom! or should be bubbled to the browser.
+ *
+ * @param {string} key The desired radius of the circle.
+ * @return {Boolean} True if the key event should be bubbled; otherwise false.
+ */
+
+ sendKeyToBrowser : function(key) {
+ return(key != 'up' && key != 'down' && key != 'left' && key != 'right');
+ },
+
+ /***
+ * Translate a user pressing a key into a Kaboom game action.
+ * @param event the browser event raised when the key was depressed
+ */
+ onKeyDown : function(event) {
+ if (! window.player) return(true);
+ var key = $.hotkeys.specialKeys[event.which] || String.fromCharCode(event.which).toLowerCase();
+ var playerActuallyChanged = window.player.go(key);
+ if (playerActuallyChanged) this.notifyPlayerChanged();
+ console.log(event, window.player);
+ return (this.sendKeyToBrowser(key));
+ },
+
+ /***
+ * Translate a user releasing a key into a Kaboom game action.
+ * @param event the browser event raised when the key was released
+ */
+ onKeyUp : function(event) {
+ if (! window.player) return(true);
+ var key = $.hotkeys.specialKeys[event.which] || String.fromCharCode(event.which).toLowerCase();
+ window.player.stop(key);
+ this.notifyPlayerChanged();
+ console.log(event, window.player);
+ return (this.sendKeyToBrowser(key));
+ },
+ notifyPlayerChanged: function() {
+ if (this.socket) this.socket.playerChangedDirection(window.player);
+ },
+
+ join: function() {
+ console.log('Joining...');
try {
this.socket = new KaboomSocket();
this.socket.init(this, window.location.hostname, window.location.port);
@@ -90,61 +68,59 @@ KaboomClient.prototype = {
this.socket.init(this);
}
this.socket.join();
- },
-
- gameSuccessfullyJoined : function(gameState, playerState){
- console.log('Creating game...');
- window.game = new KaboomGame();
- window.game.copyStateFrom(gameState);
-
- window.player = window.game.findPlayer(playerState);
- $(document).bind('keydown', this.onKeyDown.tie(this));
- $(document).bind('keyup', this.onKeyUp.tie(this));
-
- var renderer = new KaboomRenderer({
- arena: $('#arena'),
- playerLayer: $('#playerLayer'),
- holding: $('#holding'),
- game: game
- });
-
- setInterval(function(){
- window.game.update();
- renderer.update();
- }, 1000/this.fps);
- },
-
- playerJoined: function(playerState){
- var newPlayer = new KaboomPlayer();
- newPlayer.copyStateFrom(playerState);
- window.game.addPlayer(newPlayer);
- }
-
-
-};
-
-
-Function.prototype.tie = function () {
-
- if (arguments.length < 2 && arguments[0] === undefined) {
- return this;
- }
+ },
- var thisObj = this,
+ /***
+ * Inform the client that it has successfully joined a game of Kaboom.
+ * @param gameState The current state of the game that we've just joined
+ * @param playerState The player we're going to be controlling in this game.
+ */
+ gameSuccessfullyJoined : function(gameState, playerState) {
+ console.log('Creating game...');
+ window.game = new KaboomGame();
+ window.game.copyStateFrom(gameState);
+
+ window.player = window.game.findPlayer(playerState);
+ var renderer = new KaboomRenderer({
+ arena: $('#arena'),
+ playerLayer: $('#playerLayer'),
+ holding: $('#holding'),
+ game: game
+ });
+
+ setInterval(function() {
+ window.game.update();
+ renderer.update();
+ }, this.gameLoopTick);
+ },
- args = Array.prototype.slice.call(arguments),
+ /**
+ * Inform this client that another player has just joined the game that's in progress
+ * @param playerState The new player who has connected to the current game of Kaboom
+ */
+ playerJoined: function(playerState) {
+ var newPlayer = new KaboomPlayer();
+ newPlayer.copyStateFrom(playerState);
+ window.game.addPlayer(newPlayer);
+ }
- obj = args.shift();
- return function () {
- return thisObj.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
- };
};
+/***
+ * Wraps this function in another, and locks its execution scope to the object specified as the first argument.
+ */
+Function.prototype.tie = function () {
+ if (arguments.length < 2 && arguments[0] === undefined) return this;
+ var thisObj = this, args = Array.prototype.slice.call(arguments), obj = args.shift();
+ return function () {
+ return thisObj.apply(obj, args.concat(Array.prototype.slice.call(arguments)));
+ };
+};
Function.tie = function () {
- var args = Array.prototype.slice.call(arguments);
- return Function.prototype.tie.apply(args.shift(), args);
+ var args = Array.prototype.slice.call(arguments);
+ return Function.prototype.tie.apply(args.shift(), args);
}
View
351 public/js/game/kaboom.game.js
@@ -7,8 +7,8 @@
*/
if (typeof require == "function") {
- var KaboomPlayer = require("./kaboom.player").KaboomPlayer;
- var Position = require("./kaboom.player").Position;
+ var KaboomPlayer = require("./kaboom.player").KaboomPlayer;
+ var Position = require("./kaboom.player").Position;
};
var KaboomGame = function (levelMap) {
@@ -19,11 +19,11 @@ var KaboomGame = function (levelMap) {
};
KaboomGame.prototype = {
-
+
copyStateFrom : function(gameState) {
this.DISTANCE = gameState.DISTANCE;
this.TILE_SIZE = gameState.TILE_SIZE;
- this.level = this.level || new Level();
+ this.level = this.level || new Level();
this.level.copyStateFrom(gameState.level);
for (var i = 0; i < gameState.players.length; i++) {
var sourcePlayer = gameState.players[i];
@@ -36,17 +36,17 @@ KaboomGame.prototype = {
/* Finds the player instance within THIS game representing the same player as the supplied player */
findPlayer : function(player) {
- for(var i = 0; i < this.players.length; i++) {
+ for (var i = 0; i < this.players.length; i++) {
if (this.players[i].name == player.name) return(this.players[i]);
}
},
- playerChangedVelocity : function(player) {
- /* TODO: find the GAME player matching the supplied player and
- update their position and velocity with those from the
- supplied player.
- */
- },
+ playerChangedVelocity : function(player) {
+ /* TODO: find the GAME player matching the supplied player and
+ update their position and velocity with those from the
+ supplied player.
+ */
+ },
addPlayer : function(player) {
this.players.push(player);
@@ -60,13 +60,13 @@ KaboomGame.prototype = {
createPlayer : function() {
var spawn = this.level.getFirstEmptySpawnPoint();
- var that=this;
+ var that = this;
if (spawn == null) return(null);
var player = new KaboomPlayer(spawn.number, "Player " + spawn.number, that.tilesToPixels(spawn.position));
- console.log(player);
+ console.log(player);
this.players[spawn.number - 1] = player;
- console.log(spawn.number, this.players);
- spawn.player = player;
+ console.log(spawn.number, this.players);
+ spawn.player = player;
return player;
},
@@ -78,198 +78,201 @@ KaboomGame.prototype = {
},
pixelsToTiles : function(position) {
- var tileX = Math.floor(position.x/this.TILE_SIZE);
- var tileY = Math.floor(position.y/this.TILE_SIZE);
-
+ var tileX = Math.floor(position.x / this.TILE_SIZE);
+ var tileY = Math.floor(position.y / this.TILE_SIZE);
+
return new Position(tileX, tileY);
},
update: function() {
- var game = this;
- /* For each player, assume they have moved DISTANCE in their own velocity */
- this.players.forEach(function(p, idx) {
- if (p != null) {
- var newPos = new Position(
- p.position.x + game.DISTANCE * p.velocity.dx,
- p.position.y + game.DISTANCE * p.velocity.dy
- );
-
- var playerRect = new Rectangle(newPos.y, newPos.x, 48, 48);
- var canMove = true;
-
- game.level.forEachIntersectingTile(playerRect, game, function(tile) {
- if (tile.solid) {
- canMove = false;
- }
- });
-
- if (canMove) {
- p.position = newPos;
- }
- }
- });
+ var game = this;
+ /* For each player, assume they have moved DISTANCE in their own velocity */
+ this.players.forEach(function(p, idx) {
+ if (p != null) {
+ var newPos = new Position(
+ p.position.x + game.DISTANCE * p.velocity.dx,
+ p.position.y + game.DISTANCE * p.velocity.dy
+ );
+
+ var playerRect = new Rectangle(newPos.y, newPos.x, 48, 48);
+ var canMove = true;
+
+ game.level.forEachIntersectingTile(playerRect, game, function(tile) {
+ if (tile.solid) {
+ canMove = false;
+ }
+ });
+
+ if (canMove) {
+ p.position = newPos;
+ }
+ }
+ });
}
};
if (typeof exports == "object") {
- exports.KaboomGame = KaboomGame;
-};
+ exports.KaboomGame = KaboomGame;
+}
+;
TileType = {
- Solid: 0,
- Destroyable: 1,
- Blank: 2
+ Solid: 0,
+ Destroyable: 1,
+ Blank: 2
};
function Level(initialTileMap) {
- /*this.rows = 13;
- this.cols = 17;*/
+ /*this.rows = 13;
+ this.cols = 17;*/
- this.rows = [];
+ this.rows = [];
this.spawns = [];
this.copyStateFrom = function(that) {
this.rows = that.rows.map(function(row) {
- return row.map(function(cell) {
- return new Tile(cell.solid, cell.tileType, cell.row, cell.col);
- });
+ return row.map(function(cell) {
+ return new Tile(cell.solid, cell.tileType, cell.row, cell.col);
+ });
});
this.spawns = that.spawns;
}
-
- this.forEachIntersectingTile = function(rect, game, callback) {
- $(this.rows).each(function(ri, row) {
- $(row).each(function(ti, tile) {
- tile.isIntersecting = false;
- if (rect.intersects(tile.getBounds(game))) {
- tile.isIntersecting = true;
- callback(tile);
- }
- });
- });
- };
-
- this.parseLevel = function(tileMap) {
- var r, c;
- var entry;
- var index;
- var spawn, spawnNum = 0;
- var solid, tileType;
-
- var row = [];
-
- for (var i = 0; i < tileMap.length; i++) {
- var tileChar = tileMap[i];
-
- switch (tileChar) {
- case '\n':
- this.rows.push(row);
- row = [];
- continue;
- case "*":
- tileType = TileType.Solid;
- solid = true;
- spawn = false;
- break;
- case "-":
- tileType = TileType.Destroyable;
- solid = true;
- spawn = false
- break;
- case " ":
- tileType = TileType.Blank;
- solid = false;
- spawn = false;
- break;
- case "1":
- tileType = TileType.Blank;
- solid = false;
- spawn = true;
- spawnNum = 1;
- break;
- case "2":
- tileType = TileType.Blank;
- solid = false;
- spawn = true;
- spawnNum = 2;
- break;
- case "3":
- tileType = TileType.Blank;
- solid = false;
- spawn = true;
- spawnNum = 3;
- break;
- case "4":
- tileType = TileType.Blank;
- solid = false;
- spawn = true;
- spawnNum = 4;
- break;
- default:
- console.log(entry);
- }
-
- if (spawn) {
- this.spawns.push(new Spawn(spawnNum, row.length, this.rows.length));
- }
-
- row.push(new Tile(solid, tileType, this.rows.length, row.length));
+
+ this.forEachIntersectingTile = function(rect, game, callback) {
+ $(this.rows).each(function(ri, row) {
+ $(row).each(function(ti, tile) {
+ tile.isIntersecting = false;
+ if (rect.intersects(tile.getBounds(game))) {
+ tile.isIntersecting = true;
+ callback(tile);
+ }
+ });
+ });
};
- if (row.length > 0) {
- this.rows.push(row);
- }
- }
+ this.parseLevel = function(tileMap) {
+ var r, c;
+ var entry;
+ var index;
+ var spawn, spawnNum = 0;
+ var solid, tileType;
+
+ var row = [];
+
+ for (var i = 0; i < tileMap.length; i++) {
+ var tileChar = tileMap[i];
+
+ switch (tileChar) {
+ case '\n':
+ this.rows.push(row);
+ row = [];
+ continue;
+ case "*":
+ tileType = TileType.Solid;
+ solid = true;
+ spawn = false;
+ break;
+ case "-":
+ tileType = TileType.Destroyable;
+ solid = true;
+ spawn = false
+ break;
+ case " ":
+ tileType = TileType.Blank;
+ solid = false;
+ spawn = false;
+ break;
+ case "1":
+ tileType = TileType.Blank;
+ solid = false;
+ spawn = true;
+ spawnNum = 1;
+ break;
+ case "2":
+ tileType = TileType.Blank;
+ solid = false;
+ spawn = true;
+ spawnNum = 2;
+ break;
+ case "3":
+ tileType = TileType.Blank;
+ solid = false;
+ spawn = true;
+ spawnNum = 3;
+ break;
+ case "4":
+ tileType = TileType.Blank;
+ solid = false;
+ spawn = true;
+ spawnNum = 4;
+ break;
+ default:
+ console.log(entry);
+ }
+
+ if (spawn) {
+ this.spawns.push(new Spawn(spawnNum, row.length, this.rows.length));
+ }
+
+ row.push(new Tile(solid, tileType, this.rows.length, row.length));
+ }
+ ;
+
+ if (row.length > 0) {
+ this.rows.push(row);
+ }
+ }
if (initialTileMap) {
this.parseLevel(initialTileMap);
}
-
- this.getFirstEmptySpawnPoint = function()
- {
- for(var i = 0; i < this.spawns.length; i++) {
- var spawn = this.spawns[i];
- if (spawn.player == null) return(spawn);
- }
- }
+
+ this.getFirstEmptySpawnPoint = function() {
+ for (var i = 0; i < this.spawns.length; i++) {
+ var spawn = this.spawns[i];
+ if (spawn.player == null) return(spawn);
+ }
+ }
}
-function Tile (solid, tileType, row, col) {
- this.solid = solid;
- this.tileType = tileType;
- this.row = row;
- this.col = col;
- this.getBounds = function(game) {
- return new Rectangle(this.col * game.TILE_SIZE, this.row * game.TILE_SIZE, game.TILE_SIZE, game.TILE_SIZE);
- }
-};
+function Tile(solid, tileType, row, col) {
+ this.solid = solid;
+ this.tileType = tileType;
+ this.row = row;
+ this.col = col;
+ this.getBounds = function(game) {
+ return new Rectangle(this.col * game.TILE_SIZE, this.row * game.TILE_SIZE, game.TILE_SIZE, game.TILE_SIZE);
+ }
+}
+;
-function Spawn (num, x, y) {
- this.number = num;
- this.position = new Position(x,y);
- this.player = null;
+function Spawn(num, x, y) {
+ this.number = num;
+ this.position = new Position(x, y);
+ this.player = null;
}
function Rectangle(x, y, width, height) {
- this.x = x;
- this.y = y;
- this.width = width;
- this.height = height;
- this.left = x;
- this.top = y;
- this.right = this.left + width;
- this.bottom = this.top + height;
- this.pointIntersects = function(point) {
- return point.x >= this.left && point.x < this.right &&
- point.y >= this.top && point.y < this.bottom;
- };
- this.intersects = function(that) {
- return this.pointIntersects({x: that.top, y: that.left}) ||
- this.pointIntersects({x: that.top, y: that.right}) ||
- this.pointIntersects({x: that.bottom, y: that.left}) ||
- this.pointIntersects({x: that.bottom, y: that.right});
- };
-};
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ this.left = x;
+ this.top = y;
+ this.right = this.left + width;
+ this.bottom = this.top + height;
+ this.pointIntersects = function(point) {
+ return point.x >= this.left && point.x < this.right &&
+ point.y >= this.top && point.y < this.bottom;
+ };
+ this.intersects = function(that) {
+ return this.pointIntersects({x: that.top, y: that.left}) ||
+ this.pointIntersects({x: that.top, y: that.right}) ||
+ this.pointIntersects({x: that.bottom, y: that.left}) ||
+ this.pointIntersects({x: that.bottom, y: that.right});
+ };
+}
+;
View
123 public/js/game/kaboom.player.js
@@ -10,10 +10,10 @@ var KaboomPlayer = function(id, name, position, velocity) {
/* Player.name must be unique and can be used to determine equality */
this.id = id;
this.name = name;
- this.position = position || new Position(0,0);
- this.velocity = velocity || new Velocity(0,0);
+ this.position = position || new Position(0, 0);
+ this.velocity = velocity || new Velocity(0, 0);
this.getBounds = function(game) {
- return new Rectangle(this.position.x, this.position.y, game.TILE_SIZE, game.TILE_SIZE);
+ return new Rectangle(this.position.x, this.position.y, game.TILE_SIZE, game.TILE_SIZE);
};
};
@@ -25,60 +25,87 @@ Position = function(x, y) {
function Velocity(dx, dy) {
this.dx = dx;
this.dy = dy;
-};
+}
+;
KaboomPlayer.prototype = {
-
- goLeft: function(){
- if(this.velocity.dx != -1){
- this.velocity.dx = -1;
- return true;
- }
- return false;
- },
-
- goRight: function(){
- if (this.velocity.dx != 1) {
- this.velocity.dx = 1;
- return true;
- }
- return false;
- },
-
- goUp: function(){
- if(this.velocity.dy != -1){
- this.velocity.dy = -1;
- return true;
- }
- return false;
- },
-
- goDown: function(){
- if(this.velocity.dy != 1){
- this.velocity.dy = 1;
- return true;
- }
- return false;
- },
-
- horizontalStop: function(){
- this.velocity.dx = 0;
- },
-
- verticalStop: function(){
- this.velocity.dy = 0;
- },
+
+ go: function(direction) {
+ switch (direction) {
+ case 'left':
+ return(this.goLeft());
+ case 'right':
+ return(this.goRight());
+ case 'up':
+ return(this.goUp());
+ case 'down':
+ return(this.goDown());
+ }
+ },
+ stop: function(direction) {
+ switch (direction) {
+ case 'up':
+ case 'down':
+ this.verticalStop();
+ break;
+ case 'left':
+ case 'right':
+ this.horizontalStop();
+ break;
+ }
+ },
+
+ goLeft: function() {
+ if (this.velocity.dx != -1) {
+ this.velocity.dx = -1;
+ return true;
+ }
+ return false;
+ },
+
+ goRight: function() {
+ if (this.velocity.dx != 1) {
+ this.velocity.dx = 1;
+ return true;
+ }
+ return false;
+ },
+
+ goUp: function() {
+ if (this.velocity.dy != -1) {
+ this.velocity.dy = -1;
+ return true;
+ }
+ return false;
+ },
+
+ goDown: function() {
+ if (this.velocity.dy != 1) {
+ this.velocity.dy = 1;
+ return true;
+ }
+ return false;
+ },
+
+ horizontalStop: function() {
+ this.velocity.dx = 0;
+ },
+
+ verticalStop: function() {
+ this.velocity.dy = 0;
+ },
copyStateFrom : function(that) {
this.id = that.id;
this.name = that.name;
this.position = new Position(that.position.x, that.position.y);
this.velocity = new Velocity(that.velocity.dx, that.velocity.dy);
- return this;
+ return this;
}
};
if (typeof exports == "object") {
- exports.KaboomPlayer = KaboomPlayer;
- exports.Position = Position;
-};
+ exports.KaboomPlayer = KaboomPlayer;
+ exports.Position = Position;
+}
+;
View
256 public/js/game/kaboom.renderer.js
@@ -1,140 +1,140 @@
KaboomPlayer.prototype.showBoundingBox = function(layer, game) {
- var boundingBox = $('#player_'+this.id+'_boundingBox');
- if (boundingBox.length == 0) {
- boundingBox = $('<div id="player_'+this.id+'_boundingBox" class="boundingBox player" />');
- layer.append(boundingBox);
- }
-
- var bounds = this.getBounds(game);
- boundingBox.css({
- top: bounds.top + 'px',
- left: bounds.left + 'px',
- width: bounds.width + 'px',
- height: bounds.height + 'px'
- });
+ var boundingBox = $('#player_' + this.id + '_boundingBox');
+ if (boundingBox.length == 0) {
+ boundingBox = $('<div id="player_' + this.id + '_boundingBox" class="boundingBox player" />');
+ layer.append(boundingBox);
+ }
+
+ var bounds = this.getBounds(game);
+ boundingBox.css({
+ top: bounds.top + 'px',
+ left: bounds.left + 'px',
+ width: bounds.width + 'px',
+ height: bounds.height + 'px'
+ });
};
Tile.prototype.showBoundingBox = function(layer, game) {
- var boundingBox = $('#tile_'+this.row+'x'+this.col+'_boundingBox');
- if (boundingBox.length == 0) {
- boundingBox = $('<div id="tile_'+this.row+'x'+this.col+'_boundingBox" class="boundingBox" />');
- layer.append(boundingBox);
- }
-
- var bounds = this.getBounds(game);
- boundingBox.css({
- top: bounds.top + 'px',
- left: bounds.left + 'px',
- width: bounds.width + 'px',
- height: bounds.height + 'px'
- });
-
- if (this.isIntersecting) {
- boundingBox.addClass('intersecting');
- } else {
- boundingBox.removeClass('intersecting');
- }
+ var boundingBox = $('#tile_' + this.row + 'x' + this.col + '_boundingBox');
+ if (boundingBox.length == 0) {
+ boundingBox = $('<div id="tile_' + this.row + 'x' + this.col + '_boundingBox" class="boundingBox" />');
+ layer.append(boundingBox);
+ }
+
+ var bounds = this.getBounds(game);
+ boundingBox.css({
+ top: bounds.top + 'px',
+ left: bounds.left + 'px',
+ width: bounds.width + 'px',
+ height: bounds.height + 'px'
+ });
+
+ if (this.isIntersecting) {
+ boundingBox.addClass('intersecting');
+ } else {
+ boundingBox.removeClass('intersecting');
+ }
};
function KaboomRenderer(opts) {
- var game = opts.game;
- this.itemImages = ["images/solid-block.png",
- "images/destroyable-block.png",
- "images/blank.png" ];
- this.initialise = function() {
- var level = game.level;
-
- // create tiles
- for (var row = 0; row < level.rows.length; row++) {
- var rowDiv = $('<div class="row" style="position:absolute;top:'+row*game.TILE_SIZE+'px;height:'+game.TILE_SIZE+'px;width:'+game.TILE_SIZE*level.rows[row].length+'px" />');
-
- for (var tileIndex = 0; tileIndex < level.rows[row].length; tileIndex++) {
- var tile = level.rows[row][tileIndex];
- var tileDiv = $('<div id="tile_' + row + '_' + tileIndex + '" class="tile" style="position:absolute;height:' + game.TILE_SIZE + 'px;width:'+game.TILE_SIZE+'px;top:0;left:'+tileIndex * game.TILE_SIZE+'px" />');
-
- if (tile != null) {
- tileDiv.css('background', 'url(' + this.itemImages[tile.tileType] + ')');
- }
-
- rowDiv.append(tileDiv);
- }
-
- opts.arena.append(rowDiv);
- }
-
- // create players
- for (var player = 0; player < game.players.length; player++) {
- this.createPlayer(player + 1);
- }
- };
-
- this.createPlayer = function(num) {
- var playerDiv = $('<div id="player_' + num + '" class="player" />');
-
- opts.holding.append(playerDiv);
- };
-
- this.updatePlayerLocations = function() {
- for (var i = 0; i < game.players.length; i++) {
- var player = game.players[i];
-
- if (player != null) {
- if (opts.showBoundingBoxes) {
- player.showBoundingBox(opts.playerLayer, game);
- }
-
- var playerDiv = $('#player_' + (i + 1));
-
- if (!playerDiv.data('isInPlay')) {
- opts.playerLayer.append(playerDiv);
- playerDiv.data('isInPlay', true);
+ var game = opts.game;
+ this.itemImages = ["images/solid-block.png",
+ "images/destroyable-block.png",
+ "images/blank.png" ];
+ this.initialise = function() {
+ var level = game.level;
+
+ // create tiles
+ for (var row = 0; row < level.rows.length; row++) {
+ var rowDiv = $('<div class="row" style="position:absolute;top:' + row * game.TILE_SIZE + 'px;height:' + game.TILE_SIZE + 'px;width:' + game.TILE_SIZE * level.rows[row].length + 'px" />');
+
+ for (var tileIndex = 0; tileIndex < level.rows[row].length; tileIndex++) {
+ var tile = level.rows[row][tileIndex];
+ var tileDiv = $('<div id="tile_' + row + '_' + tileIndex + '" class="tile" style="position:absolute;height:' + game.TILE_SIZE + 'px;width:' + game.TILE_SIZE + 'px;top:0;left:' + tileIndex * game.TILE_SIZE + 'px" />');
+
+ if (tile != null) {
+ tileDiv.css('background', 'url(' + this.itemImages[tile.tileType] + ')');
+ }
+
+ rowDiv.append(tileDiv);
+ }
+
+ opts.arena.append(rowDiv);
}
-
- if (playerDiv.data('y') != player.position.y && playerDiv.data('x') != player.position.x) {
- var y = player.position.y - 32;
- var x = player.position.x + 8;
- playerDiv.css({
- position: 'absolute',
- top: y + 'px',
- left: x + 'px'
- });
- playerDiv.data('x', x);
- playerDiv.data('y', y);
+
+ // create players
+ for (var player = 0; player < game.players.length; player++) {
+ this.createPlayer(player + 1);
}
- }
- }
- };
-
- this.updateItems = function() {
- for (var rowIndex = 0; rowIndex < game.level.rows.length; rowIndex++) {
- for (var tileIndex = 0; tileIndex < game.level.rows[rowIndex].length; tileIndex++) {
- var tile = game.level.rows[rowIndex][tileIndex];
- var tileDiv = $('#tile_' + rowIndex + '_' + tileIndex);
-
- var url = null;
-
- if (tile == null) {
- url = 'url(images/blank.png)';
- } else {
- url = 'url(' + this.itemImages[tile.tileType] + ')';
- }
-
- if (tileDiv.data('background') != url) {
- tileDiv.css('background', url);
- tileDiv.data('background', url);
+ };
+
+ this.createPlayer = function(num) {
+ var playerDiv = $('<div id="player_' + num + '" class="player" />');
+
+ opts.holding.append(playerDiv);
+ };
+
+ this.updatePlayerLocations = function() {
+ for (var i = 0; i < game.players.length; i++) {
+ var player = game.players[i];
+
+ if (player != null) {
+ if (opts.showBoundingBoxes) {
+ player.showBoundingBox(opts.playerLayer, game);
+ }
+
+ var playerDiv = $('#player_' + (i + 1));
+
+ if (!playerDiv.data('isInPlay')) {
+ opts.playerLayer.append(playerDiv);
+ playerDiv.data('isInPlay', true);
+ }
+
+ if (playerDiv.data('y') != player.position.y && playerDiv.data('x') != player.position.x) {
+ var y = player.position.y - 32;
+ var x = player.position.x + 8;
+ playerDiv.css({
+ position: 'absolute',
+ top: y + 'px',
+ left: x + 'px'
+ });
+ playerDiv.data('x', x);
+ playerDiv.data('y', y);
+ }
+ }
}
-
- if (opts.showBoundingBoxes) {
- tile.showBoundingBox(opts.playerLayer, game);
+ };
+
+ this.updateItems = function() {
+ for (var rowIndex = 0; rowIndex < game.level.rows.length; rowIndex++) {
+ for (var tileIndex = 0; tileIndex < game.level.rows[rowIndex].length; tileIndex++) {
+ var tile = game.level.rows[rowIndex][tileIndex];
+ var tileDiv = $('#tile_' + rowIndex + '_' + tileIndex);
+
+ var url = null;
+
+ if (tile == null) {
+ url = 'url(images/blank.png)';
+ } else {
+ url = 'url(' + this.itemImages[tile.tileType] + ')';
+ }
+
+ if (tileDiv.data('background') != url) {
+ tileDiv.css('background', url);
+ tileDiv.data('background', url);
+ }
+
+ if (opts.showBoundingBoxes) {
+ tile.showBoundingBox(opts.playerLayer, game);
+ }
+ }
}
- }
- }
- };
-
- this.update = function() {
- this.updatePlayerLocations();
- this.updateItems();
- };
-
- this.initialise();
+ };
+
+ this.update = function() {
+ this.updatePlayerLocations();
+ this.updateItems();
+ };
+
+ this.initialise();
}
View
169 public/js/game/kaboom.socket.js
@@ -1,25 +1,26 @@
function MockSocket() {
this.client = null;
- this.levelMap = "*****************\n"
- +"*1 * 4*\n"
- +"* *\n"
- +"* *\n"
- +"* *\n"
- +"* *\n"
- +"* *\n"
- +"* *-* *-* *\n"
- +"* *\n"
- +"* *\n"
- +"* *\n"
- +"*****************";
+ this.levelMap = ""
+ + "*****************\n"
+ + "*1 * 4*\n"
+ + "* *\n"
+ + "* *\n"
+ + "* *\n"
+ + "* *\n"
+ + "* *\n"
+ + "* *-* *-* *\n"
+ + "* *\n"
+ + "* *\n"
+ + "* *\n"
+ + "*****************";
}
MockSocket.prototype = {
init : function(client) {
this.client = client;
},
- join : function(){
+ join : function() {
var game = new KaboomGame(this.levelMap);
var player = game.createPlayer();
this.client.gameSuccessfullyJoined(game, player);
@@ -36,82 +37,84 @@ MockSocket.prototype = {
}
function KaboomSocket() {
- this.client = null;
- this.socket = null;
-};
+ this.client = null;
+ this.socket = null;
+}
+;
KaboomSocket.prototype = {
- init : function(client, hostname, port) {
- var that = this;
- this.client = client;
- this.socket = new io.Socket(hostname, {port: port, transports: ["websocket", "flashsocket"]});
-
- // EVENTS
- // connect, connecting, connect_failed, message, close,
- // disconnect, reconnect, reconnecting, reconnect_failed
-
- // WebSocket connection successful
- this.socket.on("connect", function() {
- console.log("Connected");
- });
-
- // WebSocket connection failed
- this.socket.on("connect_failed", function() {
- console.log("Connect failed");
-
- });
-
- // WebSocket disconnection
- this.socket.on("disconnect", function() {
- console.log("Disconnected");
-
- });
-
- // WebSocket message received
- this.socket.on("message", function(data) {
- that.receiveData(data);
- });
-
- this.socket.connect();
- },
-
- receiveData : function(data){
- var msg = JSON.parse(data);
-
- console.log(msg);
-
- if (msg.type) {
- switch (msg.type) {
- case "welcome":
- this.client.gameSuccessfullyJoined(msg.gameState, msg.playerState);
- break;
- case "player_changed_direction":
- this.client.playerChangedDirection(msg.playerState);
- break;
- };
- };
- },
-
- join : function(){
- var msg = JSON.stringify({type: "join"});
- this.socket.send(msg);
- },
-
- playerChangedDirection : function(player) {
- this.sendPlayerUpdate("player_changed_direction", player);
- },
-
- playerDroppedBomb : function(player) {
- this.sendPlayerUpdate("player_dropped_bomb", player);
- },
-
- playerDied : function(player) {
+ init : function(client, hostname, port) {
+ var that = this;
+ this.client = client;
+ this.socket = new io.Socket(hostname, {port: port, transports: ["websocket", "flashsocket"]});
+
+ // EVENTS
+ // connect, connecting, connect_failed, message, close,
+ // disconnect, reconnect, reconnecting, reconnect_failed
+
+ // WebSocket connection successful
+ this.socket.on("connect", function() {
+ console.log("Connected");
+ });
+
+ // WebSocket connection failed
+ this.socket.on("connect_failed", function() {
+ console.log("Connect failed");
+
+ });
+
+ // WebSocket disconnection
+ this.socket.on("disconnect", function() {
+ console.log("Disconnected");
+
+ });
+
+ // WebSocket message received
+ this.socket.on("message", function(data) {
+ that.receiveData(data);
+ });
+
+ this.socket.connect();
+ },
+
+ receiveData : function(data) {
+ var msg = JSON.parse(data);
+
+ console.log(msg);
+
+ if (msg.type) {
+ switch (msg.type) {
+ case "welcome":
+ this.client.gameSuccessfullyJoined(msg.gameState, msg.playerState);
+ break;
+ case "player_changed_direction":
+ this.client.playerChangedDirection(msg.playerState);
+ break;
+ }
+ ;
+ }
+ ;
+ },
+
+ join : function() {
+ var msg = JSON.stringify({type: "join"});
+ this.socket.send(msg);
+ },
+
+ playerChangedDirection : function(player) {
+ this.sendPlayerUpdate("player_changed_direction", player);
+ },
+
+ playerDroppedBomb : function(player) {
+ this.sendPlayerUpdate("player_dropped_bomb", player);
+ },
+
+ playerDied : function(player) {
this.sendPlayerUpdate("player_died", player);
- },
+ },
sendPlayerUpdate : function(type, player) {
var msg = JSON.stringify({type: type, player: player});
this.socket.send(msg);
}
-
};

0 comments on commit 3620184

Please sign in to comment.