Jump feature added

app.js

@@ -38,10 +38,10 @@ db.once("open", function(){
     }));
     app.use(app.router);
     app.use(express.static(path.join(__dirname, 'public')));
-    app.use(browserify(__dirname+"/client/game-index.js", {
-      mount: "/game-index.js",
-      cache: false
-    }));
+    // app.use(browserify(__dirname+"/client/game-index.js", {
+    //   mount: "/game-index.js",
+    //   cache: false
+    // }));
   });
 
   app.configure('development', function(){
@@ -97,4 +97,4 @@ db.once("open", function(){
 
   });
 
-});
+});

client/collections/MapCollection.js

@@ -0,0 +1,3 @@
+module.exports = Backbone.Collection.extend({
+  model:require("../models/MapElement"),
+});

client/collections/PlayersCollection.js

@@ -0,0 +1,3 @@
+module.exports = Backbone.Collection.extend({
+  model:require("../models/Player"),
+});

client/game-index.js

@@ -1,103 +1,129 @@
-_ = require("underscore");
 var socket = io.connect();
+var PlayersCollection = require("./collections/PlayersCollection");
+var players = new PlayersCollection();
 
-var Player = require("./views/Player");
-var players = [];
-
-var getPlayerByUsername = function(username){
-  for(var i = 0; i<players.length; i++)
-    if(players[i].username == username)
-      return players[i];
-}
-
-var addOrUpdate = function(playerData){
-  var player = getPlayerByUsername(playerData.username);
-  if(!player) {
-    player = new Player(playerData)
-    players.push(player);
-    $(".gameWorld").append(player.render().$el);
-  } else {
-    _.extend(player, playerData);
-    player.render();
-  }
-}
 
-socket.on('visitorsOnline', function (data) {
-  $(".visitorsCount").html(data);
-});
 
-socket.on("timeLeft", function(timeLeft){
-  $(".timeLeft").html("Time left:"+timeLeft);
-});
+var Map = require("./collections/MapCollection");
+var map = new Map();
 
-socket.on("connect", function(){
-  socket.emit("addPlayer");
-});
+var WorldView = require("./views/WorldView");
+var World = new WorldView({
+  el:".gameWorld",
+  collection: players,
+  mapCollection: map
+}).render();
 
-socket.on("addPlayer", function(playerData){
-  addOrUpdate(playerData);
-});
 
-socket.on("players", function(gameState){
-  var playersData = gameState.players;
-  for(var i = 0; i<playersData.length; i++) {
-    var playerData = playersData[i];
-    addOrUpdate(playerData);   
-  }
-});
-
-socket.on("removePlayer", function(playerData){
-  var p = getPlayerByUsername(playerData.username);
-  players.splice(players.indexOf(p), 1);
-  p.remove();
-});
 
+var direction = function (e) {
+  var dir = "";
+
+  if(e.keyCode == 37)
+    dir = "left"
+  if(e.keyCode == 39)
+    dir = "right";
+  if(e.keyCode == 40)
+    dir = "bottom";
+  if(e.keyCode == 38)
+    dir = "top";
+  if(e.keyCode == 32)
+    dir = "jump";
+
+  return dir;
+};
 
 var movePlayer = function(playerData){
-  var player = getPlayerByUsername(playerData.username);
-  _.extend(player, playerData);
-  player.render();
+  players.get(playerData.username).set(playerData);
 };
 
-socket.on("movePlayer", movePlayer);
-socket.on("updateGame", function (gameState) {
+//Adding dummy bottom and platform
+World.mapCollection.reset([
+  {
+    height: 600,
+    width: 800,
+    color:"green",
+    x: 0,
+    y: 0,
+    z: 0
+  },
+  {
+    height: 100,
+    width: 100,
+    color:"grey",
+    x: 200,
+    y: 200,
+    z: 2
+  },
+]);
+
+
+socket.on("map", function(map){
+  world.mapCollection = new MapCollection(map); 
+})
+
+.on('visitorsOnline', function (data) {
+  $(".visitorsCount").html(data); 
+})
+
+.on("timeLeft", function(timeLeft){
+  $(".timeLeft").html("Time left:"+timeLeft); 
+})
+
+.on("connect", function(){
+  socket.emit("addPlayer");
+})
+
+.on("addPlayer", function(playerData){
+    World.collection.add(playerData); 
+})
+
+.on("players", function(gameState){
+  var playersData = gameState.players;
+  var l = playersData.length;
+  for(var i = 0; i<l; i++)
+    players.add(playersData[i]);
+})
+
+.on("removePlayer", function(playerData){
+  players.remove(playerData.username);
+})
+
+.on("movePlayer", function(playerData){
+  var player = players.get(playerData.username);
+  if(player)
+    players.get(playerData.username).set(playerData);
+  else
+    throw new Error("Can't find player "+player.username);
+})
+
+.on("updateGame", function (gameState) {
   //expect playerStates to be an array
   for (var i = 0; i < gameState.players.length; i ++) {
-    movePlayer(gameState.players[i]);
+    var player = gameState.players[i];
+    players.add(player, {merge: true});
+    players.get(player.username).set(player);
   }
-});
+})
 
-socket.on("treasureTrapped", function(p1Data, p2Data){
-  _.extend(getPlayerByUsername(p1Data.username), p1Data).render();
+.on("treasureTrapped", function(p1Data, p2Data){
+  players.get(p1Data).set(p1Data);
   if(p2Data)
-    _.extend(getPlayerByUsername(p2Data.username), p2Data).render();
+    players.get(p2Data).set(p2Data);
 })
 
-socket.on("restart", function(){
-  $(".player").remove();
-  players = [];
+.on("restart", function(){
+  players.reset();
   socket.emit("addPlayer");
 });
 
-var direction = function (e) {
-  var dir = "";
-
-  if(e.keyCode == 37)
-    dir = "left"
-  if(e.keyCode == 39)
-    dir = "right";
-  if(e.keyCode == 40)
-    dir = "bottom";
-  if(e.keyCode == 38)
-    dir = "top";
-
-  return dir;
-}
 
 $(window).on("keydown", function(e){
-  socket.emit("directionChange", true, direction(e));
+  var dir = direction(e);
+  dir !== "" ? socket.emit("directionChange", true, direction(e)) : false;
 });
 
 $(window).on("keyup", function(e){
-  socket.emit("directionChange", false, direction(e));
+  var dir = direction(e);
+  dir !== "" ? socket.emit("directionChange", false, direction(e)) : false;
 });

client/models/MapElement.js

@@ -0,0 +1,14 @@
+module.exports = Backbone.Model.extend({
+  defaults:{
+    height: null,
+    width: null,
+    color:null,
+    x: null,
+    y: null,
+    z: null
+  },
+  remove:function(){
+    this.trigger("remove");
+    this.unbind();
+  }
+});

client/models/Player.js

@@ -0,0 +1,19 @@
+module.exports = Backbone.Model.extend({
+
+  idAttribute: "username",
+
+  defaults:{
+    hasTreasure: null,
+    username: null,
+    height: null,
+    width: null,
+    x: null,
+    y: null,
+    z: null
+  },
+
+  remove:function(){
+    this.trigger("remove");
+    this.unbind();
+  }
+});

client/views/MapElementView.js

@@ -0,0 +1,7 @@
+module.exports = require("./View").extend({
+  className: "mapElement",
+
+  initialize: function(){
+    this.$el.css("background-color", this.model.get('color'));
+  }
+});

client/views/PlayerView.js

@@ -0,0 +1,49 @@
+module.exports = require("./View").extend({
+  className: "player",
+  coin: "<div class='coin'></div>",
+  name:"<div class='name'></div>",
+  turnLeft:{ 
+    "-moz-transform": "scaleX(-1)",
+    "-o-transform": "scaleX(-1)",
+    "-webkit-transform": "scaleX(-1)",
+    "transform": "scaleX(-1)"
+  },
+  turnRight:{
+    "-moz-transform": "scaleX(1)",
+    "-o-transform": "scaleX(1)",
+    "-webkit-transform": "scaleX(1)",
+    "transform": "scaleX(1)"
+  },
+
+  initialize:function(){
+    this.model.on("change:x change:y change:z", this.render, this);
+    this.model.on("change:hasTreasure", this.treasure, this);
+    this.model.on("remove", this.remove, this);
+    var name = $(this.name);
+    name.html(this.model.get('username'));
+    this.$el.append($(this.coin), name);
+    this.treasure();
+  },
+
+  render: function(){
+    var x = this.model.get("x");
+    var prevx = this.model.previous("x");
+    if(x!=prevx)
+      x<prevx? this.$el.css(this.turnLeft) :this.$el.css(this.turnRight);
+
+    this.trigger("change", this);
+    return this;
+  },
+
+  move:function(){
+    this.trigger("change", this);
+
+  },
+
+  treasure: function(){
+    if (this.model.get("hasTreasure"))
+      this.$(".coin").show();
+    else
+      this.$(".coin").hide();
+  }
+});

client/views/View.js

@@ -0,0 +1,7 @@
+module.exports = Backbone.View.extend({
+  remove:function(){
+    this.unbind();
+    this.trigger("remove");
+    this.$el.remove();
+  }
+});