Using AngularJS for the user interface level in an existing game

Question

I have a game that I created using three.js , which is fully displayed in the canvas element.

As an exercise to help me get to know Angular JS , I started adding a user interface layer on top of my canvas that should be managed by the Angular framework.

A rough example of my markup looks like this:

<div class="container" ng-app="hud-layer"> <div class="level" ng-controller="HUDCtrl"> <h1>Level: {{level}}</h1> <button ng-click="decreaseLevel()">-</button> <button ng-click="increaseLevel()">+</button> </div> <div id="game"></div> </div> 

I obviously intend to add more user interface elements to my HUD, but I need to know how to call functions in my game. js from Angular.

My game.js is encapsulated in its own namespace, for example:

 (function(){ var VECTORS = { init: function(){ }, reset: function(){ } // ... blah blah blah } }); 

I want Angular to monitor the level, evaluate variables, etc., but I want these variables reflected in my game.js game, do I have to somehow reflect $ scope in game.js?

Any help or guidance appreciated.

Answer 1

You will need to do something like return the interface from the game module template to the global namespace (window), and then enter $ window into your controller or Angular service (depending on how much you got ahead to get).

So something like (psuedo-code):

 var game = (function(){ var VECTORS = { init: function(){ }, reset: function(){ }, // ... blah blah blah } //return an interface to your game. return { doSomething: function () { //do anything you want here. VECTORS.foo++; VECTORS.bar += VECTORS.foo; return VECTORS.bar; } } })(); 

and then in your controller (or in this case the service):

 app.factory('gameService', ['$window', function($window) { return { doSomething: function (){ return $window.game.doSomething(); } }; }]); app.controller('FooCtrl', ['$scope', 'gameService', function($scope, gameService) { $scope.clickyThing = function () { gameService.doSomething(); }; }]); 

Obviously, then in your doSomething () function, you can do whatever you need to do with the elements in this closure without fully revealing them in your Angular application.

It will remain modular.

I hope this helps.

Answer 2

Not a problem that your game.js is in closure. AngularJs has a great feature: dependency injection . So let's use it.

You can define the module and service in your game.js , which will be registered in angular.js . The service is responsible for returning game data to the controller outside of your closure.

So you create a module :

 var app = angular.module('game-bridge', []); 

And the pairing service (e.g. GameBridge) in your game.js:

 app.factory('GameBridge', ['$log', function($log) { return { ... }; }]); 

Your hud-layer module loads the game bridge module, and its controller enters the GameBridge service:

 var app = angular.module('hud-layer', ['game-bridge']); app.controller('HUDCtrl', ['$log', 'GameBridge', function($log, GameBridge) { ... }]);