1

我正在创建一个基于 AngularJS 和 HTML5 的游戏，该游戏由用户查找和点击鸟类组成。我希望鸟出现在屏幕上的随机位置。如果您点击一只鸟 - 或者如果您等待超过 5 秒 - 鸟会自动消失。

我是 Angular 的新手，但我想我会通过......

  1. 创建一个负责管理游戏会话（时间限制、难度等）的控制器

  2. 使用该控制器定期创建 Bird 对象（子控制器？）。

  3. 将逻辑放入每个 Bird 对象中，以便它们在 5 秒后或被单击时自动销毁。

这是为我的问题的第 1 部分创建的主控制器：

 myGameModule.controller( 'BirdActivityCtrl', function BirdActivityCtrl($scope) {

    $scope.difficulty = 'Easy';
    $scope.reward = 250; 

    $scope.spawn_interval = 1000;
    $scope.status = 'starting';

    $scope.birds_required = 30; 
    $scope.birds_clicked = 0; 
    $scope.time_left = 60; 

    $scope.start = function(){
     location = '#/birds_in_progress';
     $scope.status = 'in_progress';
   }
         $scope.cancel = function(){
    location = '#/cafeteria';
  }
});

具体来说，我正在就我的问题的第 2 部分和第 3 部分寻求帮助（如上所述）。我知道 Angular 有严格的约定将 DOM 元素与控制器分开。生成鸟类对象（将绑定到页面上的 DIV）并在 5 秒后销毁它们的正确方法是什么？感谢您的阅读。任何帮助将不胜感激！

4

1 回答 1

2

你的 DOM 相关工作应该在指令中。任何指令都可以有它自己的控制器，它将是你的BirdController. 对于任何新的鸟实例（div带有指令），将创建新的控制器和范围。

我建议你把你所有的鸟都放在一些数据结构中，放在一个服务中，可以从你的应用程序的任何部分使用 DI 访问。然后你可以简单地为你的鸟使用ng-repeat！

像这样的伪代码应该可以工作：

game.factory('BirdStorage', ['in', 'ject', 'ables', function(){
    var birds = [];

    return {
        addBird : function(){
            birds.push({...})
        },
        deleteBird : function(id){
            ...
        },
        ...
    }
}]);

game.directive('bird', ['in', 'ject', 'ables', function(){
    return {
        restrict: 'EA',
        template: '<div>...</div>',
        replace: true,
        scope: {
            ...
        }
        controller: function($scope, $element, $attrs){
            ...
        }
        link: function(){
            ...
        }
    }
}]);

然后你可以在 HTML 中像元素一样使用它：

<ul>
    <li data-ng-repeat="bird in birds">
        <bird attrs=...>
    </li>
</ul>

birds将来自您之前定义的服务。

并且将出现删除鸟的逻辑BirdStorage。只需创建一个将删除指定鸟的超时：

setTimeout(function(){
    this.deleteBird(id);
}, 5000)
于 2013-09-15T22:03:27.640 回答