4

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

作为一个帮助我熟悉Angular JS的练习，我开始在我的画布上添加一个 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 监视关卡、分数变量等，但我希望这些变量反映在我的 game.js 中，我应该以某种方式在 game.js 中镜像 $scope 吗？

任何帮助或方向表示赞赏。

4

2 回答 2

4

您将不得不做一些事情，例如将游戏模块模式中的接口返回到全局命名空间（窗口）中，然后将 $window 注入到您的 Angular 控制器或服务中（取决于您想要获得的高级程度）。

所以像（伪代码）：

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

然后在您的控制器中（或在这种情况下为服务）：

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 应用程序。

它将保持模块化。

我希望这会有所帮助。

于 2013-01-02T22:02:49.847 回答
1

没问题，您的 game.js 处于关闭状态。AngularJs 有一个很棒的特性：依赖注入。所以让我们使用它。

你可以在你的 中定义一个模块和一个服务game.js，它们将在angular.js中注册。该服务负责将游戏数据返回到您关闭之外的控制器。

所以你创建一个模块：

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

以及 game.js 中的接口服务（例如 GameBridge）：

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

你的 hud-layer 模块加载了 game-bridge 模块，它的控制器注入了 GameBridge 服务：

var app = angular.module('hud-layer', ['game-bridge']);
app.controller('HUDCtrl', ['$log', 'GameBridge', function($log, GameBridge) {
   ...
}]);
于 2013-01-02T21:39:02.437 回答