青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 9（登陆等待&结算界面）

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

/**
* 游戏结束结算界面
*/
var GameOver = qc.defineBehaviour('qc.JumpingBrick.GameOver', qc.Behaviour, function() {
var self = this;
JumpingBrick.gameOver = self;
}, {
highScoreShow : qc.Serializer.NODE,
lastScoreShow : qc.Serializer.NODE,
newHighShow : qc.Serializer.NODE,
descShow : qc.Serializer.NODE,
retryButton : qc.Serializer.NODE,
followButton : qc.Serializer.NODE,
annoButton : qc.Serializer.NODE,
shareButton : qc.Serializer.NODE,
shareGuide : qc.Serializer.NODE,
otherShareGuide : qc.Serializer.NODE,
shareText : qc.Serializer.NODE
});

// Awake is called when the script instance is being loaded.
GameOver.prototype.awake = function() {
var self = this;
self.retryButton.onClick.add(function() {
JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
}, self);
self.followButton.onClick.add(function() {
document.location.href =
'http://mp.weixin.qq.com/s?__biz=MzI5MTA3Nzc4Mw==&mid=400360588&idx=1&sn=090f19666259b1ab5d0a5c5d870de8ad&scene=0#rd';
}, self);
self.annoButton.onClick.add(function() {
JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Announcement);
}, self);
self.shareButton.onClick.add(function() {
if (JumpingBrick.data.isWeChat()) {
self.shareGuide.visible = true;
}
else {
self.otherShareGuide.visible = true;
}
}, self);
self.shareGuide.onClick.add(function() {
self.shareGuide.visible = false;
});
self.otherShareGuide.onClick.add(function() {
self.otherShareGuide.visible = false;
});

self.game.input.onKeyDown.add(function(keyCode) {
if (!self.gameObject.worldVisible) return;
if (keyCode === qc.Keyboard.ENTER || keyCode === qc.Keyboard.SPACEBAR) {
JumpingBrick.uiManager.switchStateTo(qc.JumpingBrick.UIManager.Game);
}
}, self);
};

GameOver.prototype.refresh = function() {
var self = this,
data = JumpingBrick.data;
self.shareGuide.visible = false;
self.annoButton.visible = data.loginType === qc.JumpingBrick.DataManager.WECHATLOGIN;
if (self.annoButton.visible) {
self.shareButton.setStretch(190, 0, 0, 16);
self.shareText.fontSize = 32;
}
else {
self.shareButton.setStretch(0, 0, 0, 0);
self.shareText.fontSize = 40;
}
self.highScoreShow.text = '最高分：' + data.highScore;
self.lastScoreShow.text = data.lastScore.toString();
self.newHighShow.visible = !!data.lastScore && data.newHigh;
self.descShow.text = self._makeDesc(data.lastScore);
};

GameOver.prototype._makeDesc = function(score) {
var percent = Math.min(30, score) * 2;
if (score > 30) {
percent += Math.min(20, score - 30);
}
if (score > 50) {
percent += Math.floor((score - 50) / 2);
}
percent = Math.min(99, percent);
return '你击败了全球' + parseInt(percent) + '%的玩家';
};

View Code

处理界面

和登录界面类似，都是以屏幕中心为锚点，进行布局。然后和脚本关联上。如下图所示：



游戏中，对于在微信中分享和在其他浏览器分享，期望有两套分享指引，如图所示:





下次将继续介绍“[b]排行榜界面”，敬请期待！[/b]

其他相关链接

开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了！

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

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