日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案
用Horizon搭建可擴展的Javascript移動應用后端方案

簡介

Horizon是一個著名的跨平臺可擴展的后端框架，適用于構建跨平臺基于JavaScript的移動應用程序，尤其是那些需要實時功能的應用。這個框架是由來自RethinkDB產品的程序員開發(fā)的，因此使用RethinkDB作為默認數(shù)據(jù)庫。如果你還不熟悉RethinkDB，那么你只需知識它是一個開放源碼的支持實時功能的數(shù)據(jù)庫。

Horizon框架公開一組客戶端API來允許你與底層數(shù)據(jù)庫進行交互。這意味著，你不必編寫任何后端代碼。你要做的就是，搭建一個新的服務器，運行它，Horizon將會自動管理其他內容。借助于Horizon，你可以輕松地實現(xiàn)實時連接的客戶端和服務器之間的數(shù)據(jù)同步。

如果你想要了解更多關于Horizon的消息，請查閱其 faq頁面(http://horizon.io/faq/)。

在本教程中，你要使用Icon和Horizon來協(xié)同開發(fā)一個Tic-Tac-Toe井字游戲。因此，閱讀本文的前提是假定你已經了解Icon和Horizon，所以我不打算解釋程序中Icon相關的特定代碼。當然，如果你想要一點有關Icon的背景知識的話，我建議你去查閱這個網址http://ionicframework.com/getting-started/。如果你想繼續(xù)閱讀本文內容，那么請你先下載文章的示例工程源碼。

下圖給出的是本文示例應用程序最終的結果快照。

安裝Horizon

RethinkDB用作Horizon的數(shù)據(jù)庫。因此，在安裝Horizon之前你需要先安裝RethinkDB。有關安裝RethinkDB的具體信息，處找到答案。

一旦安裝了RethinkDB，你就可以在終端程序中執(zhí)行以下命令通過npm工具來安裝Horizon：

npm install -g horizon

Horizon服務器開發(fā)

Horizon服務器用作應用程序的后端。每當應用程序執(zhí)行代碼時，它要與數(shù)據(jù)庫進行通信。

您可以通過在您的終端執(zhí)行以下命令來創(chuàng)建一個新的Horizon服務器：

hz init tictactoe-server

這個命令將創(chuàng)建RethinkDB數(shù)據(jù)庫并提供Horizon所使用的文件。

一旦創(chuàng)建了服務器，您可以通過執(zhí)行以下命令運行它：

hz serve --dev

在上面的命令中，指定-dev作為一個選項。這意味著，你想要運行一個開發(fā)服務器。在開發(fā)服務器中會設置以下選項：

--secure no：這意味著websocket和文件不會通過加密連接提供服務。

--permissions no：禁用權限約束。這意味著，任何客戶端都可以在數(shù)據(jù)庫中執(zhí)行任何他們想執(zhí)行的操作。Horizon的權限系統(tǒng)基于白名單。這意味著，默認情況下，所有用戶都沒有權限來做任何事情。你必須顯式地指定允許哪些操作。

--auto-create-collection yes：在首次使用時自動創(chuàng)建一個集合。在Horizon中，集合相當于關系數(shù)據(jù)庫中的表。此選項設置為true意味著，每次客戶端使用一個新的集合，它都會被自動創(chuàng)建。

--auto-create-index yes：在首次使用中自動創(chuàng)建索引。

--start-rethinkdb yes：在當前目錄中自動啟動RethinkDB的一個新實例。

--allow-unauthenticated yes：允許未經身份驗證的用戶來執(zhí)行數(shù)據(jù)庫操作。

--allow-anonymous yes：允許匿名用戶執(zhí)行數(shù)據(jù)庫操作。

--serve-static ./dist：啟用靜態(tài)文件服務。如果你想要在瀏覽器中測試與Horizon API的交互時，這是很有用的。Horizon服務器默認運行在端口8181，所以你可以通過訪問地址http://localhost:8181來訪問服務器。

【注意】--dev選項永遠不要用于生產環(huán)境下，因為它會打開大量的易于被攻擊者能夠利用的漏洞。

構建Ionic應用程序

現(xiàn)在，我們已經作好了充分準備。接下來，我們著手創(chuàng)建一個Ionic程序框架，命令如下：

ionic start tictactoe blank

安裝Chance.js

接下來，您需要安裝chance.js，這是一個JavaScript實用程序庫，用于生成隨機數(shù)據(jù)。在本應用程序中，我們使用它來為玩家生成一個唯一的ID。你可以通過bower工具并使用下面的命令來安裝chance.js：

bower install chance

創(chuàng)建index.html

現(xiàn)在，打開文件www/index.html，并把其內容修改為如下：

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
  5. 
  
  
  
  
  6. 
  
  
  
  
    8. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
    12. 
  
  
  
  
  12. 
  
  
  
  
    14. 
  
  
  
  
  14. 
  
  
  
  
    16. 
  
  
  
  
  16. 
  
  
  
  
    18. 
  
  
  
  
  18. 
  
  
  
  
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. 
  
  
  
  
  22. 
  
  
  
  
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. 
  
  
  
  
  26. 
  
  
  
  
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. 
  
  
  
  
  30. 
  
  
  
  
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. 
  
  
  
  
  34. 
  
  
  
  
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. 
  
  
  
  
  38. 
  
  
  
  
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. 
  
  
  
  
  42. 
  
  
  
  
  43. 
  
  
  
  
  44. 
  
  
  
  
    46. 
  
  
  
  
  46. 
  
  
  
  
    48. 
  
  
  
  
  48. 
  
  
  
  
  49. 
  
  
  
  
  50. 
  
  
  
  
  51.

上面的代碼大部分來自于Icon空白向導模板生成的樣板代碼?，F(xiàn)在，我們來添加對chance.js腳本的引用：

 
 
 
 
    
  
  
  
  
  1.

Horizon服務器將自動提供Horizon腳本服務，代碼如下：

 
 
 
 
    
  
  
  
  
  1.

【注意】如果你以后想部署這些內容的話，你必須修改URL。

接下來，主應用程序邏輯位于下面這個腳本文件中：

 
 
 
 
    
  
  
  
  
  1.

編寫主程序app.js

文件app.js是運行初始化應用程序代碼的地方。下面，需要打開文件www/js/app.js并把如下內容添加到run函數(shù)的下面：

 
 
 
 
    
  
  
  
  
  1. .config(function($stateProvider, $urlRouterProvider) {
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. $stateProvider
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. .state('home', {
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. cache: false,
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. url: '/home',
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. templateUrl: 'templates/home.html'
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. });
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. // if none of the above states are matched, use this as the fallback
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. $urlRouterProvider.otherwise('/home');
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. });
    20.

這將為默認的應用程序頁設置一個路由。此路由將指定頁面所使用的模板和可以訪問它的URL。

開發(fā)控制器程序HomeController.Js

現(xiàn)在，我們在路徑www/js/controllers下創(chuàng)建一個控制器文件HomeController.js，并修改其代碼如下：

 
 
 
 
    
  
  
  
  
  1. (function(){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. angular.module('starter')
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. .controller('HomeController', ['$scope', HomeController]);
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. function HomeController($scope){
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. var me = this;
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. $scope.has_joined = false;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. $scope.ready = false;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. const horizon = Horizon({host: 'localhost:8181'});
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. horizon.onReady(function(){
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. $scope.$apply(function(){
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. $scope.ready = true;
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. });
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. });
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. horizon.connect();
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. $scope.join = function(username, room){
    30. 
  
  
  
  
  30. 
  
  
  
  
  31. me.room = horizon('tictactoe');
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. var id = chance.integer({min: 10000, max: 999999});
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. me.id = id;
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. $scope.player = username;
    38. 
  
  
  
  
  38. 
  
  
  
  
  39. $scope.player_score = 0;
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. me.room.findAll({room: room, type: 'user'}).fetch().subscribe(function(row){
    42. 
  
  
  
  
  42. 
  
  
  
  
  43. var user_count = row.length;
    44. 
  
  
  
  
  44. 
  
  
  
  
  45. if(user_count == 2){
    46. 
  
  
  
  
  46. 
  
  
  
  
  47. alert('Sorry, room is already full.');
    48. 
  
  
  
  
  48. 
  
  
  
  
  49. }else{
    50. 
  
  
  
  
  50. 
  
  
  
  
  51. me.piece = 'X';
    52. 
  
  
  
  
  52. 
  
  
  
  
  53. if(user_count == 1){
    54. 
  
  
  
  
  54. 
  
  
  
  
  55. me.piece = 'O';
    56. 
  
  
  
  
  56. 
  
  
  
  
  57. }
    58. 
  
  
  
  
  58. 
  
  
  
  
  59. me.room.store({
    60. 
  
  
  
  
  60. 
  
  
  
  
  61. id: id,
    62. 
  
  
  
  
  62. 
  
  
  
  
  63. room: room,
    64. 
  
  
  
  
  64. 
  
  
  
  
  65. type: 'user',
    66. 
  
  
  
  
  66. 
  
  
  
  
  67. name: username,
    68. 
  
  
  
  
  68. 
  
  
  
  
  69. piece: me.piece
    70. 
  
  
  
  
  70. 
  
  
  
  
  71. });
    72. 
  
  
  
  
  72. 
  
  
  
  
  73. $scope.has_joined = true;
    74. 
  
  
  
  
  74. 
  
  
  
  
  75. me.room.findAll({room: room, type: 'user'}).watch().subscribe(
    76. 
  
  
  
  
  76. 
  
  
  
  
  77. function(users){
    78. 
  
  
  
  
  78. 
  
  
  
  
  79. users.forEach(function(user){
    80. 
  
  
  
  
  80. 
  
  
  
  
  81. if(user.id != me.id){
    82. 
  
  
  
  
  82. 
  
  
  
  
  83. $scope.$apply(function(){
    84. 
  
  
  
  
  84. 
  
  
  
  
  85. $scope.opponent = user.name;
    86. 
  
  
  
  
  86. 
  
  
  
  
  87. $scope.opponent_piece = user.piece;
    88. 
  
  
  
  
  88. 
  
  
  
  
  89. $scope.opponent_score = 0;
    90. 
  
  
  
  
  90. 
  
  
  
  
  91. });
    92. 
  
  
  
  
  92. 
  
  
  
  
  93. }
    94. 
  
  
  
  
  94. 
  
  
  
  
  95. });
    96. 
  
  
  
  
  96. 
  
  
  
  
  97. },
    98. 
  
  
  
  
  98. 
  
  
  
  
  99. function(err){
    100. 
  
  
  
  
  100. 
  
  
  
  
  101. console.log(err);
    102. 
  
  
  
  
  102. 
  
  
  
  
  103. }
    104. 
  
  
  
  
  104. 
  
  
  
  
  105. );
    106. 
  
  
  
  
  106. 
  
  
  
  
  107. me.room.findAll({room: room, type: 'move'}).watch().subscribe(
    108. 
  
  
  
  
  108. 
  
  
  
  
  109. function(moves){
    110. 
  
  
  
  
  110. 
  
  
  
  
  111. moves.forEach(function(item){
    112. 
  
  
  
  
  112. 
  
  
  
  
  113. var block = document.getElementById(item.block);
    114. 
  
  
  
  
  114. 
  
  
  
  
  115. block.innerHTML = item.piece;
    116. 
  
  
  
  
  116. 
  
  
  
  
  117. block.className = "col done";
    118. 
  
  
  
  
  118. 
  
  
  
  
  119. });
    120. 
  
  
  
  
  120. 
  
  
  
  
  121. me.updateScores();
    122. 
  
  
  
  
  122. 
  
  
  
  
  123. },
    124. 
  
  
  
  
  124. 
  
  
  
  
  125. function(err){
    126. 
  
  
  
  
  126. 
  
  
  
  
  127. console.log(err);
    128. 
  
  
  
  
  128. 
  
  
  
  
  129. }
    130. 
  
  
  
  
  130. 
  
  
  
  
  131. );
    132. 
  
  
  
  
  132. 
  
  
  
  
  133. }
    134. 
  
  
  
  
  134. 
  
  
  
  
  135. });
    136. 
  
  
  
  
  136. 
  
  
  
  
  137. }
    138. 
  
  
  
  
  138. 
  
  
  
  
  139. $scope.placePiece = function(id){
    140. 
  
  
  
  
  140. 
  
  
  
  
  141. var block = document.getElementById(id);
    142. 
  
  
  
  
  142. 
  
  
  
  
  143. if(!angular.element(block).hasClass('done')){
    144. 
  
  
  
  
  144. 
  
  
  
  
  145. me.room.store({
    146. 
  
  
  
  
  146. 
  
  
  
  
  147. type: 'move',
    148. 
  
  
  
  
  148. 
  
  
  
  
  149. room: me.room_name,
    150. 
  
  
  
  
  150. 
  
  
  
  
  151. block: id,
    152. 
  
  
  
  
  152. 
  
  
  
  
  153. piece: me.piece
    154. 
  
  
  
  
  154. 
  
  
  
  
  155. });
    156. 
  
  
  
  
  156. 
  
  
  
  
  157. }
    158. 
  
  
  
  
  158. 
  
  
  
  
  159. };
    160. 
  
  
  
  
  160. 
  
  
  
  
  161. me.updateScores = function(){
    162. 
  
  
  
  
  162. 
  
  
  
  
  163. const possible_combinations = [
    164. 
  
  
  
  
  164. 
  
  
  
  
  165. [1, 4, 7],
    166. 
  
  
  
  
  166. 
  
  
  
  
  167. [2, 5, 8],
    168. 
  
  
  
  
  168. 
  
  
  
  
  169. [3, 2, 1],
    170. 
  
  
  
  
  170. 
  
  
  
  
  171. [4, 5, 6],
    172. 
  
  
  
  
  172. 
  
  
  
  
  173. [3, 6, 9],
    174. 
  
  
  
  
  174. 
  
  
  
  
  175. [7, 8, 9],
    176. 
  
  
  
  
  176. 
  
  
  
  
  177. [1, 5, 9],
    178. 
  
  
  
  
  178. 
  
  
  
  
  179. [3, 5, 7]
    180. 
  
  
  
  
  180. 
  
  
  
  
  181. ];
    182. 
  
  
  
  
  182. 
  
  
  
  
  183. var scores = {'X': 0, 'O': 0};
    184. 
  
  
  
  
  184. 
  
  
  
  
  185. possible_combinations.forEach(function(row, row_index){
    186. 
  
  
  
  
  186. 
  
  
  
  
  187. var pieces = {'X' : 0, 'O': 0};
    188. 
  
  
  
  
  188. 
  
  
  
  
  189. row.forEach(function(id, item_index){
    190. 
  
  
  
  
  190. 
  
  
  
  
  191. var block = document.getElementById(id);
    192. 
  
  
  
  
  192. 
  
  
  
  
  193. if(angular.element(block).hasClass('done')){
    194. 
  
  
  
  
  194. 
  
  
  
  
  195. var piece = block.innerHTML;
    196. 
  
  
  
  
  196. 
  
  
  
  
  197. pieces[piece] += 1;
    198. 
  
  
  
  
  198. 
  
  
  
  
  199. }
    200. 
  
  
  
  
  200. 
  
  
  
  
  201. });
    202. 
  
  
  
  
  202. 
  
  
  
  
  203. if(pieces['X'] == 3){
    204. 
  
  
  
  
  204. 
  
  
  
  
  205. scores['X'] += 1;
    206. 
  
  
  
  
  206. 
  
  
  
  
  207. }else if(pieces['O'] == 3){
    208. 
  
  
  
  
  208. 
  
  
  
  
  209. scores['O'] += 1;
    210. 
  
  
  
  
  210. 
  
  
  
  
  211. }
    212. 
  
  
  
  
  212. 
  
  
  
  
  213. });
    214. 
  
  
  
  
  214. 
  
  
  
  
  215. $scope.$apply(function(){
    216. 
  
  
  
  
  216. 
  
  
  
  
  217. $scope.player_score = scores[me.piece];
    218. 
  
  
  
  
  218. 
  
  
  
  
  219. $scope.opponent_score = scores[$scope.opponent_piece];
    220. 
  
  
  
  
  220. 
  
  
  
  
  221. });
    222. 
  
  
  
  
  222. 
  
  
  
  
  223. }
    224. 
  
  
  
  
  224. 
  
  
  
  
  225. }
    226. 
  
  
  
  
  226. 
  
  
  
  
  227. })();
    228.

現(xiàn)在，分析一下上面代碼。首先，設置默認狀態(tài)。其中，has_joined變量用于是否玩家已經進入某個房間。其次，ready變量用于確定是否用戶已經連接到Horizon服務器。當這個變量值為false時，還不能向用戶顯示應用程序的界面。

 
 
 
 
    
  
  
  
  
  1. $scope.has_joined = false;
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. $scope.ready = false;
    4.

連接到服務器的代碼如下：

 
 
 
 
    
  
  
  
  
  1. const horizon = Horizon({host: 'localhost:8181'});
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. horizon.onReady(function(){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. $scope.$apply(function(){
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. $scope.ready = true;
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. });
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. });
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. horizon.connect(); //connect to the server
    14.

如我前面所提到的，Horizon服務器默認使用的是8181端口。這正是我們?yōu)槭裁词褂胠ocal:8181作為端口的原因。如果你連接到一個遠程服務器，這應該對應于分配給服務器的IP地址或者域名。當用戶連接到服務器時，onReady事件將會觸發(fā)。正是在此時，我們把ready設置為true，這樣就可以向用戶顯示程序的UI部分了。

 
 
 
 
    
  
  
  
  
  1. horizon.onReady(function(){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. $scope.$apply(function(){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. $scope.ready = true;
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. });
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. });
    10.

進入房間

每當用戶點擊Join按鈕時，將執(zhí)行join函數(shù)：

 
 
 
 
    
  
  
  
  
  1. $scope.join = function(username, room){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. ...
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. };
    6.

在此函數(shù)內部，連接到一個稱為tictactoe的集合。

【注意】因為我們處于開發(fā)模式下;所以，如果集合不存在的話，系統(tǒng)將自動為你創(chuàng)建。

 
 
 
 
    
  
  
  
  
  1. me.room = horizon('tictactoe');
    2.

接下來，生成一個ID，并把它設置為當前用戶的ID：

 
 
 
 
    
  
  
  
  
  1. var id = chance.integer({min: 10000, max: 999999});
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. me.id = id;
    4.

接下來，設置玩家用戶名和默認的玩家得分。

 
 
 
 
    
  
  
  
  
  1. $scope.player = username;
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. $scope.player_score = 0;
    4.

【注意】這兩個變量都被綁定到模板中;所以，你可以隨時顯示與更新它們。

接下來，進行文檔查詢，查詢條件是：room屬性為當前房間且type屬性為user。千萬不要把這種查詢與subscribe函數(shù)弄混，在這里我們并不監(jiān)聽數(shù)據(jù)變化的。而且，這里還要使用fetch函數(shù);這意味著，只有在用戶進入一個房間時才執(zhí)行該操作。相關代碼如下：

 
 
 
 
    
  
  
  
  
  1. me.room.findAll({room: room, type: 'user'}).fetch().subscribe(function(row){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. ...
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. });
    6.

一旦結果返回，即檢查用戶個數(shù)。當然，井字游戲只能由兩個玩家玩，所以，如果用戶想加入一個已經有兩名玩家的房間的話，系統(tǒng)會向他們發(fā)出警報。

 
 
 
 
    
  
  
  
  
  1. var user_count = row.length;
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. if(user_count == 2){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. alert('Sorry, room is already full.');
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. }else{
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. ...
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. }
    12.

上面代碼中的else語句將繼續(xù)處理接受用戶的邏輯，即根據(jù)當前用戶數(shù)確定將被分配給用戶的卡片。第一個加入該房間的人得到"X"卡片，而第二個人得到"O"卡片。

 
 
 
 
    
  
  
  
  
  1. me.piece = 'X';
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. if(user_count == 1){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. me.piece = 'O';
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. }
    8.

一旦你選定了卡片，就把新用戶存儲到集合中，并把has_joined開關值取反，從而顯示井字棋盤。

 
 
 
 
    
  
  
  
  
  1. me.room.store({
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. id: id,
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. room: room,
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. type: 'user',
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. name: username,
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. piece: me.piece
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. });
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. $scope.has_joined = true;
    16.

接下來，偵聽集合中的變化。這次，不是通過fetch方式，而是使用watch方式。具體地說，每當添加新文檔或更新(或刪除)匹配查詢的現(xiàn)有文檔時，都要執(zhí)行回調函數(shù)?；卣{函數(shù)執(zhí)行時，循環(huán)遍歷所有的結果并設置對手的詳細信息——如果該文檔的用戶ID與當前用戶的ID不匹配的話。本程序中正是通過這種方式來向當前用戶顯示他們的對手是誰。

 
 
 
 
    
  
  
  
  
  1. me.room.findAll({room: room, type: 'user'}).watch().subscribe(
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. function(users){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. users.forEach(function(user){
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. if(user.id != me.id){
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. $scope.$apply(function(){
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. $scope.opponent = user.name;
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. $scope.opponent_piece = user.piece;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. $scope.opponent_score = 0;
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. });
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. }
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. });
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. },
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. function(err){
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. console.log(err);
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. }
    30. 
  
  
  
  
  30. 
  
  
  
  
  31. );
    32.

接下來要訂閱move事件，該事件每當玩家把他們的卡片放到棋盤上從而這導致文檔變化時就觸發(fā)一次。如果發(fā)生這種情況，則遍歷所有的移動動作并將文本添加到相應的格子。從現(xiàn)在開始，代碼中將使用“block”一詞來表示棋盤上的每一個格子。

添加的文本對應于每個用戶所使用的卡片;此外，代碼中還將類名替換為“col done”。其中，col相應于Ionic編程中網格實現(xiàn)類，而done是用于表示一個特定塊上已經已經有一個卡片的類。如果用戶還能將卡片放在格子上，我們就使用這種辦法來檢查。在更新棋盤用戶界面后，通過調用updateScores函數(shù)(將在以后添加這個函數(shù))來更新玩家的成績。

 
 
 
 
    
  
  
  
  
  1. me.room.findAll({room: room, type: 'move'}).watch().subscribe(
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. function(moves){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. moves.forEach(function(item){
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. var block = document.getElementById(item.block);
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. block.innerHTML = item.piece;
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. block.className = "col done";
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. });
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. me.updateScores();
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. },
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. function(err){
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. console.log(err);
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. }
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. );
    26.

放置卡片

每當用戶點擊棋盤上的任何一格時都要調用placePiece函數(shù)，同時要提供對應格子的ID值作為此函數(shù)的參數(shù)。這允許我們隨心所欲地操縱游戲格子。在本程序中，使用此函數(shù)來檢查某個游戲格子是否屬于done類型。如果沒有done標志，則創(chuàng)建一個新的移動，并顯示當前房間、格子ID值及對應的卡片。

 
 
 
 
    
  
  
  
  
  1. $scope.placePiece = function(id){
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. var block = document.getElementById(id);
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. if(!angular.element(block).hasClass('done')){
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. me.room.store({
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. type: 'move',
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. room: me.room_name,
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. block: id,
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. piece: me.piece
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. });
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. }
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. };
    22.

更新玩家得分

為了更新玩家得分，需要構建一個包含可能的獲勝組合的數(shù)組，如下所示：

 
 
 
 
    
  
  
  
  
  1. const possible_combinations = [
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. [1, 4, 7],
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. [2, 5, 8],
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. [3, 2, 1],
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. [4, 5, 6],
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. [3, 6, 9],
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. [7, 8, 9],
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. [1, 5, 9],
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. [3, 5, 7]
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. ];
    20.

在這段代碼中，[1, 4, 7]對應于第一行，[1, 2, 3]對應于第一列。只要相應的數(shù)字存在，順序是無關緊要的。下面的圖形有助于你更直觀地了解這一點。

接下來，需要初始化每個單獨卡片的得分并循環(huán)遍歷每個可能的組合。對于每一次循環(huán)遍歷，初始化已經放到棋盤上的卡片總數(shù)。然后針對每一種可能的組合進行循環(huán)遍歷。使用id來檢查是否相應的格子上已經放了卡片。如果已經有了卡片，則取得實際卡片并把卡片總數(shù)加1。在循環(huán)結束后，檢查是否卡片總數(shù)等于3。如果卡片總數(shù)等于3，則增加該卡片得分數(shù)，直到遍歷完所有可能的組合。一旦完成，更新當前玩家和對手的得分值。

 
 
 
 
    
  
  
  
  
  1. var scores = {'X': 0, 'O': 0};
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. possible_combinations.forEach(function(row, row_index){
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. var pieces = {'X' : 0, 'O': 0};
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. row.forEach(function(id, item_index){
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. var block = document.getElementById(id);
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. if(angular.element(block).hasClass('done')){ //check if there's already a piece
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. var piece = block.innerHTML;
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. pieces[piece] += 1;
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. }
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. });
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. if(pieces['X'] == 3){
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. scores['X'] += 1;
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. }else if(pieces['O'] == 3){
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. scores['O'] += 1;
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. }
    30. 
  
  
  
  
  30. 
  
  
  
  
  31. });
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. //update current player and opponent score
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. $scope.$apply(function(){
    36. 
  
  
  
  
  36. 
  
  
  
  
  37. $scope.player_score = scores[me.piece];
    38. 
  
  
  
  
  38. 
  
  
  
  
  39. $scope.opponent_score = scores[$scope.opponent_piece];
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. });
    42.

創(chuàng)建主模板文件

現(xiàn)在，在目錄www/templates下創(chuàng)建一個模板文件home.html，并添加如下代碼：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. Ionic Horizon Tic Tac Toe
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
    12. 
  
  
  
  
  12. 
  
  
  
  
    14. 
  
  
  
  
  14. 
  
  
  
  
    16. 
  
  
  
  
  16. 
  
  
  
  
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. 
  
  
  
  
  20. 
  
  
  
  
    22. 
  
  
  
  
  22. 
  
  
  
  
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. 
  
  
  
  
  26.
  • join

  • 現(xiàn)在，我們來分析一下上面的代碼。首先，創(chuàng)建了一個總的包裝器，在用戶連接到Horizon服務器前這部分內容是不顯示的：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. ...
      4. 
  
  
  
  
    4. 
  
  
  
  
    5.

    加入游戲房間的表單代碼如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
      4. 
  
  
  
  
    4. 
  
  
  
  
      6. 
  
  
  
  
    6. 
  
  
  
  
      8. 
  
  
  
  
    8. 
  
  
  
  
    9. 
  
  
  
  
    10. 
  
  
  
  
      12. 
  
  
  
  
    12. 
  
  
  
  
      14. 
  
  
  
  
    14. 
  
  
  
  
    15. 
  
  
  
  
    16. 
  
  
  
  
    17. 
  
  
  
  
    18. 
  
  
  
  
      20. 
  
  
  
  
    20. 
  
  
  
  
    21. join
      22. 
  
  
  
  
    22. 
  
  
  
  
    23. 
  
  
  
  
    24. 
  
  
  
  
    25.

    井字棋棋盤的設計相關代碼如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
      4. 
  
  
  
  
    4. 
  
  
  
  
      6. 
  
  
  
  
    6. 
  
  
  
  
      8. 
  
  
  
  
    8. 
  
  
  
  
      10. 
  
  
  
  
    10. 
  
  
  
  
    11. 
  
  
  
  
    12. 
  
  
  
  
      14. 
  
  
  
  
    14. 
  
  
  
  
      16. 
  
  
  
  
    16. 
  
  
  
  
      18. 
  
  
  
  
    18. 
  
  
  
  
      20. 
  
  
  
  
    20. 
  
  
  
  
    21. 
  
  
  
  
    22. 
  
  
  
  
      24. 
  
  
  
  
    24. 
  
  
  
  
      26. 
  
  
  
  
    26. 
  
  
  
  
      28. 
  
  
  
  
    28. 
  
  
  
  
      30. 
  
  
  
  
    30. 
  
  
  
  
    31. 
  
  
  
  
    32. 
  
  
  
  
    33.

    玩家得分部分對應的代碼如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
      4. 
  
  
  
  
    4. 
  
  
  
  
      6. 
  
  
  
  
    6. 
  
  
  
  
      8. 
  
  
  
  
    8. 
  
  
  
  
      10. 
  
  
  
  
    10. 
  
  
  
  
    11. 
  
  
  
  
    12. 
  
  
  
  
      14. 
  
  
  
  
    14. 
  
  
  
  
      16. 
  
  
  
  
    16. 
  
  
  
  
      18. 
  
  
  
  
    18. 
  
  
  
  
    19. 
  
  
  
  
    20. 
  
  
  
  
    21. 
  
  
  
  
    22. 
  
  
  
  
    23.

    編寫樣式文件

    下面給出客戶端應用程序的樣式定義：

     
 
 
 
      
  
  
  
  
    1. #board .col {
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. text-align: center;
      4. 
  
  
  
  
    4. 
  
  
  
  
    5. height: 100px;
      6. 
  
  
  
  
    6. 
  
  
  
  
    7. line-height: 100px;
      8. 
  
  
  
  
    8. 
  
  
  
  
    9. font-size: 30px;
      10. 
  
  
  
  
    10. 
  
  
  
  
    11. padding: 0;
      12. 
  
  
  
  
    12. 
  
  
  
  
    13. }
      14. 
  
  
  
  
    14. 
  
  
  
  
    15. #board .col:nth-child(2) {
      16. 
  
  
  
  
    16. 
  
  
  
  
    17. border-right: 1px solid;
      18. 
  
  
  
  
    18. 
  
  
  
  
    19. border-left: 1px solid;
      20. 
  
  
  
  
    20. 
  
  
  
  
    21. }
      22. 
  
  
  
  
    22. 
  
  
  
  
    23. #board .row:nth-child(2) .col {
      24. 
  
  
  
  
    24. 
  
  
  
  
    25. border-top: 1px solid;
      26. 
  
  
  
  
    26. 
  
  
  
  
    27. border-bottom: 1px solid;
      28. 
  
  
  
  
    28. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. 
  
  
  
  
    31. .player {
      32. 
  
  
  
  
    32. 
  
  
  
  
    33. font-weight: bold;
      34. 
  
  
  
  
    34. 
  
  
  
  
    35. text-align: center;
      36. 
  
  
  
  
    36. 
  
  
  
  
    37. }
      38. 
  
  
  
  
    38. 
  
  
  
  
    39. .player-name {
      40. 
  
  
  
  
    40. 
  
  
  
  
    41. font-size: 18px;
      42. 
  
  
  
  
    42. 
  
  
  
  
    43. }
      44. 
  
  
  
  
    44. 
  
  
  
  
    45. .player-score {
      46. 
  
  
  
  
    46. 
  
  
  
  
    47. margin-top: 15px;
      48. 
  
  
  
  
    48. 
  
  
  
  
    49. font-size: 30px;
      50. 
  
  
  
  
    50. 
  
  
  
  
    51. }
      52. 
  
  
  
  
    52. 
  
  
  
  
    53. #scores {
      54. 
  
  
  
  
    54. 
  
  
  
  
    55. margin-top: 30px;
      56. 
  
  
  
  
    56. 
  
  
  
  
    57. }
      58.

    運行應用程序

    現(xiàn)在，你可以通過執(zhí)行應用程序根目錄下的如下命令在你的瀏覽器中測試應用程序：

     
 
 
 
      
  
  
  
  
    1. ionic serve
      2.

    這樣啟動的服務器端將服務于本地項目并在你的默認瀏覽器中打開一個新的選項卡。

    如果你想要和朋友一起測試的話，你可以使用Ngrok把Horizon服務器發(fā)布到互聯(lián)網上，命令如下：

     
 
 
 
      
  
  
  
  
    1. ngrok http 8181
      2.

    這個命令將生成一個URL，當你連接到Horizon服務器時可以用作主機地址：

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

    除此之外，還要在index.html文件中改變到horizon.js文件的引用：

     
 
 
 
      
  
  
  
  
    1.

    若要創(chuàng)建程序的移動版本，需要在你的項目中添加一個平臺(例如，安卓系統(tǒng))。這假定你已經在自己的計算機
    網頁題目：用Horizon搭建可擴展的Javascript移動應用后端方案
    網頁鏈接：http://m.5511xx.com/article/cdjjgdg.html

    其他資訊