4

キャンバス要素で完全にレンダリングされるthree.jsを使用して作成したゲームがあります。

Angular JSに慣れるのに役立つ演習として、Angular フレームワークによって管理されるキャンバスの上に UI レイヤーを追加し始めました。

私のマークアップの大まかな例は次のようになります。

    <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 コントローラーまたはサービスに $window を挿入するなどの操作を行う必要があります (どれだけ高度にしたいかによって異なります)。

したがって、（疑似コード）のようなもの：

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 には、依存性注入という優れた機能があります。それでは使ってみましょう。

angular.jsgame.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 に答える