继上一次介绍了《神奇的六边形》的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏《跳跃的方块》的完整开发流程。
(点击图片可进入游戏体验)
因内容太多,为方便大家阅读,所以分多次来讲解。
若要一次性查看所有文档,也可点击这里。
接上回(《跳跃的方块》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 };
下次将继续介绍“界面控制”,敬请期待!
其他相关链接
开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 1