javascript - 在现有游戏的 UI 层使用 AngularJS

Question

我有一个使用 three.js 创建的游戏，它完全呈现在 Canvas 元素中。

作为帮助我熟悉 Angular JS 的练习，我已经开始在我的 Canvas 上添加一个 UI 层，它由 Angular 框架管理。

我的标记的粗略示例如下所示:

    <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>

我显然打算向我的 HUD 添加更多 UI 元素，但我需要知道如何从 Angular 调用我的 game.js 中的函数。

我的 game.js 被封装在它自己的命名空间中，例如:

(function(){
      var VECTORS = {

          init: function(){

          },

          reset: function(){

          }

          // ... blah blah blah

      }
 });

我希望 Angular 监控关卡、得分变量等，但我希望这些变量反射(reflect)在我的 game.js 中，我应该以某种方式在 game.js 中镜像 $scope 吗？

感谢任何帮助或指导。

Answer 1

你将不得不做一些事情，比如从你的游戏模块模式返回一个接口(interface)到全局命名空间(窗口)，然后将 $window 注入(inject)你的 Angular Controller 或服务(取决于你想要获得的高级程度) .

所以类似(伪代码):

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;
          }
     }
 })();

然后在您的 Controller (或本例中的服务)中:

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();
   };
}]);

显然，然后在游戏的 doSomething() 函数中，您可以对闭包中的项执行任何需要执行的操作，而无需将它们完全暴露给 Angular 应用程序。

它将保持模块化。

希望对您有所帮助。