I have been developing a game that relies solely on Angular for its user interface. The game has a loop that executes every second, and to ensure the UI stays synchronized, I am manually calling $digest from outside of Angular.
//Angular code snippet
angular
.module('app')
.factory('acp', acp);
acp.$inject = ['$rootScope', '$window'];
function acp($rootScope, $window){
var service = $window.ACP = {
heartBeat: heartBeat,
rootScope: $rootScope
};
return service;
function heartBeat(){
$rootScope.$$phase || $rootScope.$digest();
}
}
//Game code snippet
setInterval(function(){
//perform game logic
updateResources();
window.ACP.heartBeat();
}.bind(this), 1000);
Is this approach acceptable for a basic front-end game? What alternatives do you suggest for communication between my Angular UI and the game code? Currently, I have another global variable that stores the game state, accessed by both Angular and the game code directly from the window object. While I understand the drawbacks of using globals, in the realm of game development, things can become a bit blurry. Any insights or recommendations would be greatly appreciated.