JS開發HTML5遊戲《悠悠考拉》（三）

時間 2019-11-09

標籤開發 html5 html 遊戲悠悠考拉欄目 JavaScript 简体版

原文原文鏈接

（點擊圖片可進入試玩）php

本篇文章爲第三部份內容，這篇文章將接着上篇文章的內容，這篇文章的主要內容有：html

七、遊戲中的暫停與結束處理node

八、排行榜界面數據庫

7、遊戲中的暫停與結束處理api

7.1 暫停服務器

暫停處理：在遊戲中，鞦韆的搖擺、柱子的移動等都是經過Tween動畫實現的，例如鞦韆搖擺咱們能夠加TweenRation動畫、柱子移動能夠加TweenPosition動畫。當咱們按下暫停鍵時，此時，鞦韆與柱子還有考拉等應該是靜止的，我還但願能彈出另外一個界面，該界面有一些界面按鈕，點擊按鈕能夠實現對應的操做，關閉彈出的界面時，咱們又能夠繼續遊戲。首先咱們能夠在Main.js中加入代碼對暫停按鈕進行監聽點擊事件：代碼以下，微信

 1 var Main = qc.defineBehaviour('qc.Koala.ui.Main', qc.Behaviour, function() {
 2     // 風值
 3     this.windValue = 0;
 4 
 5     // 掉落事件控制器
 6     this.dropTimer = null;
 7 
 8     // 跳臺對象
 9     this._step = null;
10 
11     // 鞦韆對象
12     this.swing = null;
13 }, {
14     // 柱子池
15     pillarPool : qc.Serializer.NODE,
16     // 考拉節點
17     koala : qc.Serializer.NODE,
18     // 暫停按鈕
19     pauseBtn : qc.Serializer.NODE,
20     // 風值
21     wind : qc.Serializer.NODE,
22     // 風向
23     windDirection : qc.Serializer.NODE,
24     // 分數節點
25     score : qc.Serializer.NODE
26 });
27 /**
28  * 初始化
29  */
30 Main.prototype.awake = function() {
31     var self = this;
32 
33     // 監聽暫停按鈕點擊事件
34     this.addListener(this.pauseBtn.onClick, this._pause, this);
35 
36     // 繼續遊戲時，恢復暫停按鈕交互
37     this.addListener(qc.Koala.onContinue, function() {
38         this.pauseBtn.interactive = true;
39     }, this);
40 }；
41 /**
42  * 暫停遊戲
43  */
44 Main.prototype._pause = function () {
45     // 若是遊戲結束，則暫停按鈕點擊不作任何處理
46     if (qc.Koala.logic.me.isDie)
47         return;
48 
49     // 設置遊戲暫停狀態
50     qc.Koala.logic.me.paused = true;
51 
52     // 派發遊戲暫停事件
53     qc.Koala.onPause.dispatch();
54 };

View Code

在該代碼中有qc.Koala.onPause.dispatch()，意思是派發暫停事件。而咱們能夠在在Scripts/ui/Koala.js中加入事件接收，並中止鞦韆與考拉的動做從而達到暫停效果。代碼以下所示：網絡

 1 var Koala = qc.defineBehaviour('qc.Koala.ui.Koala', qc.Behaviour, function() {
 2     // 鞦韆對象
 3     this.swingScript = null;
 4 
 5     // 考拉當前播放的動做
 6     this.currAnimation = 'stand';
 7 }, {
 8     // 相機節點
 9     camera : qc.Serializer.NODE,
10     // 特效節點
11     effect : qc.Serializer.NODE,
12     // 文本
13     labelImg : qc.Serializer.NODE,
14     // 分數
15     scoreImg : qc.Serializer.NODE,
16     // 死亡效果圖片
17     dieImg : qc.Serializer.NODE,
18     // 剎車效果圖片
19     brakeImg : qc.Serializer.NODE
20 });
21 
22 /**
23  * 初始化
24  */
25 Koala.prototype.awake = function () {
26     // 監聽遊戲暫停事件
27     this.addListener(qc.Koala.onPause, this._pause, this);
28 
29 };
30 
31 /**
32  * 暫停遊戲
33  */
34 Koala.prototype._pause = function () {
35     this.swingScript.stop();
36     this.gameObject.stop();
37 
38     this.labelImg.getScript('qc.TweenAlpha').onFinished.removeAll(this);
39 
40     // 並移除動做結束監聽
41     var s = this.gameObject.getScript('qc.TweenPosition');
42     s.onFinished.remove(this.take, this);
43 
44     // 中止考拉走路位移動畫
45     qc.Tween.stopGroup(this.gameObject, 3);
46 };

View Code

此時，我還但願在暫停的同時可以彈出一個菜單界面。彈出的菜單界面效果圖以下所示：koa

菜單界面具體佈局我就不詳述了，能夠參看前兩篇文章的界面佈局，也能夠查看更詳細的界面佈局信息《界面佈局》。前面咱們講過，當按下暫停按鈕時，該菜單界面也會彈出來。咱們能夠建立一個腳本：Pause.js，該腳本的主要功能是接收遊戲暫停事件的派送、點擊"關閉"按鈕時又繼續遊戲、以及上述中的按鈕按下時對應的功能，排行榜與分享的具體實現我會在後續遊戲結束處理中詳細講述。代碼以下：ide

 1 var Pause = qc.defineBehaviour('qc.Koala.ui.Pause', qc.Behaviour, function() {
 2 }, {
 3     // 繼續遊戲按鈕
 4     continueBtn : qc.Serializer.NODE,
 5     restartBtn : qc.Serializer.NODE,
 6     shareBtn : qc.Serializer.NODE,
 7     moreBtn : qc.Serializer.NODE,
 8     rankBtn : qc.Serializer.NODE
 9 });
10 
11 /**
12  * 初始化
13  */
14 Pause.prototype.awake = function() {
15     var self =this;
16     // 監聽遊戲暫停事件
17     this.addListener(qc.Koala.onPause, this.show, this);
18 
19     // 監聽繼續遊戲按鈕點擊事件
20     this.addListener(this.continueBtn.onClick, this.onContinueBtnClick, this);
21 
22     // 監聽從新開始遊戲點擊事件
23     this.addListener(this.restartBtn.onClick, this.onRestartBtnClick, this);
24 
25     // 監聽分享按鈕點擊事件
26     this.addListener(this.shareBtn.onClick, function() {
27         qc.Koala.showShareMsg.dispatch();
28     }, this);
29 
30     // 監聽更多遊戲按鈕點擊事件
31     this.addListener(this.moreBtn.onClick, function() {
32         document.location.href = qc.Koala.logic.config.followHref;
33     }, this);
34 
35     // 監聽排行榜按鈕點擊事件
36     this.addListener(this.rankBtn.onClick, this.onRankBtnClick, this);
37 };
38 
39 /** 從新開始遊戲按鈕點擊後處理 */
40 Pause.prototype.onRestartBtnClick = function() {
41     // 派發遊戲開始事件，並指定爲從新開始
42     qc.Koala.onStart.dispatch(true);
43     // 隱藏死亡界面
44     this.hide();
45 };
46 
47 /**
48  * 繼續遊戲按鈕點擊後處理
49  */
50 Pause.prototype.onContinueBtnClick = function() {
51     // 設置遊戲暫停狀態
52     qc.Koala.logic.me.paused = false;
53 
54     // 派發繼續遊戲事件
55     qc.Koala.onContinue.dispatch();
56 
57     // 隱藏界面
58     this.hide();
59 };
60 
61 /**
62  * 排行榜按鈕點擊事件後處理
63  */
64 Pause.prototype.onRankBtnClick = function () {
65     if (qc.Koala.logic.me.userInfo &&
66         qc.Koala.logic.me.userInfo.subscribe) {
67         qc.Koala.onRankingClose.addOnce(this.show, this);
68 
69         qc.Koala.showRanking.dispatch();
70 
71         this.hide();
72     }
73     else {
74         //顯示關注界面
75         qc.Koala.showFollowMsg.dispatch();
76     }
77 };
78 
79 /**
80  * 顯示界面
81  */
82 Pause.prototype.show = function () {
83     this.gameObject.visible = true;
84 };
85 
86 /**
87  * 隱藏界面
88  */
89 Pause.prototype.hide = function () {
90     this.gameObject.visible = false;
91 };

View Code

當咱們點擊"關閉"按鈕時，咱們但願繼續遊戲。此時在Pause.js中的onContinueBtnClick方法中加入一個繼續遊戲的事件派發qc.Koala.onContinue.dispatch()，剛纔暫停時，咱們中止鞦韆與考拉的動做，此時，咱們能夠相應地在Scripts/ui/Koala.js中加入事件接收用於恢復遊戲，加入的代碼以下：

 1 var Koala = qc.defineBehaviour('qc.Koala.ui.Koala', qc.Behaviour, function() {
 2     // 鞦韆對象
 3     this.swingScript = null;
 4 
 5     // 考拉當前播放的動做
 6     this.currAnimation = 'stand';
 7 }, {
 8     // 相機節點
 9     camera : qc.Serializer.NODE,
10     // 特效節點
11     effect : qc.Serializer.NODE,
12     // 文本
13     labelImg : qc.Serializer.NODE,
14     // 分數
15     scoreImg : qc.Serializer.NODE,
16     // 死亡效果圖片
17     dieImg : qc.Serializer.NODE,
18     // 剎車效果圖片
19     brakeImg : qc.Serializer.NODE
20 });
21 
22 /**
23  * 初始化
24  */
25 Koala.prototype.awake = function () {
26 
27     // 監聽遊戲繼續事件
28     this.addListener(qc.Koala.onContinue, this._continue, this);
29 };
30 
31 /**
32  * 繼續遊戲
33  * @method qc.Koala.ui.Koala#_continue
34  */
35 Koala.prototype._continue = function () {
36     if (this.currAnimation !== 'die')
37         this[this.currAnimation]();
38 };

View Code

7.2 遊戲結束

遊戲結束處理：在上一篇文章中咱們在碰撞中講到了當考拉碰到柱子的左邊緣或者超出遊戲邊界時，則結束遊戲；我但願遊戲結束時，可以彈出遊戲結束界面，界面上能夠顯示我這輪遊戲的得分以及我歷史的最高分，因爲在手機上咱們能夠微信登陸，因此我想遊戲結束界面還應該有向好友分享的功能、查詢排行榜功能、以及重玩一次的功能。最終效果圖應該是這樣的：

界面佈局比較簡單就不講述了，讀者們若是想知更多的界面佈局信息也能夠參考《界面佈局》，須要講述的是，當考拉碰到柱子左邊緣或者超出遊戲界面時，此時，在上一篇的腳本Main.js中的檢測碰撞代碼會返回對應死亡信息，以下面代碼：

 1 Main.prototype._onDrop = function (vx0, vy0, t) {
 2     // 計算橫向和縱向偏移值
 3     var preY = this.koala.y,
 4         deltaX = vx0 * t,
 5         deltaY = vy0 * t;
 6 
 7     // 設置考拉位置
 8     this.koala.x += deltaX;
 9     this.koala.y += deltaY;
10 
11     // 調整相機位置
12     this.adjustCamera(deltaX, deltaY);
13 
14     // 檢測考拉位置
15     var result = this._checkCollide(preY);
16     if (result !== 0) {
17         // 移除定時器
18         this.game.timer.remove(this.dropTimer);
19         this.dropTimer = null;
20 
21         // 成功跳到下一個站臺
22         if (result === 1) {
23             this._onStep();
24         }
25 
26         // 遊戲結束
27         if (result < 0) {
28             this.gameOver(result);
29         }
30     }
31 };
32 
33 /**
34  * 檢測考拉是否能夠站在平臺上
35  * @param  {number} preY - 考拉移動前的y軸位置
36  * @return {number} 返回值定義以下
37  *          1：落在跳臺上；
38  *         -1：超出遊戲邊界；
39  *         -2：碰到跳臺的左邊緣；
40  *          0：還在掉落
41  */
42 Main.prototype._checkCollide = function(preY) {
43     var x = this.koala.x,
44         y = this.koala.y,
45         step = this._step.gameObject;
46 
47     // 判斷是否落到跳臺上
48     if (x > step.x &&
49         x < step.x + step.width &&
50         preY <= step.y + step.parent.y &&
51         y >= step.y + step.parent.y)
52         return 1;
53 
54     // 超出遊戲邊界，由於相機有跟着考拉在動，因此在這邊不須要判斷遊戲屏幕x軸方向超邊
55     if (y > this.gameObject.height + this.koala.height - this.pillarPool.parent.y)
56         return -1;
57 
58     // 判斷與跳臺左邊緣碰撞
59     if (x > step.x &&
60         x < step.x + step.width &&
61         preY > step.y + step.parent.y)
62         return -2;
63 
64     return 0;
65 };

View Code

在上述代碼中，咱們能夠判斷若是result返回的值爲負的，則此時咱們就能夠判斷遊戲結束並派發一個遊戲結束的事件。在Main.js腳本代碼中加入以下代碼：

 1 /**
 2  * 遊戲結束，並播放掉落動畫
 3  * @param  {number} result - 遊戲死亡類型
 4  *         -1：超出遊戲邊界；
 5  *         -2：碰到跳臺的左邊緣；
 6  */
 7 Main.prototype.gameOver = function(result) {
 8     // 設置遊戲死亡狀態
 9     qc.Koala.logic.me.isDie = true;
10 
11     // 禁止暫停按鈕交互
12     this.pauseBtn.interactive = false;
13 
14     // 超出遊戲邊界
15     if (result === -1) {
16         qc.Koala.onGameOver.dispatch();
17         return;
18     }
19 
20     // 碰到跳臺的左邊緣
21     if (result === -2) {
22         // 播放死亡動做
23         var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
24         koalaScript.die(function() {
25             qc.Koala.onGameOver.dispatch();
26         });
27     }
28 };

View Code

相應的咱們能夠在Script/ui文件夾下建立腳本：GameOver.js，該腳本的主要功能是監聽遊戲結束事件的派發，分享功能、獲取玩家歷史最高分、查詢排行榜及再玩一次，代碼以下：

 1 var GameOver = qc.defineBehaviour('qc.Koala.ui.GameOver', qc.Behaviour, function() {
 2 }, {
 3     // 從新開始遊戲按鈕
 4     restartBtn : qc.Serializer.NODE,
 5     // 分享按鈕
 6     shareBtn : qc.Serializer.NODE,
 7     // 更逗遊戲按鈕
 8     moreBtn : qc.Serializer.NODE,
 9     // 排行榜按鈕
10     rankBtn : qc.Serializer.NODE,
11     // 記錄更新
12     goalSign : qc.Serializer.NODE,
13     // 當前分數文本
14     scoreLabel : qc.Serializer.NODE,
15     // 最高分文本
16     bestLabel : qc.Serializer.NODE,
17     // 世界排名百分比
18     percentLabel : qc.Serializer.NODE
19 });
20 
21 GameOver.prototype.awake = function() {
22     // 監聽遊戲結束事件
23     this.addListener(qc.Koala.onGameOver, this.show, this);
24 
25     // 監聽從新開始遊戲點擊事件
26     this.addListener(this.restartBtn.onClick, this.onRestartBtnClick, this);
27 
28     // 監聽分享按鈕點擊事件
29     this.addListener(this.shareBtn.onClick, function() {
30         qc.Koala.showShareMsg.dispatch();
31     }, this);
32 
33     // 監聽更多遊戲按鈕點擊事件
34     this.addListener(this.moreBtn.onClick, function() {
35         document.location.href = qc.Koala.logic.config.followHref;
36     }, this);
37 
38     // 監聽排行榜按鈕點擊事件
39     this.addListener(this.rankBtn.onClick, this.onRankBtnClick, this);
40 };

View Code

7.3 分享

分享功能的實現。根據策劃要求，微信分享時，根據玩家所得的分數分享不一樣的內容，此時咱們也能夠將這些數據配置到Excel表中，在上一篇Excel表中添加一個sheet表取名share，添加的表格內容以下：

表中的min與max表示玩家的得分是否是在這個範圍內，若是是則分享對應的內容。一樣咱們須要建立一個腳本解析share sheet表中的內容而且能夠提供一個方法，根據提供的分數返回對應的內容，在Scripts/logic文件夾下建立腳本：Share.js，代碼以下：

 1 var ShareInfo = function(data) {
 2     this.id = data.id * 1;
 3     this.min = data.min * 1;
 4     this.max = data.max * 1;
 5     this.max = this.max == null ? Infinity : this.max;
 6     this.content = data.content;
 7 };
 8 
 9 var Share = qc.Koala.logic.Share = function(excel) {
10     this.shareMap = {};
11 
12     if (!excel)
13         excel = qc.Island.game.assets.find('config');
14 
15     var sheet = excel.findSheet('share');
16 
17     for (var i in sheet.rows) {
18         var row = sheet.rows[i];
19         this.shareMap[row.id] = new ShareInfo(row);
20     }
21 
22     //qc.Koala.onScoreChange.add(this.share, this);
23 };
24 
25 Share.prototype = {};
26 Share.prototype.constructor = Share;

View Code

咱們須要在入口腳本Koala.js的Koala.initLogic方法中將Share類實例化，以下：

 1 Koala.initLogic = function(excel, game) {
 2 
 3     // 設置遊戲對象引用
 4     this.game = game;
 5 
 6     // 設置遊戲幀率爲60幀
 7     game.time.frameRate = 60;
 8 
 9     // 初始化系統配置
10     this.logic.config = new qc.Koala.logic.Config(excel);
11 
12     // 遊戲相關數據邏輯類
13     this.logic.me = new qc.Koala.logic.Me();
14 
15     // 柱子相關邏輯類
16     this.logic.pillar = new qc.Koala.logic.Pillar(excel);
17 
18     // 風力值邏輯類
19     this.logic.wind = new qc.Koala.logic.Wind(excel);
20 
21     // 分享相關邏輯類
22     this.logic.share = new qc.Koala.logic.Share(excel);
23 
24     // 派發腳本準備就緒事件
25     this.onLogicReady.dispatch();
26 };

View Code

須要說明是，當咱們點擊分享成績按鈕時，此時咱們須要點擊手機屏幕右上角的分享功能，咱們能夠在Scripts/ui文件夾下的Welcome.js中的awake方法中加入代碼，該代碼用於從Share類中獲取分享的內容，代碼以下：

1 Welcome.prototype.awake = function() {
2     // 監聽用戶點擊分享
3     this.addListener(wx.onShare, function(body) {
4         body.title = qc.Koala.logic.share.getContent(qc.Koala.logic.me.score);
5         body.imgUrl = qc.Koala.logic.config.shareIcon;
6         body.desc = "";
7     }, this);
8 };

View Code

遊戲結束時，咱們須要將玩家的得分與歷史最高分做比較，若是高於歷史最高分，則將該得分上傳至服務器保存。須要說明的是：在遊戲中，咱們須要保存玩家的數據，數據分爲兩大類：

一、本地數據：例如歷史最高分等。本地數據可使用引擎提供的Storage功能來實現。前面的玩家分數管理用的就是Storage功能。

二、網絡數據：如提交歷史最高分、登陸信息、排行榜信息等。須要說明的是，網絡數據須要自行搭建服務器，服務器搭建好了以後，能夠用引擎提供的AssetUtil功能來與服務器進行通訊。搭建服務器代碼就不作詳述，你們能夠選擇本身擅長的語言搭建服務器，這裏只講解與服務器通訊的接口。

在Scripts文件夾下建立腳本：Interactive.js，該腳本主要用於向服務器上傳玩家數據。如在GameOver.js中有向服務器上傳分數的代碼，而Interactive.js就是提供一個接口。代碼以下：

 1 var Interactive = qc.defineBehaviour('qc.Interactive', qc.Behaviour, function() {
 2     qc.interactive = this;
 3 }, {
 4     gameName: qc.Serializer.STRING,
 5     serverUrl: qc.Serializer.STRING
 6 });
 7 
 8 /**
 9  * 上傳分數
10  * @param {string} rid - 用戶惟一標示
11  * @param {string} token - 當前登錄用戶的臨時標示
12  * @param {number} scorers - 分數
13  * @param {func} callbackFunc - 回調函數
14  */
15 Interactive.updateScorers = function(rid, token, scorers, callbackFunc, onerror) {
16     var url = qc.interactive.serverUrl + "updateScorers03.php";
17     url += "?rid=" + rid;
18     url += "&token=" + token;
19     url += "&scorers=" + scorers;
20     url += "&gameName=" + qc.interactive.gameName;
21 
22     qc.AssetUtil.get(url, callbackFunc, onerror);
23 };

View Code

將該腳本掛載"歡迎界面"節點，其中ServerUrl爲服務器路徑。

在結束界面咱們顯示兩個得分，分別是當前遊戲得分，另外一個是歷史最高分，這兩個數據咱們能夠從咱們玩家分數管理腳本中得到，在GameOver.js中加入以下代碼，該段代碼的主要功能是顯示當前分數及歷史最高分，若是當前分高於歷史最高分的話，則更新歷史最高分：

 1 /**
 2  * 初始化界面
 3  */
 4 GameOver.prototype.initUI = function() {
 5     if (qc.Koala.logic.me.score === qc.Koala.logic.me.best) {
 6         this.goalSign.visible = true;
 7 
 8         // 判斷當前分數是否超過歷史最高分數
 9         qc.Interactive.updateScorers(
10             qc.Koala.logic.me.rid,
11             qc.Koala.logic.me.token,
12             qc.Koala.logic.me.best,
13             function(data) {
14                 // 更新分數成功
15                 console.log("更新分數成功");
16             }
17         );
18     }
19     else {
20         this.goalSign.visible = false;
21     }
22 
23     var score = qc.Koala.logic.me.score
24     this.scoreLabel.text = score + '';
25 
26     this.bestLabel.text = '最高分：' + qc.Koala.logic.me.best;
27 
28     var percent = qc.Koala.logic.percent.getPercent(score);
29     this.percentLabel.text = '你擊敗了全球' + percent + '%的玩家';
30 };

View Code

而再玩一次功能的實現，咱們能夠派發一個qc.Koala.onStart事件，即遊戲從新開始，開始遊戲時，也是經過派發一個qc.Koala.onStart事件，並將結束界面隱藏（即將結束界面的visible設置爲false）實現比較簡單。在GameOver.js腳本中加入代碼：

1 /**
2  * 從新開始遊戲按鈕點擊後處理
3  */
4 GameOver.prototype.onRestartBtnClick = function() {
5     // 派發遊戲開始事件，並指定爲從新開始
6     qc.Koala.onStart.dispatch(true);
7     // 隱藏死亡界面
8     this.hide();
9 };

View Code

查詢排行榜的功能實現將在後續中詳細講述。

將上面的代碼整合到一塊兒，以下所示：

 1 var GameOver = qc.defineBehaviour('qc.Koala.ui.GameOver', qc.Behaviour, function() {
 2 }, {
 3     // 從新開始遊戲按鈕
 4     restartBtn : qc.Serializer.NODE,
 5     // 分享按鈕
 6     shareBtn : qc.Serializer.NODE,
 7     // 更逗遊戲按鈕
 8     moreBtn : qc.Serializer.NODE,
 9     // 排行榜按鈕
10     rankBtn : qc.Serializer.NODE,
11     // 記錄更新
12     goalSign : qc.Serializer.NODE,
13     // 當前分數文本
14     scoreLabel : qc.Serializer.NODE,
15     // 最高分文本
16     bestLabel : qc.Serializer.NODE,
17     // 世界排名百分比
18     percentLabel : qc.Serializer.NODE
19 });
20 
21 GameOver.prototype.awake = function() {
22     // 監聽遊戲結束事件
23     this.addListener(qc.Koala.onGameOver, this.show, this);
24 
25     // 監聽從新開始遊戲點擊事件
26     this.addListener(this.restartBtn.onClick, this.onRestartBtnClick, this);
27 
28     // 監聽分享按鈕點擊事件
29     this.addListener(this.shareBtn.onClick, function() {
30         qc.Koala.showShareMsg.dispatch();
31     }, this);
32 
33     // 監聽更多遊戲按鈕點擊事件
34     this.addListener(this.moreBtn.onClick, function() {
35         document.location.href = qc.Koala.logic.config.followHref;
36     }, this);
37 
38     // 監聽排行榜按鈕點擊事件
39     this.addListener(this.rankBtn.onClick, this.onRankBtnClick, this);
40 };
41 
42 /**
43  * 初始化界面
44  */
45 GameOver.prototype.initUI = function() {
46     if (qc.Koala.logic.me.score === qc.Koala.logic.me.best) {
47         this.goalSign.visible = true;
48 
49         // 判斷當前分數是否超過歷史最高分數
50         qc.Interactive.updateScorers(
51             qc.Koala.logic.me.rid,
52             qc.Koala.logic.me.token,
53             qc.Koala.logic.me.best,
54             function(data) {
55                 // 更新分數成功
56                 console.log("更新分數成功");
57             }
58         );
59     }
60     else {
61         this.goalSign.visible = false;
62     }
63 
64     var score = qc.Koala.logic.me.score
65     this.scoreLabel.text = score + '';
66 
67     this.bestLabel.text = '最高分：' + qc.Koala.logic.me.best;
68 
69     var percent = qc.Koala.logic.percent.getPercent(score);
70     this.percentLabel.text = '你擊敗了全球' + percent + '%的玩家';
71 };
72 
73 /**
74  * 從新開始遊戲按鈕點擊後處理
75  */
76 GameOver.prototype.onRestartBtnClick = function() {
77     // 派發遊戲開始事件，並指定爲從新開始
78     qc.Koala.onStart.dispatch(true);
79     // 隱藏死亡界面
80     this.hide();
81 };
82 
83 
84 /**
85  * 顯示界面
86  */
87 GameOver.prototype.show = function () {
88     this.initUI();
89     this.gameObject.visible = true;
90 };
91 
92 /**
93  * 隱藏界面
94  */
95 GameOver.prototype.hide = function () {
96     this.gameObject.visible = false;
97 };

View Code

將該腳本掛載到"遊戲結束"節點，並將節點拖入到對應屬性值上，以下圖：

8、排行榜界面

在遊戲結束的界面，咱們點擊排行榜，此時，咱們但願出現一個排行榜，將玩家的得分、玩家的微信頭像、玩家的排名及其它玩家的信息也顯示到排行榜界面上，效果圖以下：

排行榜界面的佈局比較簡單，與前面界面的佈局相似。這裏須要着重講一下，排行榜界面的每一條關於玩家的頭像、得分、排名及名字，咱們能夠作成一個預製，在顯示時，須要在排行榜上顯示多少玩家咱們就能夠產生多少預製。具體實現是：建立一個Empty Node節點取名rankingRow，依次建立玩家頭像信息（在作預製時，可隨意指定玩家頭像信息，遊戲中，咱們能夠經過微信獲取相應玩家的頭像信息並重置相應玩家的頭像），排行名次、玩家名稱及玩家得分，並將這些節點都掛載到"rankingRow"節點下，效果圖以下：

不一樣的玩家有不一樣的玩家信息如頭像、得分、名字等，爲了可以正常的顯示對應玩家的信息。在Scripts/ui文件夾下建立腳本：RankingRow.js，腳本代碼以下：

 1 var RankingRow = qc.defineBehaviour('qc.Koala.ui.RankingRow', qc.Behaviour, function() {
 2 
 3 }, {
 4     rankingLabel : qc.Serializer.NODE,
 5     headIcon : qc.Serializer.NODE,
 6     nameLabel : qc.Serializer.NODE,
 7     score : qc.Serializer.NODE
 8 });
 9 
10 // 1, 2, 3名對應的排名文本相關顏色
11 RankingRow.COLORMAP = {
12     '1' : { color : new qc.Color('#F9FB02'), stroke : new qc.Color('#860001') },
13     '2' : { color : new qc.Color('#C5C6C1'), stroke : new qc.Color('#3A3436') },
14     '3' : { color : new qc.Color('#FEB266'), stroke : new qc.Color('#591B02') }
15 };
16 
17 // 排行榜默認的排名文本相關顏色
18 RankingRow.DEFAULTCOLOR = { color : new qc.Color('#FFFFFF'), stroke : new qc.Color('#A00F0A') };
19 
20 RankingRow.prototype.init = function(row) {
21     // 獲取用戶數據，並設置用戶名和分數
22     this.nameLabel.text = row.name;
23     this.score.text = row.scorers + '';
24 
25     // 加載圖片資源
26     var url = row.headurl;
27     var headIcon = this.headIcon;
28     if (url)
29         this.game.assets.loadTexture(row.rid, url, function(texture) {
30             headIcon.texture = texture;
31         });
32 
33     // 獲取名次
34     var ranking = row.ranking || '100+',
35         rankLabel = ranking + '',
36         color = RankingRow.DEFAULTCOLOR;
37 
38     // 1,2,3名分別設置不一樣的排名文本顏色
39     if (ranking <= 3) {
40         // 獲取文本內容及文本相關顏色
41         rankLabel = 'NO.' + ranking;
42         color = RankingRow.COLORMAP[ranking];
43     }
44     else {
45         // 設置排名文本字體大小
46         this.rankingLabel.fontSize = 52;
47     }
48 
49     // 設置排名文本顏色及描邊顏色
50     this.rankingLabel.color = color.color;
51     this.rankingLabel.stroke = color.stroke;
52     this.rankingLabel.strokeThickness = 3;
53 
54     // 設置名次文本
55     this.rankingLabel.text = rankLabel;
56 };

View Code

將該腳本掛載到"rankingRow"節點，並將對應的節點拖入到對應的屬性值，以下圖：

如今就有一個問題了，若是咱們要顯示的玩家個數大於排行榜界面大小時，咱們將不能看到超出排行榜界面的玩家。此時，咱們可使用引擎提供的ScrollView用於解決此問題，具體作法是在"排行榜界面"節點下建立一個ScrollView節點，建立完成後咱們能夠看到以下信息：

其中Content屬性值的含義是當咱們建立玩家信息預製時，將玩家信息節點放到該節點下（圖中是將玩家信息節點放到node節點下）。由於咱們是要垂直滾動信息，因此在Vertical屬性值上打鉤，其它的屬性具體含義可查看《ScrollView》。

前面咱們已經把玩家預製作好了，可是怎麼讓它正確的顯示出來，怎麼去獲取玩家的頭像、分數、及排名等信息呢？咱們能夠這樣作，把玩家的數據都上傳至服務器並保存到數據庫中，須要獲取玩家的排名時，咱們能夠經過在前面的通訊接口類腳本Interactive.js中加入下面代碼：

 1 /**
 2  * 獲取排行榜
 3  * @param {string} rid - 用戶惟一標示
 4  * @param {string} token - 當前登錄用戶的臨時標示
 5  * @param {string} channel - 渠道
 6  * @param {func} callbackFunc - 回調函數
 7  */
 8 Interactive.getRank = function(rid, token, channel, callbackFunc, onerror) {
 9     var url = qc.interactive.serverUrl + "getRank03.php";
10     url += "?rid=" + rid;
11     url += "&token=" + token;
12     url += "&channel=" + channel;
13     url += "&gameName=" + qc.interactive.gameName;
14 
15     qc.AssetUtil.get(url, callbackFunc, onerror);
16 };

View Code

從而相應咱們須要建立一個腳本：Ranking.js，該腳本的主要功能是請求玩家數據並解析，代碼以下：

 1 var Ranking = qc.defineBehaviour('qc.Koala.ui.Ranking', qc.Behaviour, function() {
 2     this._rankingData = [];
 3 
 4     this._iconKeyList = [];
 5 }, {
 6     rankingList : qc.Serializer.NODE,
 7     rankingRowPrefab : qc.Serializer.PREFAB,
 8     ownRanking : qc.Serializer.NODE,
 9     waiting : qc.Serializer.NODE,
10     closeBtn : qc.Serializer.NODE
11 });
12 
13 Ranking.prototype.awake = function () {
14     this.addListener(qc.Koala.showRanking, this.show, this);
15 
16     this.addListener(this.closeBtn.onClick, this.close, this);
17 };
18 
19 Ranking.prototype.getRanking = function () {
20     // TODO 獲取排行榜數據，監聽到獲取成功，調用getRankingSuccess方法
21     var self = this;
22     var me = qc.Koala.logic.me;
23     qc.Interactive.getRank(me.rid, me.token, me.channel, function(data) {
24         data = JSON.parse(data);
25         var rank = 0;
26         var rankTop = data.rankTop;
27         for (var i = 0; i < rankTop.length; i++) {
28             var u = rankTop[i];
29             if (u.rid === me.rid) {
30                 rank = i + 1;
31             }
32             u.ranking = i + 1;
33         }
34         data.selfRank = data.userData[0];
35         if (data.selfRank)
36             data.selfRank.ranking = rank;
37 
38         self.getRankingSuccess(data);
39     });
40 };
41 
42 Ranking.prototype.getRankingSuccess = function (data) {
43     this.waiting.stop();
44     this.waiting.visible = false;
45 
46     // 初始化排行榜列表
47     var n = this.rankingList.getScript('qc.Koala.ui.RankData');
48     n.rankData = data.rankTop;
49     n.dispatchDataChange();
50 
51 
52     // 初始化個人排名
53     this.initOwnRanking(data.selfRank);
54 };
55 
56 Ranking.prototype.initOwnRanking = function (row) {
57     var s = this.ownRanking.getScript('qc.Koala.ui.RankingRow');
58     s.init(row);
59 
60     this.ownRanking.visible = true;
61 };
62 
63 Ranking.prototype.show = function () {
64     this.gameObject.visible = true;
65 
66     this.waiting.visible = true;
67     this.waiting.playAnimation('zhuan', null, true);
68 
69     this.getRanking();
70 };
71 
72 Ranking.prototype.close = function () {
73     this.gameObject.visible = false;
74     this._rankingData.length = 0;
75 
76     this._iconKeyList.forEach(function(icon) {
77         this.game.assets.unload(icon);
78     }, this);
79 
80     this._iconKeyList.length = 0;
81 
82     //this.rankingList.content.removeChildren();
83 
84     qc.Koala.onRankingClose.dispatch();
85 };