@opherv / Jul 2016

Image By Royal Navy Media Archive

Hi! I'm Opher

I work with developers, designers and video makers to create some pretty cool experiences

I'm a creative developer at Interlude

What are we doing today?

• a game using Phaser and Firebase

• entirely in JS

• Serverless (kinda)

• Crowd participation is mandatory (but fun)

• You will need your phone, make sure you're connected to the wifi:
  CodeNode/ welovecode

Phaser.io

"Desktop and Mobile HTML5 Game Framework:

A fast, free and fun open source framework for Canvas and WebGL powered browser games"

Firebase

Backend as a service

Realtime client updates / JS API

The rules

• Two Screens: Desktop and Mobile
   

• The gameboard consists of a X by X grid
   

• Each player controls one commando

The rules

• Commandos can move one square in any direction
   

• When a commando touches another commando, he kills him and stops moving
   

• A dead commando leaves his underwear in the square where he died
   

• Commandos can't walk on squares with underwear

Typical multiplayer game architecture

Yeah... we're not going to do any of that

Game State is saved on desktop instance

Clients send their requests to firebase

Desktop consumes requests and updates game world

Desktop

Clients

Firebase

Our architecture kind of sucks

(for large scale projects)

Building the client

That's not all!

More work to be done:
 

• Saving the game state
   
• Registering different players
   
• Implementing player collision

Saving the game state

var gameBoard = new Array();

for (var x=0; x< gridSize; x++){
  gameBoard.push(new Array());
  for (var y=0; y< gridSize; y++){
    gameBoard[x][y] = "empty";
  }
}

//moving a commando: checking the game state

function moveCommando(commando, x, y){  
  //hit game edge
  if (x<0 || x>=gridSize || y<0 || y>=gridSize){ return; }
  
  //hit an enemy
  if (typeof gameBoard[x][y] == "object"){
    killCommando(commando,gameBoard[x][y]);
    return;
  }

...

}

Adding players - client

var playersRef = new Firebase('https://goingcommando.firebaseio.com/players');


var newPlayerRef = playersRef.push();
newPlayerRef.set({
    color: playerColor, 
    id: newPlayerRef.key()
});

Adding players - server

var playersRef = new Firebase('https://goingcommando.firebaseio.com/players');
playersRef.remove();

playersRef.on('child_added', function(snapshot) {  
  var newCommando = snapshot.val();
  makeNewCommando(newCommando.id, newCommando.color);
});

function makeNewCommando(id, color){ 
  var gridPosition = {
    x: Math.floor(Math.random() * gridSize),
    y: Math.floor(Math.random() * gridSize)
  }
  var commando = game.add.sprite(gridPosition.x * squareSize,
                                 gridPosition.y * squareSize, 
                                 'commando');
  commando.width = squareSize;
  commando.height = squareSize;  
  commando.gridPosition = gridPosition;

  commando.id = id;
  gameBoard[gridPosition.x][gridPosition.y] = commando;

  commando.color = color;
  
  players[commando.id] = commando; //add commando to player array 
};

Note on using Firebase for games

Let the

games

begin!

Thanks!

@OpherV

opherv.com

github.com/opherv

none of your business