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

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

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

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

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

接上回（《跳跃的方块》Part 8）

（二）登陆等待界面

这个界面比较简单，创建一个alpha=0.6的全屏图片节点，然后居中显示“正在登录中，请稍候……”就可以了。

（三）结算界面

创建管理脚本

创建脚本：GameOver.js。用于更新界面数据，和管理按钮功能。 内容如下：

/**
 * 游戏结束结算界面
 */
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) + '%的玩家';
};

处理界面

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

 

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

  

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

其他相关链接

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

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

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