Horizon: масштабируемый бэкэнд, идеально подходящий для мобильных приложений JavaScript

 $scope.placePiece = function(id){ var block = document.getElementById(id); if(!angular.element(block).hasClass('done')){ me.room.store({ type: 'move', room: me.room_name, block: id, piece: me.piece }); } }; 

Обновление результатов

Чтобы обновить оценки, создайте массив, содержащий возможные выигрышные комбинации.

 const possible_combinations = [ [1, 4, 7], [2, 5, 8], [3, 2, 1], [4, 5, 6], [3, 6, 9], [7, 8, 9], [1, 5, 9], [3, 5, 7] ]; 

[1, 4, 7] — первая строка, [1, 2, 3] — первая колонка и так далее. Порядок на самом деле не имеет значения, если есть соответствующие цифры. Вот изображение, которое поможет вам лучше понять:

Вы также можете сделать по диагонали ( [1, 5, 9] и [3, 5, 7] ), но инструмент редактирования, который я использовал, не позволяет мне, так что терпите меня.

Затем инициализируйте оценки для каждого отдельного произведения и просматривайте каждую возможную комбинацию. Для каждой итерации цикла инициализируйте общее количество фигур для каждого элемента, уже размещенного на доске. Затем переберите пункты для возможных комбинаций. Используя id , проверьте, не прикреплен ли к соответствующему блоку кусок. Если есть, возьмите фактическую часть и увеличьте общее количество частей. Как только цикл завершен, проверьте, равны ли итоговые значения для каждой части 3 . Если они это сделают, увеличивайте счет для части, пока вы не пройдете все возможные комбинации. После завершения обновите счет текущего игрока и противника.

 var scores = {'X': 0, 'O': 0}; possible_combinations.forEach(function(row, row_index){ var pieces = {'X' : 0, 'O': 0}; row.forEach(function(id, item_index){ var block = document.getElementById(id); if(angular.element(block).hasClass('done')){ //check if there's already a piece var piece = block.innerHTML; pieces[piece] += 1; } }); if(pieces['X'] == 3){ scores['X'] += 1; }else if(pieces['O'] == 3){ scores['O'] += 1; } }); //update current player and opponent score $scope.$apply(function(){ $scope.player_score = scores[me.piece]; $scope.opponent_score = scores[$scope.opponent_piece]; }); 

Основной шаблон

Создайте файл home.html в каталоге www / templates и добавьте следующее:

 <ion-view title="Home" ng-controller="HomeController as home_ctrl" ng-init="connect()"> <header class="bar bar-header bar-stable"> <h1 class="title">Ionic Horizon Tic Tac Toe</h1> </header> <ion-content class="has-header" ng-show="home_ctrl.ready"> <div id="join" class="padding" ng-hide="home_ctrl.has_joined"> <div class="list"> <label class="item item-input"> <input type="text" ng-model="home_ctrl.room" placeholder="Room Name"> </label> <label class="item item-input"> <input type="text" ng-model="home_ctrl.username" placeholder="User Name"> </label> </div> <button class="button button-positive button-block" ng-click="join(home_ctrl.username, home_ctrl.room)"> join </button> </div> <div id="game" ng-show="home_ctrl.has_joined"> <div id="board"> <div class="row"> <div class="col" ng-click="placePiece(1)" id="1"></div> <div class="col" ng-click="placePiece(2)" id="2"></div> <div class="col" ng-click="placePiece(3)" id="3"></div> </div> <div class="row"> <div class="col" ng-click="placePiece(4)" id="4"></div> <div class="col" ng-click="placePiece(5)" id="5"></div> <div class="col" ng-click="placePiece(6)" id="6"></div> </div> <div class="row"> <div class="col" ng-click="placePiece(7)" id="7"></div> <div class="col" ng-click="placePiece(8)" id="8"></div> <div class="col" ng-click="placePiece(9)" id="9"></div> </div> </div> <div id="scores"> <div class="row"> <div class="col col-50 player"> <div class="player-name" ng-bind="player"></div> <div class="player-score" ng-bind="player_score"></div> </div> <div class="col col-50 player"> <div class="player-name" ng-bind="opponent"></div> <div class="player-score" ng-bind="opponent_score"></div> </div> </div> </div> </div> </ion-content> </ion-view> 

Если разбить приведенный выше код, у вас есть основная оболочка, которую вы не увидите, пока пользователь не подключится к серверу Horizon.

 <ion-content class="has-header" ng-show="home_ctrl.ready"> ... </ion-content> 

Форма для присоединения к комнате:

 <div id="join" class="padding" ng-hide="home_ctrl.has_joined"> <div class="list"> <label class="item item-input"> <input type="text" ng-model="home_ctrl.room" placeholder="Room Name"> </label> <label class="item item-input"> <input type="text" ng-model="home_ctrl.username" placeholder="User Name"> </label> </div> <button class="button button-positive button-block" ng-click="join(home_ctrl.username, home_ctrl.room)"> join </button> </div> 

Крестики-нолики:

 <div id="board"> <div class="row"> <div class="col" ng-click="placePiece(1)" id="1"></div> <div class="col" ng-click="placePiece(2)" id="2"></div> <div class="col" ng-click="placePiece(3)" id="3"></div> </div> <div class="row"> <div class="col" ng-click="placePiece(4)" id="4"></div> <div class="col" ng-click="placePiece(5)" id="5"></div> <div class="col" ng-click="placePiece(6)" id="6"></div> </div> <div class="row"> <div class="col" ng-click="placePiece(7)" id="7"></div> <div class="col" ng-click="placePiece(8)" id="8"></div> <div class="col" ng-click="placePiece(9)" id="9"></div> </div> </div> 

И игрок забивает:

 <div id="scores"> <div class="row"> <div class="col col-50 player"> <div class="player-name" ng-bind="player"></div> <div class="player-score" ng-bind="player_score"></div> </div> <div class="col col-50 player"> <div class="player-name" ng-bind="opponent"></div> <div class="player-score" ng-bind="opponent_score"></div> </div> </div> </div> 

стайлинг

Вот стили для приложения:

 #board .col { text-align: center; height: 100px; line-height: 100px; font-size: 30px; padding: 0; } #board .col:nth-child(2) { border-right: 1px solid; border-left: 1px solid; } #board .row:nth-child(2) .col { border-top: 1px solid; border-bottom: 1px solid; } .player { font-weight: bold; text-align: center; } .player-name { font-size: 18px; } .player-score { margin-top: 15px; font-size: 30px; } #scores { margin-top: 30px; } 

Запуск приложения

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

 ionic serve 

Это обслуживает проект локально и открывает новую вкладку в браузере по умолчанию.

Если вы хотите проверить с другом, вы можете использовать Ngrok, чтобы выставить сервер Horizon в Интернет:

 ngrok http 8181 

Это создает URL-адрес, который можно использовать в качестве значения для host при подключении к серверу Horizon:

 const horizon = Horizon({host: 'xxxx.ngrok.io'}); 

Также измените ссылку на файл horizon.js в вашем файле index.html :

 <script src="http://xxxx.ngrok.io/horizon/horizon.js"></script> 

Чтобы создать мобильную версию, добавьте платформу в свой проект (для этого примера Android). Это предполагает, что вы уже установили Android SDK на свой компьютер.

 ionic platform add android 

Затем сгенерируйте файл .apk :

 ionic build android 

Затем вы можете отправить сгенерированный файл .apk своему другу, чтобы вы оба могли наслаждаться игрой. Или вы также можете играть в одиночку, если это ваша вещь.

Куда пойти отсюда

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

• Создайте версию 4 × 4 или 5 × 5 : созданная вами версия 3 × 3 почти всегда приводит к тупику, особенно если оба игрока являются экспертами в игре в крестики-нолики.
• Логика подсчета очков : Вы должны были сделать много циклов, чтобы получить очки для каждого игрока. Может быть, вы можете придумать лучший способ реализовать это.
• Улучшение стилей . Текущий стиль прост и имитирует крестики-нолики, используемые для игры на бумаге.
• Добавить анимацию : Вы можете добавить анимацию «скольжения вниз» для доски, когда пользователь присоединяется к комнате, или анимацию «отскока», когда игрок кладет свою фигуру на доску. Вы можете реализовать такие виды анимации, используя animate.css .
• Добавьте социальный логин : для такого простого приложения это может оказаться излишним, но если вы хотите узнать, как работает аутентификация в Horizon, то это хороший пример. Аутентификация Horizon позволяет пользователям входить в систему через свои учетные записи Facebook, Twitter или Github.
• Добавить функцию воспроизведения снова : Показать кнопку «Играть снова» после завершения игры. При нажатии он очищает игровое поле и счет, чтобы игроки могли снова играть.
• Добавьте таблицу лидеров в реальном времени : добавьте таблицу лидеров, показывающую, кто выиграл больше игр, таблицу лидеров для комнат с наибольшим количеством перезапусков (если вы включили функцию воспроизведения снова).

Если у вас есть какие-либо вопросы, комментарии или отличные идеи по улучшению приложения, пожалуйста, дайте мне знать в комментариях ниже .