Статьи

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

Октябрь 31, 2018

В первой части этого урока мы создали большую часть пользовательского интерфейса. Теперь мы создадим его логику.

Реализация функциональности

Мы хотим знать, правильно ли пользователь ввел название логотипа. В представлении templates/logo.html 

 <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>

Пользовательский интерфейс не изменится, но этот код гарантирует, что все, что пользователь вводит в поле, передается функции check() Итак, теперь мы реализуем эту функцию, добавив этот код в конец контроллера LogoCtrl 

 //check if the logo name is found
$scope.check = function(name) {
    if ( angular.isDefined(name) 
        && name.toUpperCase() == $scope.logo.name.toUpperCase() ) 
    {
        localStorage[$scope.logo.name] = true;
        alert("Correct!");
        history.back(-1);
    }
}

Скриншот игры

Когда пользователь вводит правильное имя логотипа, переменная сохраняется в локальном хранилище, что позволяет нам проверить его значение позже.

У вас могут возникнуть некоторые проблемы с экранной клавиатурой в эмуляторе Firefox OS. Если это так, попробуйте нажать клавишу Backspace перед тем, как набирать текст, или, если вам повезет, заполучить настоящее устройство!

Когда пользователь щелкает логотип, который он уже сыграл, мы не хотим, чтобы он видел такое же представление «имя входного логотипа». Поэтому мы добавляем зависимость $locationLogoCtrlimg.attr('src',$scope.logo.img); в конце $http.get() 

 //this logo has been seen  before
if (localStorage[$scope.logo.name]) {
    $location.path('/level/'+ $scope.lvl.id +'/logo-found/'+$scope.logo.id);
}

Но мы не создавали это состояние приложения в первую очередь, поэтому мы создаем его сейчас, добавив это состояние: 

 state('logo-found', {
    url         : '/level/:levelId/logo-found/:logoId',
    templateUrl : 'templates/logo-found.html',
    controller  : 'LogoCtrl'
})

в app.config Создайте файл templates/logo-found.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>

    <h2>{{logo.name}}</h2>
  </ion-content>
</ion-pane>

Всякий раз, когда пользователь щелкает логотип, который был найден ранее, приложение перенаправляет его в представление templates/logo-found.html

Скриншот игры

Мы почти закончили. Осталось только найти способ сообщить пользователю, какие логотипы уже были воспроизведены, не нажимая на логотип. Мы можем сделать это, добавив галочку в углу каждого проигрываемого логотипа.

Чтобы достичь этого, мы должны изменить небольшой фрагмент кода внутри контроллера LevelCtrl Часть кода, которая позволила загрузить список логотипов для уровня: 

 for (var i=0;i<$scope.lvl.content.logos.length;i++) {
    var currLogo = $scope.lvl.content.logos[i];

    cnt += '<li>'+
        '<a href="#/level/'+$scope.levelId+'/logo/'+currLogo.id+'">' +
        '<img src="'+currLogo.img+'" class="logo-img">'+
        '</a>'+
        '</li>';
}

следует изменить на это: 

 for (var i=0;i<$scope.lvl.content.logos.length;i++) {
    var currLogo = $scope.lvl.content.logos[i];

    if (localStorage[currLogo.name]) {
        cnt += '<li>'+
            '<a href="#/level/'+$scope.levelId+'/logo/'+currLogo.id+'">' +
            '<img src="'+currLogo.img+'" class="logo-img logo-found">'+
            '<i class="ion-checkmark"></i>' +
            '</a>'+
            '</li>';
    } else {

        cnt += '<li>'+
            '<a href="#/level/'+$scope.levelId+'/logo/'+currLogo.id+'">' +
            '<img src="'+currLogo.img+'" class="logo-img">'+
            '</a>'+
            '</li>';
    }
}

Почему? Потому что второй фрагмент кода имеет возможность сказать, какой логотип был ранее воспроизведен. К этим логотипам добавляется класс logo-found Итак, давайте сделаем окончательное редактирование CSS, добавив его в css/style.css 

 .ion-checkmark {
    color: green;
}

Скриншот игры

Что дальше?

Несмотря на то, что приложение работает, оно имеет только два уровня и два логотипа на каждом уровне. Теперь вы можете добавить еще много уровней и логотипов для каждого уровня. Для этого вы должны добавить новый уровень (или логотип) в файл data/levels.json Уровни должны указываться уникальным idLevel {id} Содержимое является объектом с 2 свойствами:

  1. logo_num
  2. logos

Логотипы также являются объектами с 3 свойствами:
1. Уникальный id
2. name
3. img 

 {
    "id"        : 1,
    "name"      : "Level 1",
    "content"   : {
        "logo_num"  : 2,
        "logos"     : [
            {
                "id"    : "sitepoint",
                "name"  : "Sitepoint",
                "img"   : "img/lvl1/sitepoint.jpg"
            },
            {
                "id"    : "fb",
                "name"  : "Facebook",
                "img"   : "img/lvl1/fb.png"
            }
        ]
    }
}

Дизайн игры также может быть улучшен. Посмотрите на ионные компоненты . Вы можете найти несколько полезных вещей, которые вы могли бы использовать для лучшего дизайна.

Вывод

Мы создали еще один логотип игры. Их много на других платформах (у меня их четыре на моем телефоне Android), но только одна на Firefox OS Marketplace .

После прочтения этого урока я надеюсь, что дал вам хорошее представление о разработке игр для новой растущей платформы, такой как Firefox OS. Разработка приложений для Firefox OS так же проста, как и кодирование HTML5, поэтому каждый может (и должен) это сделать. Помните, что вы можете найти этот исходный код на GitHub . Не стесняйтесь его раскошелиться, поиграть с ним, а затем отправить свою (возможно, сначала) игру для Firefox OS в Firefox OS Marketplace.

35
Share: