继上一次介绍了《神奇的六边形》的完整游戏开发流程后（可点击这里查看），这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。
（点击图片可进入游戏体验）
因内容太多，为方便大家阅读，所以分多次来讲解。
若要一次性查看所有文档，也可点击这里。
接上回（《跳跃的方块》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功能来实现本地数据的存储功能。
（六）处理游戏数据
现在，服务器通讯、本地存储的接口都已经准备就绪。可以开始处理实际的游戏数据了。
创建脚本
创建数据管理的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 };
时间： 2024-12-20 14:17:59