Разработка игр для Firefox с использованием Ionic Framework

Теперь, чтобы создать представление, добавьте этот код в ваш $http

 template/levels.html

Просто для удовольствия, добавьте это в файл <ion-pane>
<ion-header-bar class="bar-positive">
<a target="_blank" href="#/">
<button class="button icon-left ion-chevron-left button-clear button-white">
</button></a>
<h1 class="title">Levels</h1>
</ion-header-bar>

</ion-content>
</ion-pane>

 css/style.css

И это вид, который вы получите, нажав кнопку « .level-button {
height: 150px;
width: 150px;
border-radius: 8px;
}

Нажатие на них не сработает … пока!

Теперь мы реализуем другое представление, Start Game Этот файл покажет все логотипы для одного уровня (в данном случае 2 логотипа).

Сначала создайте файлы изображений, как они показаны в templates/level.html Добавьте это дерево каталогов в папку data/levels.json

 www

Теперь добавьте это в ваш файл img
|---- lvl1
| |---- fb.png
| |---- sitepoint.jpg
|
|---- lvl2
|---- twitter.jpg
|---- android.jpg

 template/level.html

Если вы разрабатываете для другой платформы, все, что вам нужно сделать, это поместить этот код между тегами <ion-pane>
<ion-header-bar class="bar-positive">
<a target="_blank" href="#/levels">
<button class="button icon-left ion-chevron-left button-clear button-white">
</button></a>
<h1 class="title">{{lvl.name}}</h1>
</ion-header-bar>
<ion-content class="content">

</ion-content>
</ion-pane>

 ul

К сожалению, <li ng-repeat="logo in lvl.content.logos">
<a target="_blank" href="#/level/{{levelId}}/logo/{{logo.id}}">
<img ng-src="{{logo.img}}" class="logo-img">
</a>
</li>ng-src

 js/app.js

Здесь вы можете увидеть еще одно внедрение зависимостей app.controller('LevelCtrl', ['$scope', '$stateParams', '$http',
function($scope,$stateParams,$http){
$scope.levelId = $stateParams.levelId;

});
}]);$stateParams Этот сервис Angular используется для доступа к параметрам в URL. Когда мы создали состояние для этого представления, мы определили URL как /level/:levelId Здесь :levelId$stateParams

Как вы можете видеть, используя это

 angular.element(document.querySelector('#logo-list'));

мы выбрали элемент DOM, так же, как с помощью

 $('#logo-list')

в jQuery.

AngularJS поставляется с небольшим подмножеством jQuery, называемым jqLite . Используя это подмножество, мы можем поместить желаемый контент между тегами ul

Это представление, которое вы получите после перезагрузки симулятора:

В настоящее время ничего не произойдет, когда вы нажмете логотипы. Нам все еще нужно добавить другое представление, последнее представление, templates/logo.html Добавьте этот код к нему:

 <ion-pane>
  <ion-header-bar class="bar-positive">
    <a ng-href="#/level/{{lvl.id}}">
    <button class="button icon-left ion-chevron-left button-clear button-white">
    </button></a>
  </ion-header-bar>

  <ion-content class="content">

    <div class="logo">
      <img src="" alt="{{logo.img}}" id="logo-img">
    </div>

     <div class="item item-input">
        <input type="text" name="logoName" ng-model="logo_name">
        <button class="button button-small button-royal" ng-click="check(logo_name)">
            Check
        </button>

    </div>

  </ion-content>
</ion-pane>

Также добавьте этот контроллер в js/app.js

 app.controller('LogoCtrl', ['$scope','$stateParams','$http',
    function($scope,$stateParams,$http){
        $scope.levelId = $stateParams.levelId;
        $scope.logoId = $stateParams.logoId;

        //getting list of levels
        $http.get('data/levels.json').success(function(data) {
            $scope.levels = data;
            for (var i=0;i<$scope.levels.length;i++) {

                //level found
                if($scope.levels[i].id == $scope.levelId) {
                    $scope.lvl = $scope.levels[i];
                    break;
                }
            }

            for (var i=0;i<$scope.lvl.content.logos.length;i++) {
                //getting the clicked logo as $scope.logo
                if($scope.lvl.content.logos[i].id == $scope.logoId) {
                    $scope.logo = $scope.lvl.content.logos[i];
                    break;
                }
            }

            var img = angular.element(document.querySelector('#logo-img'));
            img.attr('src',$scope.logo.img); //loading the image
        });
}]);

Используя ту же технику, что и в последнем контроллере, мы загружаем изображение нажатого логотипа. Теперь последнее, что нужно сделать, это добавить немного CSS:

 .logo-img {
    height: 70px;
    width: auto;
}

.logo {
    padding-bottom: 20px;
}

.button.button-small {
    padding: 5px 20px;
}

Последняя перезагрузка, и ваше приложение должно выглядеть так:

Вывод

У нас пока нет работающей игры, но у нас есть ее структура и работающий пользовательский интерфейс. В следующей части этого урока мы добавим функциональность, чтобы превратить это в настоящую игру!