青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 7（服务器连接&数据处理）

继上一次介绍了《神奇的六边形》的完整游戏开发流程后（可点击这里查看），这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。

（点击图片可进入游戏体验）

因内容太多，为方便大家阅读，所以分多次来讲解。

若要一次性查看所有文档，也可点击这里。

(四)服务器连接

服务器部分已经搭建完成，这里就需要与服务器进行通讯。构建一个与服务器的通讯类： 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功能来实现本地数据的存储功能。

（六）处理游戏数据

现在，服务器通讯、本地存储的接口都已经准备就绪。可以开始处理实际的游戏数据了。

创建脚本

创建数据管理的DataManager.js，并加载到UIRoot上。用来管理所有的数据。

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

处理普通登陆和微信登陆

代码如下：

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

下次将继续介绍“界面控制”，敬请期待！

JS开发HTML5游戏《神奇的六边形》（一）

青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1