青瓷引擎之純JavaScript打造HTML5遊戲第二彈——《跳躍的方塊》Part 7（服務器鏈接&數據處理）

時間 2019-11-14

標籤青瓷引擎 javascript 打造 html5 html 遊戲第二跳躍的方塊服務器鏈接數據處理欄目 JavaScript 简体版

原文原文鏈接

繼上一次介紹了《神奇的六邊形》的完整遊戲開發流程後（可點擊這裏查看），此次將爲你們介紹另一款魔性遊戲《跳躍的方塊》的完整開發流程。php

（點擊圖片可進入遊戲體驗）html

因內容太多，爲方便你們閱讀，因此分屢次來說解。api

若要一次性查看全部文檔，也可點擊這裏。服務器

接上回（《跳躍的方塊》Part 6）微信

(四)服務器鏈接

服務器部分已經搭建完成，這裏就須要與服務器進行通信。構建一個與服務器的通信類： Interactive.js，使用引擎AssetUtil功能，將這個腳本加載到UIRoot上，進行與服務器的通信。
代碼以下：函數

 1 var Interactive = qc.defineBehaviour('qc.engine.Interactive', qc.JumpingBrick.GameOver, function() {
 2     var self = this;
 3     // 設置到全局
 4     JumpingBrick.service = self;
 5 
 6     self.serverUrl = "http://127.0.0.1/JumpingBrick/";
 7 }, {
 8     serverUrl: qc.Serializer.STRING
 9 });
10 
11 /**
12  * 上傳分數
13  * @param {string} rid - 用戶惟一標示
14  * @param {string} token - 當前登錄用戶的臨時標示
15  * @param {number} score - 分數
16  * @param {func} callbackFunc - 回調函數
17  */
18 Interactive.prototype.updateScorers = function(rid, token, score, callbackFunc) {
19     var url = this.serverUrl + "updateScorers.php";
20     url += "?rid=" + rid;
21     url += "&token=" + token;
22     url += "&score=" + score;
23 
24     qc.AssetUtil.get(url, callbackFunc);
25 };
26 
27 /**
28  * 獲取排行榜
29  * @param {string} rid - 用戶惟一標示
30  * @param {string} token - 當前登錄用戶的臨時標示
31  * @param {func} callbackFunc - 回調函數
32  */
33 Interactive.prototype.getRank = function(rid, token, callbackFunc) {
34     var url = this.serverUrl + "getRank.php";
35     url += "?rid=" + rid;
36     url += "&token=" + token;
37 
38     qc.AssetUtil.get(url, callbackFunc);
39 };

（五）本地數據存儲

本地數據存儲使用引擎提供的Storage功能來實現本地數據的存儲功能。post

（六）處理遊戲數據

如今，服務器通信、本地存儲的接口都已經準備就緒。能夠開始處理實際的遊戲數據了。ui

建立腳本

建立數據管理的DataManager.js，並加載到UIRoot上。用來管理全部的數據。this

 1 /**
 2  * 數據管理
 3  */
 4 var DataManager = qc.defineBehaviour('qc.JumpingBrick.DataManager', qc.Behaviour, function() {
 5     var self = this;
 6     JumpingBrick.data = self;
 7     self.loginType = DataManager.NOLOGIN;
 8     self.onRankUpdate = new qc.Signal();
 9     self.shareIcon = 'http://mama.game.qcplay.com/JumpingBrick/icon.png?v=1.1';
10     self.sharePath = 'http://mama.game.qcplay.com/gamelink/jumpjumpingbrick.php';
11     self.shareTitle = [
12         '你能超越我嗎？',
13         '真是反應靈巧，求超越！',
14         '反應力爆表，真心求超越！',
15         '簡直神乎其技，無人能擋！'
16     ];
17     self.followPage = 'http://mp.weixin.qq.com/s?__biz=MzAxMDc1MDI5OQ==&mid=400438976&idx=1&sn=abbefc3e6f53bfdf7a5bef0eed53cce2&scene=0#wechat_redirect';
18 }, {
19     shareIcon: qc.Serializer.STRING,
20     sharePath: qc.Serializer.STRING,
21     shareTitle: qc.Serializer.STRINGS,
22     followPage: qc.Serializer.STRING
23 });
24 
25 DataManager.NOLOGIN = 0;
26 DataManager.QUICKLOGIN = 1;
27 DataManager.WECHATLOGIN = 2;
28 
29 DataManager.prototype.awake = function() {
30     var self = this;
31     // 添加微信的回調接口
32     self.wechat = self.gameObject.getScript('qc.WeChat');
33     if (self.wechat) {
34         self.addListener(self.wechat.onLogin, self.doWechatLoginResult, self);
35         self.addListener(self.wechat.onStartLogin, self.doStartLoginService, self);
36     }
37 };

處理普通登錄和微信登錄

代碼以下：url

 1 /**
 2  * 是否正在微信登錄中
 3  * @return {Boolean} [description]
 4  */
 5 DataManager.prototype.isInWechatLogin = function() {
 6     return this.wechat && this.wechat.status === 'loggingIn';
 7 };
 8 
 9 /**
10  * 是否在微信中打開
11  */
12 DataManager.prototype.isWeChat = function() {
13     return this.wechat && this.wechat.isWeChat();
14 };
15 
16 /**
17  * 快速登陸，直接進入遊戲
18  */
19 DataManager.prototype.quickLogin = function() {
20     var self = this;
21     self.loginType = DataManager.QUICKLOGIN;
22     self.loadScore();
23     JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
24 };
25 
26 /**
27  * 微信登陸，等待微信處理
28  */
29 DataManager.prototype.wechatLogin = function() {
30     var self = this;
31     self.wechat.login();
32 };
33 
34 /**
35  * 註銷
36  */
37 DataManager.prototype.logout = function() {
38     var self = this;
39     self.loginType = DataManager.NOLOGIN;
40 };
41 
42 /**
43  * 開始登錄遊戲服務器
44  */
45 DataManager.prototype.doStartLoginService = function() {
46     JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Logining);
47 };
48 
49 /**
50  * 登陸結果
51  */
52 DataManager.prototype.doWechatLoginResult = function(result) {
53     var self = this;
54     if (result && result === 'fail') {
55         JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Welcome);
56         return;
57     }
58 
59     var data = self.wechat.user;
60     self.loginType = DataManager.WECHATLOGIN;
61     self.rid = data.rid;
62     self.token = data.token;
63     self.loadScore();
64     JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
65 };

基礎數據處理

微信登陸後當微信登陸時，保存高分到服務器，並能夠從服務器獲取排行榜信息。

  1 /**
  2  * 獲得當前的保存鍵值，爲不一樣的用戶存儲不一樣的數據
  3  */
  4 DataManager.prototype._getStorageKey = function() {
  5     var self = this;
  6     if (self.loginType === DataManager.QUICKLOGIN) {
  7         return 'quickLogin';
  8     }
  9     else if (self.loginType === DataManager.WECHATLOGIN && self.rid) {
 10         return self.rid;
 11     }
 12     else {
 13         return 'temp';
 14     }
 15 };
 16 
 17 /**
 18  * 獲取數據
 19  */
 20 DataManager.prototype.loadScore = function() {
 21     var self = this;
 22     self.highScore = parseInt(self.game.storage.get('JumpingBrickHighScore_' + self._getStorageKey()));
 23 };
 24 
 25 /**
 26  * 保存數據
 27  */
 28 DataManager.prototype.saveScore = function (score) {
 29     var self = this;
 30     self.lastScore = score;
 31     self.newHigh = false;
 32     if (!self.highScore || score > self.highScore) {
 33         self.newHigh = true;
 34         self.highScore = score;
 35         try {
 36             self.game.storage.set('JumpingBrickHighScore_' + self._getStorageKey(), score);
 37             self.game.storage.save();
 38         }
 39         catch(e) {
 40             console.log('當前開啓了隱私模式，沒法保存');
 41         }
 42         self.updateScore(self.highScore);
 43     }
 44 };
 45 
 46 /**
 47  * 保存數據到服務器
 48  */
 49 DataManager.prototype.updateScore = function(score) {
 50     var self = this;
 51     if (self.loginType !== DataManager.WECHATLOGIN) {
 52         return;
 53     }
 54     JumpingBrick.service.updateScorers(self.rid, self.token, score);
 55 };
 56 
 57 /**
 58  * 保存遊戲數據
 59  */
 60 DataManager.prototype.saveGameState = function(data) {
 61     var self = this;
 62     try {
 63         self.game.storage.set('JumpingBrickGameState_' + self._getStorageKey(), JSON.stringify(data));    
 64         self.game.storage.save();
 65     }
 66     catch(e) {
 67         console.log('當前開啓了隱私模式，沒法保存');
 68     }
 69 };
 70 
 71 /**
 72  * 獲取並刪除保存的遊戲數據
 73  */
 74 DataManager.prototype.restoreGameState = function() {
 75     var self = this;
 76     var data = self.game.storage.get('JumpingBrickGameState_' + self._getStorageKey());
 77     if (data) {
 78         data = JSON.parse(data);
 79     }
 80     return data;
 81 };
 82 
 83 /**
 84  * 刪除遊戲數據
 85  */
 86 DataManager.prototype.clearGameState = function() {
 87     var self = this;
 88     try {
 89         self.game.storage.del('JumpingBrickGameState_' + self._getStorageKey());
 90         self.game.storage.save();
 91     }
 92     catch(e) {
 93         console.log('當前開啓了隱私模式，沒法保存');
 94     }
 95 };
 96 
 97 /**
 98  * 請求排行榜
 99  */
100 DataManager.prototype.queryRank = function() {
101     var self = this;
102     if (self.loginType !== DataManager.WECHATLOGIN) {
103         return;
104     }
105     JumpingBrick.service.getRank(self.rid, self.token, self.onGetRankSuccess.bind(self));
106 };
107 
108 /**
109  * 獲取排行榜成功
110  */
111 DataManager.prototype.onGetRankSuccess = function(data) {
112     var self = this;
113     try {
114         data = JSON.parse(data);
115     }
116     catch (e) {
117         data = {
118             rankTop: [],
119             userData: {}
120         };
121     }
122 
123     var self = this;
124     // 獲取排行榜成功
125     var rank = 0;
126     var rankTop = data.rankTop;
127     for (var i = 0; i < rankTop.length; i++) {
128         var u = rankTop[i];
129         if (u.rid === self.rid) {
130             rank = i + 1;
131             break;
132         }
133     }
134     data.selfRank = data.userData && data.userData[0];
135     if (data.selfRank)
136         data.selfRank.ranking = rank;
137     self.onRankUpdate.dispatch(data);
138 };

設置當前分享的內容

 1 /**
 2  * 設置分享內容
 3  */
 4 DataManager.prototype.buildShareContent = function(score) {
 5     var self = this,
 6         wechat = self.wechat;
 7     if (wechat && wechat.wx.share) {
 8         var title;
 9         if (score <= 0)
10             title = '《跳躍的方塊》真是一款魔性的遊戲，根本停不下來！';
11         else {
12             var index = 0;
13             if (score > 100) index = 3;
14             else if (score > 50) index = 2;
15             else if (score > 20) index = 1;
16             else index = 0;
17             title = '我在《跳躍的方塊》中達到' + score + '層，' + self.shareTitle[index];
18         }
19         wechat.share(title, self.shareIcon, '', self.sharePath);
20     }
21 };