Question

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

我是Angular的新手，但我想我会通过...来解决这个问题。

创建一个负责管理游戏的控制器会议（时间限制，难度等）
使用它控制器以常规方式创建Bird对象（子控制器？）间隔。
将逻辑放入每个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秒后销毁它们的正确方法是什么？谢谢你的阅读。任何帮助将不胜感激！

Answer 1

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

我建议你把所有的鸟都放在service的一些数据结构中，可以通过DI从你的app的任何部分访问。那么你可以简单地使用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一样在HTML中使用它：

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

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

移除鸟的逻辑将来BirdStorage。只需创建一个删除指定鸟类的超时：

setTimeout(function(){
    this.deleteBird(id);
}, 5000)

Angular JS游戏 - 使用方法创建和销毁子控制器

1 个答案: