JavaScript Awesome: 2016

Adding the game to Angular

As we’ve already looked at, the game itself will be contained in the <canvas> DOM element. Considering we’re building an angular app, this should be obvious that we’ll need to build a directive.
/scripts/game/game_canvas.js. We’ll create the directive on the angular app.game module.

angular.module('app.game')
.directive('gameCanvas', function() {
  // Build our directive here
});

The directive is pretty bare. Let’s actually create the base directive:

angular.module('app.game')

.directive('gameCanvas', function($injector) {

  var linkFn = function(scope, ele, attrs) {

    // link Function

  };

  return {

    scope: {

      players: '=',

      mapId: '='

    },

    template: '<div id="gameCanvas"></div>',

    link: linkFn

  }

});

The directive itself is pretty straightforward. We’re creating an isolate scope (as we should always do when building an angular directive) that looks for current players and the map id. We won’t use the players here, but we will use the mapId. We’ve given it a single DOM element in the template to add to the page with an id attribute. Finally, we create a link function where we’ll define the functionality of our directive.

If you’re not familiar with how directives work, check out our post on building custom directives or check out ng-book for a complete book on Angular including how to build a custom directives.

Let’s get to the linkFn. When the directive is attached to the page, it’s link function will get called. Therefore when we call the directive on the page, the link function will execute. We’ll create our phaser game inside this link function.

Let’s create the game in it’s own file at /scripts/game/main.js. Inside this file, let’s create a single function we’ll call where we want to create the function. So as to not place anything on the global window object, we’d likely export the function using CommonJS, AMD, or ES6 (as we do in the full source on github). For simplicity, we’ll place the method on the window object for sake of discussion. See the source code at the end of the article for the more advisable.

// In /scripts/game/main.js
window.createGame = function(scope, players, mapId, injector) {
  // Create our phaser game
};

In this function, we’re expecting a four parameters:

The scope of the directive (not strictly necessary)
The players variable from the isolate directive definition
The mapId from the isolate directive definition
The angular $injector

We’re passing the $injector into the function so that anywhere in the game, we can reach out into angular and grab any angular services as needed.

Before we get to building our game, we’ll need to load this in the index.html as well as call the function inside our directive. First, let’s add this as a script tag in our index.html:

<!-- ... -->
<script type="text/javascript" src="scripts/ng-game.js"></script>
<script type="text/javascript" src="scripts/menu/index.js"></script>
<script type="text/javascript" src="scripts/menu/menu_controller.js">
</script>
<script type="text/javascript" src="scripts/game/index.js"></script>
<script type="text/javascript" src="scripts/game/game_controller.js">
</script>
<script type="text/javascript" src="scripts/game/main.js"></script>

Secondly, we’ll call the function in the link function of our directive:

angular.module('app.game')
.directive('gameCanvas', function($injector) {
  var linkFn = function(scope, ele, attrs) {
    createGame(scope, scope.players, scope.mapId, $injector);
  };
 
  return {
    scope: {
      players: '=',
    mapId: '='
    },
    template: '<div id="gameCanvas"></div>',
    link: linkFn
  }
});

With that, we can create our game. Now, using the phaser object from above we can create any game we’re interested in. One nice component of building our phaser game in this way is that we know the directive id. We’ve set it in the template as gameCanvas. So when we build our phaser game, we can depend upon that element being on the page:

// In /scripts/game/main.js
window.createGame = function(scope, players, mapId, injector) {
    // Build the game object
  var height  = parseInt(ele.css('height'), 10),
      width   = parseInt(ele.css('width'), 10);
  var game = new Phaser.Game(width, height, Phaser.AUTO, 
'gameCanvas');
};

Now note that we grabbed the css height and width on the directive. We can dynamically set the height and the width. With that, we can get to building our game. We won’t be building the full game here, as the source is on github (see the end of the article) but for reference the main.js file will look something like:

// In /scripts/game/main.js
window.createGame = function(scope, players, mapId,
 injector) {
    // Build the game object
  var height  = parseInt(ele.css('height'), 10),
     width   = parseInt(ele.css('width'), 10);
  var game = new Phaser.Game(width, height, Phaser.AUTO, 
'gameCanvas');
 
    // Load our custom Game object
 var Game      = require('./states'),
      states    = Game.States;
 
  // Add our game states
  game.state.add('Boot', states.Boot);
  game.state.add('Preloader', states.Preloader);
  game.state.add('MainMenu', states.MainMenu);
  game.state.add('Play', states.Play);
 
  // Start the game
  game.state.start('Boot');
};

Cleaning up

Since we’re using a directive, our <canvas> element will hang around on the page for the duration of the angular app. If we navigate away from our game, we’ll want to make sure that we remove the game and all of the memory that it takes up. If the game isn’t running, there is no reason we should be taking up memory to run it.

Since we’re using a directive with a scope, we can listen for the scope’s $destroy event to get fired to know when the directive is getting ready to clean up. When angular is cleaning up a scope, it will emit the event $destroy. We’ll simply call destroy() on the phaser game object and let phaser handle releasing the memory and associated objects.

scope.$on('$destroy', function() {
  game.destroy(); // Clean up the game when we leave this scope
});

Why the $injector?

One method of communicating from the game to angular and visa versa is to use the scope events sytem. For instance, if we wanted to toggle the music of the game from an angular button in the angular app, we could do so by listening for an event fired from angular.

// In /scripts/game/main.js
window.createGame = function(scope, players, mapId, injector) {
// Set up the game
scope.$on('game:toggleMusic', function() {
Game.toggleMusic(); // some function that toggles the music
});
};

Additionally, we can emit events for angular to listen. If we have a new player or an event from the game we want to project up into angular, we can use the $emit function on the scope object.

Server-side (going multiplayer)

Let’s go ahead and look at how to get the game multiplayer. In this post, we’ll use node and express to create server. In order to run the multiplayer server, we’ll need a few dependencies. We can install them with npm (the node package manager):

1 2	$ npm init $ npm install --save express lodash socket.io

Since this isn’t a node tutorial, here’s the full server.js file. There are two important pieces to note:

We’re using express.static to serve the angular app
We’re loading a file with our socket.io routes to handle the routing

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
 
// Start the server
var port = process.env.PORT || 8000;
server.listen(port, function() {
  console.log("Running on port ", port);
});
 
// Serve the client
var staticPath = path.join(__dirname, '../client/dist');
app.use(express.static(staticPath);
app.get('/', function(req, res) {
  res.sendfile(__dirname + '/public/index.html');
});
 
// Handle socket.io
require('./routes/io.js')(app, io);

In our /routes/io.js file, we’ll set up some events for our client to fire and interact with the server-side view of our game. Everytime that a player connects, we’ll assume this is a new potential player. That is, we’ll keep track of all the people that are connecting as well as keep track of the ones that are in a game or not.

Setting up our io.js file, it will look like:

// routes/io.js

module.exports = (function(app, io) {

 // Game data

  var g = {

    io: io,

    players: [],

    maps: {}

  };

});

Now, when a client connects, we’ll create a new Player object and store their id.

The Player class can be found on github here.

// routes/io.js

module.exports = (function(app, io) {

   // Game data

  var g = {

    io: io,

    players: [],

    maps: {}

  };

  g.io.sockets.on('connection', function onConnection(socket) {

    socket.emit('connected', { id: socket.id });

    var player = new Player({ id: socket.id });

    g.players.push(player);

  });

});

Now that we have a player, let’s set up some events for the socket to listen and handle:

// routes/io.js
module.exports = (function(app, io) {
  // Game data
  var g = {    io: io,
    players: [],
    maps: {}
 };
  g.io.sockets.on('connection', function
 onConnection(socket) {
    socket.emit('connected', { id: socket.id });
    var player = new Player({ id: socket.id });
    g.players.push(player);
    socket.on('newPlayer', onNewPlayer);
  });
  var onNewPlayer = function(data) {
    // newPlayer event was fired
  };
});

Essentially, we’ve created a newPlayer handler that will handle adding the new player to our player’s array. In order for this event to get fired, we’ll need the client to tell the server there is a new player.

When the game boots up, we’ll have our client send a newPlayer event. For instance:

clientSocket.emit('newPlayer', {

  mapId: Game.mapId,

  health: hero.health

});

Back on the server, we’ll need to do a few things:

Check to see if the map exists or not (create it if not)
Add the player to the players array of the current map
Tell all of the existing players of the new player
Tell the new player about all the existing players
This might sound complex, but it’s pretty simple.

One step at a time, we can check to see if the map exists simply:

var onNewPlayer = function(data) {

  // this.id is the socket id handling the event

  // playerbyId is a helper function

  var player = playerById(this.id);

  // Create the map if it doesn't already exist

  if (!g.maps[data.mapId]) {

    g.maps[data.mapId] = new Map({id: data.mapId});

  }

};

Next, let’s add the player to the map:

var onNewPlayer = function(data) {
  // this.id is the socket id handling the event
  // playerbyId is a helper function
  var player = playerById(this.id);
 
  // Create the map if it doesn't already exist
  if (!g.maps[data.mapId]) {
    g.maps[data.mapId] = new Map({id: data.mapId});
  }
 
  if (!player.inMap(data.mapId) {
    player.joinMap(g.maps[data.mapId]);
  });
};

Now we can tell all of the current players of the new player

var onNewPlayer = function(data) {

  // this.id is the socket id handling the event

  // playerbyId is a helper function

  var player = playerById(this.id);

  // Create the map if it doesn't already exist

  if (!g.maps[data.mapId]) {

    g.maps[data.mapId] = new Map({id: data.mapId});

  }

  if (!player.inMap(data.mapId) {

    player.joinMap(g.maps[data.mapId]);

    this.broadcast.to(data.mapId)

      .emit('gameUpdated:add', {

        player: player.serialize(),

        map: data.mapId,

        allPlayers: g.maps[data.mapId].players

      });

  });

};

And finally, let’s tell the new player of the currently playing players:

var onNewPlayer = function(data) {
  // this.id is the socket id handling the event
  // playerbyId is a helper function
  var player = playerById(this.id);
  // Create the map if it doesn't already exist
  if (!g.maps[data.mapId]) {
    g.maps[data.mapId] = new Map({id: data.mapId});
  }
  if (!player.inMap(data.mapId) {
    player.joinMap(g.maps[data.mapId]);
    this.broadcast.to(data.mapId)
      .emit('gameUpdated:add', {
        player: player.serialize(),
        map: data.mapId,
        allPlayers: g.maps[data.mapId].players
      });
    this.join(data.mapId); // join the socket group
   this.emit('gameUpdated:add', {
     map: data.mapId,
     allPlayers: g.maps[data.mapId].players
    });
  });
};

client-side multiplayer
Before we can handle socket.io, we need to tell our client app to load the socket.io client-side file. Since we really like angular’s dependency injection system, we’ll use the same pattern we proposed in our d3 article.

We’ll create two services. The first service is the service that loads socket.io on the page. When we instantiate the service for the first time, this provide will dynamically set the script tag on the body and let the browser load the script. It’s not complex, despite the code being pretty large:

angular.module('app.loader', [])

.provider('ioLoader', function() {

  this.scriptUrl = window.location.origin+'

/socket.io/socket.io.js';

  this.$get = function($window, $document, $q) {

    var defer = $q.defer(), scriptUrl = this.scriptUrl;

    return {

      done: function(){

        var onScriptLoad=function(){return

 defer.resolve($window.io);};

        if($window.io) { onScriptLoad(); } else {

          var scriptTag = $document[0].createElement('script');

          scriptTag.type = 'text/javascript';

          scriptTag.async = true;

          scriptTag.src = scriptUrl;

          scriptTag.onreadystatechange = function () {

            if (this.readyState === 'complete') {

              onScriptLoad();

            }

          };

          scriptTag.onload = onScriptLoad;

          $document[0].getElementsByTagName('head')[0]

            .appendChild(scriptTag);

        }

        return defer.promise;

      }

    }; 

  }]; 

});

Without going too much into detail, this service has a single function called done() that returns a promise. When that promise is resolved, then we can depend upon window.io to be loaded on the page. In order to use the window.io object in our app, we can call this function and use the resolution of the object. In code, that looks like:

angular.module('app.loader', [])

.service('ioSocket', function(ioLoader) {

  ioLoader.done().then(function(io) {

    // ioLoader is injected, so we can 

    // expect window.io to be loaded

  })

});

The next service we’ll need to create is the socket handler. Since there is a lot of necessary clean-up that needs to go into using socket.io, we’ll use Brian Ford’s awesome socket library to handle it for us.

First, we’ll need to install it, either by going to github and grabbing the source, or using bower:

$ bower install --save angular-socket-io

Next, we’ll create a service that will wrap the socket connection into it’s own promise and return the socket in the promise resolution. This is also pretty simple and the code is much shorter than the previous service:

angular.module('app.network', [])

.factory('mySocket', function(ioLoader, $q, socketFactory) {

  var mySocket = $q.defer();

  ioLoader.done().then(function(io) {

    var myIoSocket = io.connect(window.location.hostname);

    var aSock = socketFactory({

      ioSocket: myIoSocket

    });

    mySocket.resolve(aSock);

  });

  return mySocket.promise;

});

To use this service, we can simply inject the dependency as usual into our other angular objects and interact with the connected socket on the promise resolution. For instance:

angular.module('someMod')

.service('connected', function(mySocket) {

  mySocket.then(function(socket) {

    socket.on('game:event', function(evt) {

      // Handle this event

    });

    socket.emit('game:otherEvent');

  });

});

Thanks! We love to hear feedback and any contributions. Hope this helps you build your own killer game!
Source: newsletter

If you feel useful for you and for everyone, please share it!
Suggest for you:

Learn Angular 2 Development By Building 10 Apps

Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

Angular 2 - The Complete Guide (Updated to RC4!)

Angular 2 Fundamentals: Learn By Creating A Real Web App

JavaScript Promises: Applications in ES6 and AngularJS

JavaScript Awesome

Monday, August 1, 2016

15 Fresh JavaScript Libraries for June 2016

Building multiplayer games with Angular_part 3 (end)