JS开发HTML5游戏《悠悠考拉》（二）

                                             （点击图片可进入试玩）

本篇文章为第二部分内容，这篇文章将具体介绍游戏的实现，这篇文章的的主要内容有：

3、创建工程与场景

4、玩家分数管理

5、开始界面

6、游戏界面

三、创建工程与场景

创建工程Koala和空的主场景main，设置如下：

游戏入口与游戏初始化

在Scripts文件夹下创建文件：Koala.js。代码如下：

var Koala = qc.Koala = {
    ui : {},
    logic : {},

    // 游戏对象
    game : null,

    // 游戏宽度
    GAMEWIDTH : 640

};

Koala.initLogic = function(excel, game) {

    // 设置游戏对象引用
    this.game = game;

    // 设置游戏帧率为60帧
    game.time.frameRate = 60;

};

此脚本定义了名字空间，用于记录全局数据。游戏入口中，记录了game的实例。并将帧率限定为60帧（默认在手机下为30帧），这句代码也可以不用写，我们可以在Project/Settings中设置，如下图：

四、玩家分数管理

创建脚本：Scripts/logic/Me.js，脚本代码如下：

var Me = qc.Koala.logic.Me = function() {
    // 当前关卡
    this.level = 1;

    // 当前分数
    this._score = 0;

    // 历史最高分
    this._best = 0;

    // 游戏是否结束
    this.isDie = false;

    // 游戏是否暂停
    this.paused = false;

    // 用户相关信息
    this.token = '';
    this.rid = '';
    this.userInfo = null;
    this.channel = '';
};

Me.prototype = {};
Me.prototype.constructor = Me;

Object.defineProperties(Me.prototype, {
    'score' : {
        get : function() { return this._score; },
        set : function(v) {
            if (this._score === v) return;
            this._score = v;

            this.best = v;

            qc.Koala.onScoreChange.dispatch(v);
        }
    },

    'best' : {
        get : function() { return this._best; },
        set : function(v) {
            if (this._best >= v) return;
            this._best = v;

            var key = 'best_' + this.rid;
            qc.Koala.game.storage.set(key, v);
        }
    }
});

Me.prototype.reset = function() {
    this.level = 1;
    this.score = 0;

    this.isDie = false;
    this.paused = false;
};

/**
 * 加分
 * @param  {number} score - 增量
 */
Me.prototype.addScore = function(score) {
    if (typeof score !== 'number' || score <= 0) return;

    this.score = this._score + score;
};

/**
 * 校正最高分
 */
Me.prototype.adjustBest = function () {
    if (!this.userInfo) return;

    var score = this.userInfo.scorers;
    this.readFromStorage();
    if (score > this._best)
        this.best = score;
};

/**
 * 读取记录
 */
Me.prototype.readFromStorage = function () {
    var key = 'best_' + this.rid;
    var best = qc.Koala.game.storage.get(key);
    if (best) this.best = best;
};

/**
 * 保存记录
 */
Me.prototype.saveToStorage = function () {
    qc.Koala.game.storage.save();
};

Me类维护了两个数据：score（当前玩家的分数）、best（玩家的历史最高分）

实例化Me类

打开Koala.js脚本，在initLogic方法中，加入代码：

Koala.initLogic = function(excel, game) {

    // 设置游戏对象引用
    this.game = game;

    // 设置游戏帧率为60帧
    game.time.frameRate = 60;

    // 游戏相关数据逻辑类
    this.logic.me = new qc.Koala.logic.Me();
}

五、开始界面

 在游戏还没开始时，我构思的登录界面应该是，有两个登录按钮，一个是用于快速登录按钮，另一个是提供微信登录的按钮，以及其它的一些界面元素，效果图如下：

现在我讲下该登录的界面实现。先说背景界面。

5.1背景界面

背景界面由蓝天、白云、山峰及树组成。

蓝天背景：首先在引擎编辑器的Hierarchy面板创建一个UIRoot节点取名"游戏背景"，在"游戏背景"节点下创建一个Image节点取名"蓝天背景"，我想让这个节点图片铺满整个屏幕，所以我设置该节点的属性如下：

白云区域：游戏运行时，为了让游戏更逼真一点，就想让云在天空中一直漂浮，在设计中使用三朵云让它们循环移动。为了使游戏能够在各种不同分辨率的屏幕下能正常显示，我是这么做的，首先是在"游戏背景"节点下创建一个Empty Node取名"白云区域"，向上对齐左右拉伸，属性值设置如下：

将三朵云挂载到"白云区域"节点下，由于方法类似，我只以其中的一朵云作为讲解，首先在"白云区域"节点下创建一个Image取名为"白云1"，在运行时，三朵云循环移动我采用引擎提供的TweenPosition动画，挂载完成后如下所示：

TweenPosition动画的属性From值为从哪个位置开始，To值为到哪个位置，play Style设置为Loop（循环移动），Duration持续的时间为9秒，更多Tween动画可查看官方文档《Tween动画》。

      在讲山峰区域之前，我先要讲下预制：在场景中可以很容易创建游戏对象并设置属性，但当有大量相同的游戏对象需要在场景中复用就成了问题，但该引擎提供了预制类型资源，可以完整保存游戏对象属性、组件及其子孙对象。预制相当于模板，可用于在场景中创建新出的游戏对象实例，达到复用的效果。在游戏中，我在"山峰区域"节点下需要三个同样的节点，故使用预制，在后续讲的树区域也需要用到预制。

山峰区域：在"山峰区域"节点下创建一个Image节点取名"mountain"，需要把山峰节点放到屏幕的左下位置，将该节点拖入到"prefab"文件夹，即完成预制的制作，在游戏中，三个山峰是一个接连一个，为的是在游戏场景移动时产生连贯的效果，在代码中已经设置了山与山的距离，第一个山峰节点的属性值设置如下：

树区域：树预制的制作与山峰预制一样，这里就不一一讲述了。

此时，我们已经把背景界面搭建起来了，可是在运行时，我们需要云移动、产生山峰预制、树预制，这些就交给代码来执行吧。在Scripts/ui文件下创建脚本：Background.js，代码如下：

var Background = qc.defineBehaviour('qc.Koala.ui.Background', qc.Behaviour, function() {
    // 动画播放距离
    this.tweenDistance = 0;

    // 山与山之间的距离
    this.mountainDistance = 635;

    // 树与树之间的距离
    this.treeDistance = 340;

    this.mountains = [];

    this.trees = [];

    this.treeIcons = [ 'tree_1.bin', 'tree_2.bin', 'tree_3.bin' ];
}, {
    // 云列表
    clouds : qc.Serializer.NODES,
    // 山峰区域
    mountainRect : qc.Serializer.NODE,
    // 山峰预制
    mountainPrefab : qc.Serializer.PREFAB,
    // 树区域
    treeRect : qc.Serializer.NODE,
    // 树预制
    treePrefab : qc.Serializer.PREFAB
});

Background.prototype.awake = function() {

    this.addListener(this.game.world.onSizeChange, function() {
        this.initMountain();
        this.initTree();
    }, this);

    this.game.timer.add(1000, this.init, this);
};

Background.prototype.init = function () {
    this.clouds.forEach(function(cloud) {
        var s = cloud.getScript('qc.TweenPosition');
        s.from.setTo(cloud.parent.width, s.from.y);
        s.resetToBeginning();
        s.play();
        cloud.visible = true;
    }, this);

    // 初始化山
    this.initMountain();

    // 初始化树
    this.initTree();
};

/**
 * 初始化山
 * @method qc.Koala.ui.Background#initMountain
 */
Background.prototype.initMountain = function () {
    var mountainCount = Math.ceil(this.gameObject.width / this.mountainDistance) + 1,
        count = mountainCount - this.mountains.length;
    if (count <= 0) return;
    this._createMountain(count);
};

/**
 * 创建山
 * @method createMountain
 * @param  {number} count - 要创建的个数
 */
Background.prototype._createMountain = function (count) {
    while (count--) {
        var m = this.game.add.clone(this.mountainPrefab, this.mountainRect);
        m.x = this.mountainDistance * this.mountains.length;
        this.mountains.push(m);
    }
};

/**
 * 初始化树
 * @method qc.Koala.ui.Background#initTree
 */
Background.prototype.initTree = function () {
    var treeCount = Math.ceil(this.gameObject.width / this.treeDistance) + 1,
        count = treeCount - this.trees.length;
    if (count <= 0) return;
    this._createTree(count);
};

/**
 * 创建树
 * @method qc.Koala.ui.Background#createTree
 * @param  {number}   count - 创建个数
 */
Background.prototype._createTree = function (count) {
    while (count--) {
        var t = this.game.add.clone(this.treePrefab, this.treeRect);
        t.x = this.treeDistance * this.trees.length;
        this.trees.push(t);

        var icon = this.treeIcons[qc.Koala.Math.random(0, this.treeIcons.length - 1)];
        this.game.assets.load(
            'treeIcon_' + this.trees.length,
            'Assets/texture/' + icon,
            (function(texture) {
                this.texture = texture;
            }).bind(t)
        );
        t.height += qc.Koala.Math.random(-10, 40);
    }
};

将该脚本挂载到"游戏背景"节点上，并将对应的节点拖入到对应的属性值，如下图所示：

至此，我们已经把背景界面弄好了，但我想把登录界面与背景界面分离出来，故我在Hierarchy面板另创建一个UIRoot取名为"界面"，将登录界面节点挂载到"界面"节点。现在我们需要弄按钮显示及其它的一些界面显示，除去背景界面，效果图如下：

5.2欢迎界面

首先在"界面"节点下创建一个Empty Node取名为"欢迎界面"，目的是将上图中显示的界面元素都挂载到该节点下，"欢迎界面"的属性设置如下：

左边柱子：在游戏中，使用了大量柱子对象，故我们可以把柱子做成预制，前面已经讲述了如何制作预制，这里就不一一赘述。需要说明的是，柱子由柱子躯干与柱头所组成，这样做的目的是，在游戏中，我们根据等级相应的改变柱子的粗细。将做好的柱子预制拖入到"欢迎界面"节点下取名"左边柱子"，柱子是倾斜的，我们可以设置它的Rotation值，节点属性值设置如下：

      其余的界面元素创建类似，就不一一介绍了，更多的界面布局也可以参考《界面布局》。此时，我们的开始界面已经完成了，可是当我们点击快速登录、或者微信登录按钮时，我们需要做相应的操作。这些就交给代码做吧！创建脚本Welcome.js，该脚本主要功能是监听按钮是否按下，如微信登录按钮按下时，则做微信登录处理，代码如下，需要说明的是代码中有微信API函数，暂时不用去管它，后续会讲述。

var Welcome = qc.defineBehaviour('qc.Koala.ui.Welcome', qc.Behaviour, function() {
}, {
    // 快速登录按钮
    quickBtn : qc.Serializer.NODE,
    // 微信登录按钮
    wechatBtn : qc.Serializer.NODE,
    // 配置文件
    config : qc.Serializer.EXCELASSET,
    // 登录提示区域
    loginMask : qc.Serializer.NODE
});

Welcome.prototype.awake = function() {
    // 初始化逻辑脚本
    qc.Koala.initLogic(this.config, this.game);

    // 监听快速登录事件
    this.addListener(this.quickBtn.onClick, this._onStart, this);

    // 监听微信登录按钮点击事件
    this.addListener(this.wechatBtn.onClick, this._wechatLogin, this);

    // 监听正在登录中事件
    this.addListener(qc.Koala.onLogining, this._logining, this);

    // 监听登录失败事件
    this.addListener(qc.Koala.onLoginFail, this._loginFail, this);

    // 监听登录成功事件
    this.addListener(qc.Koala.onLogin, this.hide, this);

    // 获取微信插件对象
    var wx = this.getScript('qc.QcWeChat');

    // 设置快速登录按钮的可见情况
    this.quickBtn.visible = !wx.isWeChat();

    // 重新布局按钮
    this.quickBtn.parent.getScript('qc.TableLayout').rebuildTable();

    // 监听开始登录事件
    this.addListener(wx.onStartLogin, function() {
        qc.Koala.onLogining.dispatch();
    }, this);

    // 设置微信登陆结果监听
    this.addListener(wx.onLogin, function(flag) {
        if (flag === "success") {
            this._loginSuccess();
        }
        else {
            // 派发登录失败事件
            qc.Koala.onLoginFail.dispatch();
        }
    }, this);

};

Welcome.prototype._onStart = function() {
    qc.Koala.onStart.dispatch();
    this.hide();
};

Welcome.prototype._wechatLogin = function () {
    //微信登陆
    this.getScript('qc.QcWeChat').login();
};

/**
 * 微信登录成功回调
 */
Welcome.prototype._loginSuccess = function () {
    var wx = this.getScript('qc.QcWeChat');
    if (wx.user) {
        qc.Koala.logic.me.token = wx.user.token;
        qc.Koala.logic.me.rid = wx.user.rid;
        qc.Koala.logic.me.userInfo = wx.user;
    }
    // 设置为微信渠道
    qc.Koala.logic.me.channel = "weixin";

    // 开始游戏
    this._onStart();

    // 校正最高分
    qc.Koala.logic.me.adjustBest();
};

Welcome.prototype._logining = function () {
    this.loginMask.visible = true;
};

Welcome.prototype._loginFail = function () {
    this.loginMask.visible = false;
};

Welcome.prototype.hide = function() {
    this.gameObject.visible = false;
};

把该脚本挂载到"欢迎界面"节点上，并将对应的节点拖入到对应的属性上，需要说明的是，Config属性值为游戏数据配置表，暂时我们可以不去管它，在后续我们配置的Excel表，需要拖入到该属性值中，如下图所示：

需要说明的是该游戏在手机端运行时，有"微信登录"功能，故需要创建微信脚本（目前引擎已经有微信插件，可直接挂载），在Scripts/wx文件夹下创建两个脚本分别是QcWx.js与QcWeChat.js，其中QcWx.js为微信接口类可用于微信分享、录音、扫一扫等功能。代码如下:

// version 03.2
var QCWX = qc.QCWX = function() {
    var self = this;

    self.title = '';
    self.imgUrl = '';
    self.desc = '';
    self.url = '';
    self.sign = null;
    self.ready = false;
    self.debug = false;
};
QCWX.prototype = {};
QCWX.prototype.constructor = QCWX;

/**
 * 初始化微信接口
 */
QCWX.prototype.init = function(sign, callback) {
    var self = this;
    self.sign = sign;

    // 不支持微信接口？
    if (!window.wx) {
        return;
    }
    wx.config({
        debug: self.debug,
        appId: sign.appId,
        timestamp: sign.timeStamp,
        nonceStr: sign.nonceStr,
        signature: sign.signature,
        jsApiList: [
            'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone', 'onMenuShareAppMessage', 'onMenuShareWeibo',
            'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd',
            'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage',
            'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'closeWindow', 'scanQRCode'
        ]
    });

    wx.ready(function() {
        // 标记下已经初始化完毕了
        self.ready = true;
        if (callback) callback();
    });
};

/**
 * 分享接口
 */
QCWX.prototype.share = function(shareSignal) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }

    var body = {
        title: self.title,
        desc: "",
        trigger: function() {
            if (!shareSignal) return;
            shareSignal.dispatch(body);
            body.link = qc.qcWeChat.shareLink + qc.qcWeChat.shareDir;
        }
    };

    //alert(JSON.stringify(body));

    // 分享到朋友圈
    wx.onMenuShareTimeline(body);

    // 分享给朋友
    wx.onMenuShareAppMessage(body);

    // 分享到QQ
    wx.onMenuShareQQ(body);

    // 分享到腾讯微博
    wx.onMenuShareWeibo(body);

    // 分享到QQ空间
    wx.onMenuShareQZone(body);
};

/**
 * 拍照或从手机相册中选图
 * @param {number} count - 图片的数量
 */
QCWX.prototype.chooseImage = function(count, sizeType, sourceType, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }

    if (!sizeType) sizeType = ['original', 'compressed'];
    if (!sourceType) sourceType = ['album', 'camera'];

    wx.chooseImage({
        count: count,
        sizeType: sizeType,
        sourceType: sourceType,
        success: function(res) {
            if (callback) callback(res.localIds);
        }
    });
};

/**
 * 预览图片
 */
QCWX.prototype.previewImage = function(current, urls) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }

    current = current || '';
    urls = urls || [];
    wx.previewImage({
        current: current,
        urls: urls
    });
};

/**
 * 上传图片，有效期为3天
 */
QCWX.prototype.uploadImage = function(localId, isShowProgressTips, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.uploadImage({
        localId: localId,
        isShowProgressTips: isShowProgressTips ? 1 : 0,
        success: function(res) {
            if (callback) callback(res.serverId);
        }
    });
};

/**
 * 下载图片
 */
QCWX.prototype.downloadImage = function(serverId, isShowProgressTips, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.downloadImage({
        serverId: serverId,
        isShowProgressTips: isShowProgressTips ? 1 : 0,
        success: function(res) {
            if (callback) callback(res.localId);
        }
    });
};

/**
 * 开始录音
 */
QCWX.prototype.startRecord = function() {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.startRecord();
};

/**
 * 停止录音
 */
QCWX.prototype.stopRecord = function(callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.stopRecord({
        success: function(res) {
            if (callback) callback(res.localId);
        }
    });
};

/**
 * 监听录音自动停止
 */
QCWX.prototype.onVoiceRecordEnd = function(callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.onVoiceRecordEnd({
        complete: function(res) {
            if (callback) callback(res.localId);
        }
    });
};

/**
 * 播放语音
 */
QCWX.prototype.playVoice = function(localId) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.playVoice({
        localId: localId
    });
};

/**
 * 暂停播放语音
 */
QCWX.prototype.pauseVoice = function(localId) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.pauseVoice({
        localId: localId
    });
};

/**
 * 暂停播放语音
 */
QCWX.prototype.stopVoice = function(localId) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.stopVoice({
        localId: localId
    });
};

/**
 * 监听语音播放完毕
 */
QCWX.prototype.onVoicePlayEnd = function(callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.onVoicePlayEnd({
        success: function (res) {
            if (callback) callback(res.localId);
        }
    });
};

/**
 * 上传语音，有效期为3天
 */
QCWX.prototype.uploadVoice = function(localId, isShowProgressTips, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.uploadVoice({
        localId: localId,
        isShowProgressTips: isShowProgressTips ? 1 : 0,
        success: function(res) {
            if (callback) callback(res.serverId);
        }
    });
};

/**
 * 下载语音
 */
QCWX.prototype.downloadVoice = function(serverId, isShowProgressTips, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.downloadVoice({
        serverId: serverId,
        isShowProgressTips: isShowProgressTips ? 1 : 0,
        success: function(res) {
            if (callback) callback(res.localId);
        }
    });
};

/**
 * 语音识别
 */
QCWX.prototype.translateVoice = function(localId, isShowProgressTips, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.translateVoice({
        localId: localId,
        isShowProgressTips: isShowProgressTips ? 1 : 0,
        success: function(res) {
            if (callback) callback(res.translateResult);
        }
    });
};

/**
 * 获取网络状态：2g 3g 4g wifi
 */
QCWX.prototype.getNetworkType = function(callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.getNetworkType({
        success: function(res) {
            if (callback) callback(res.networkType);
        }
    });
};

/**
 * 查看位置
 */
QCWX.prototype.openLocation = function(lat, lng, name, address, scale, infoUrl) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    lat = lat || 0;
    lng = lng || 0;
    scale = scale || 1;
    name = name || '';
    address = address || '';
    infoUrl = infoUrl || '';
    wx.openLocation({
        latitude: lat,
        longitude: lng,
        name: name,
        address: address,
        scale: scale,
        infoUrl: infoUrl
    });
};

/**
 * 获取当前位置
 * @param {string} type - 'wgs84'(默认)，'gcj02'(火星坐标)
 * 返回的结果中，包含如下信息：
 *   latitude
 *   longitude
 *   speed
 *   accuracy
 */
QCWX.prototype.getLocation = function(type, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    type = type || 'wgs84';
    wx.getLocation({
        type: type,
        success: callback
    });
};

/**
 * 微信扫一扫
 */
QCWX.prototype.scanQRCode = function(needResult, callback) {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.scanQRCode({
        needResult: needResult,
        scanType: ["qrCode","barCode"],
        success: function(res) {
            if (callback) callback(res.resultStr);
        }
    });
};

/**
 * 关闭当前网页
 */
QCWX.prototype.closeWindow = function() {
    var self = this;
    if (!self.ready) {
        console.error('尚未初始化完成');
        return;
    }
    wx.closeWindow();
};

/**
 * 微信支付
 */
QCWX.prototype.chooseWXPay = function() {
    // 后续增加
};

而QcWeChat.js脚本的主要功能是微信登录、配置游戏服务器存放的域名、获取登录用户的信息等，脚本代码如下：

var QcWeChat = qc.defineBehaviour('qc.QcWeChat', qc.Behaviour, function() {
    var self = this;

    qc.qcWeChat = this;

    /**
     * @property {string} shareAppId - 用于分享的微信公众号的appid
     */
    self.shareAppId = '';

    /**
     * @property {string} gameName - 游戏名字
     */
    self.gameName = '';

    /**
     * @property {string} wxAppId - 用于登录的微信公众号的appid
     */
    self.wxAppId = '';

    /**
     * @property {string} webAppId - 网站应用的appid
     */
    self.webAppId = '';

    /**
     * @property {string} domain
     *  域名（存放php文件的域名地址，例如：http://engine.zuoyouxi.com/wx/）
     *  域名最后面以 '/' 结束
     */
    self.domain = '';

    /**
     * @property {string} gameDomain
     *   游戏服务器存放的域名（即放game_client文件的域名地址）
     *   例如： http://engine.zuoyouxi.com/teris/
     */
    self.gameDomain = '';

    /**
     * @property {string} extendParams
     *   微信登录时的扩展参数，格式为json字符串，可用于传递一些自定义信息
     *   例如： {"game":1}
     */
    self.extendParams = '';

    /**
     * @property {boolean} redirectCurrentUrl
     *   = true：使用游戏页直接换取code。当在微信公众号后台配置了游戏域名（gameDomain）为回调地址时采用
     *   = false：使用this.domain + 'code.php'作为接收code的回调页，之后再跳转到本页面。当微信公众号后台配置的是domain时采用
     *            这种情况下，游戏的域名和公众号后台配置的可以是不一样的，并且多个游戏可以共用一个公众号的信息。缺点是浏览器会有两次跳转
     */
    self.redirectCurrentUrl = true;

    /**
     * @property {boolean} debug - 微信接口的debug是否打开，在发布时一定要关闭哦
     */
    self.debug = false;

    /**
     * 微信分享的接口实例
     */
    self.wx = new qc.QCWX();
    window.QcWx = self.wx;

    /**
     * @property {qc.Signal} onInitWx - 初始化微信成功
     */
    self.onInitWx = new qc.Signal();

    /**
     * @property {qc.Signal} onStartLogin - 开始登录的事件
     */
    self.onStartLogin = new qc.Signal();

    /**
     * @property {qc.Signal} onLogin - 登录成功/失败的事件
     */
    self.onLogin = new qc.Signal();

    /**
     * @property {qc.Signal} sessionExpired - 会话过期的事件
     */
    self.sessionExpired = new qc.Signal();

    /**
     * @type {qc.Signal} onShare - 用户点击分享的事件
     */
    self.onShare = new qc.Signal();

    /**
     * @property {object} user - 微信的用户信息
     * @readonly
     */
    self.user = null;

    /**
     * @property {string} status - 当前的登录状态
     *   loggingIn - 登录中
     *   loggedIn - 已登录
     *   expired - 会话过期
     */
    self.status = '';

    /**
     * @property {string} shareLink - 分享链接地址
     */
    self.shareLink = "";

    /**
     * @property {object} _shareBody - 分享的内容
     */
    self._shareBody = null;

    /**
     * @property {boolean} shareSignSuccess - 获取分享签名状态
     */
    self.shareSignSuccess = false;

    /**
     * @property {string} shareDir - 分享链接的目录
     */
    self.shareDir = "";

}, {
    gameName: qc.Serializer.STRING,
    shareAppId: qc.Serializer.STRING,
    wxAppId: qc.Serializer.STRING,
    webAppId: qc.Serializer.STRING,
    domain: qc.Serializer.STRING,
    gameDomain: qc.Serializer.STRING,
    shareDir: qc.Serializer.STRING,
    redirectCurrentUrl: qc.Serializer.BOOLEAN,
    debug: qc.Serializer.BOOLEAN
});
//QcWeChat.__menu = 'Plugins/QcWeChat';

// 初始化处理
QcWeChat.prototype.awake = function() {
    // 请求签名信息
    var self = this;
    if (!self.domain) return;

    var url = self.domain + 'index.php?cmd=sign&appid=' + self.shareAppId + '&url=' + encodeURIComponent(window.location.href);
    self.game.log.trace('开始请求微信分享的签名信息：{0}', url);
    qc.AssetUtil.get(url, function(r) {
        self.game.log.trace('获取签名成功：' + r);
        self.parseSign(r);
    }, function() {
        console.error('获取签名信息失败');
    });

    // 加载js库
    self.loadWXLib();

    // 获取code
    self._code = this.getParam('code');

    self._state = this.getParam('state');
    if (self._code && (self.isWeChat() || this.game.device.desktop)) {
        // 请求换取token，如果失败需要重新请求登录
        self.status = 'loggingIn';
        self.game.timer.add(1, function() {
            self.requestToken(self._code);
        });
    }
};

// 析构的处理
QcWeChat.prototype.onDestroy = function() {
    if (this.timer) {
        this.game.timer.remove(this.timer);
    }
};

/**
 * 请求微信登录
 */
QcWeChat.prototype.login = function() {
    //if (this.isWeChat()) {
    if (!this.game.device.desktop) {
        this.loginInWX();
        return;
    }
    this.loginInWeb();
};

/**
 * 调用微信授权
 * @private
 */
QcWeChat.prototype._gotoAuth = function() {
    var url = '',
        redirectUri = window.location.origin + window.location.pathname;
    if (this.redirectCurrentUrl) {
        url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            "appid=" + this.wxAppId +
            "&redirect_uri=" + encodeURIComponent(redirectUri) +
            "&response_type=code&scope=snsapi_userinfo&state=weixin#wechat_redirect";
    }
    else {
        // 跳转到code.php页面，再跳转回本页面
        url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            "appid=" + this.wxAppId +
            "&redirect_uri=" + encodeURIComponent(this.domain + 'code.php') +
            "&response_type=code&scope=snsapi_userinfo" +
            "&state=" + encodeURIComponent(redirectUri) +
            "#wechat_redirect";
    }
    window.location.href = url;
}
// 微信内登陆
QcWeChat.prototype.loginInWX = function() {
    // 如果在微信浏览器上
    if (this.isWeChat()) {
        this.requestToken(this._code);
        return;
    }
    this._gotoAuth();
};

// 微信外登录
QcWeChat.prototype.loginInWeb = function() {
    var url = '',
        redirectUri = window.location.origin + window.location.pathname;
    if (this.redirectCurrentUrl) {
        url = "https://open.weixin.qq.com/connect/qrconnect?" +
            "appid=" + this.webAppId +
            "&redirect_uri=" + encodeURIComponent(redirectUri) +
            "&response_type=code&scope=snsapi_login&state=pc#wechat_redirect";
    }
    else {
        // 跳转到code.php页面，再跳转回本页面
        url = "https://open.weixin.qq.com/connect/qrconnect?" +
            "appid=" + this.webAppId +
            "&redirect_uri=" + encodeURIComponent(this.domain + 'code.php') +
            "&response_type=code&scope=snsapi_login" +
            "&state=" + encodeURIComponent(redirectUri) +
            "#wechat_redirect";
    }
    window.location.href = url;
};

// 解析签名信息
QcWeChat.prototype.parseSign = function(r) {
    var self = this;
    var sign = JSON.parse(r);
    self.timeStamp = sign.timestamp;
    self.nonceStr = sign.nonceStr;
    self.signature = sign.signature;
    self.shareLink = sign.shareLink;
    //window.QcWx.shareLink = self.shareLink;

    if (!self.jweixin) {
        // 微信接口尚未载入，延迟继续检测
        self.game.timer.add(500, function() {
            self.parseSign(r);
        });
        return;
    }

    // 调用微信的初始化接口
    self.game.log.trace('开始初始化微信接口');
    self.wx.debug = self.debug;
    self.wx.init({
        timeStamp: self.timeStamp,
        nonceStr: self.nonceStr,
        signature: self.signature,
        appId: self.shareAppId
    }, function() {
        self.game.log.trace('初始化微信接口完成。');
        self.shareSignSuccess = true;
        self.wx.share(self.onShare);
        self.onInitWx.dispatch();
    });
};

// 动态加载wx的库
QcWeChat.prototype.loadWXLib = function() {
    var self = this;
    var src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js";
    var js = document.createElement('script');
    js.onerror = function() {
        console.error('加载jweixin库失败');
    };
    js.onload = function() {
        // 标记加载完成了
        self.game.log.trace('微信接口下载完成');
        self.jweixin = true;
    };
    js.setAttribute('src', src);
    js.setAttribute('type', 'text/javascript');
    document.getElementsByTagName('head')[0].appendChild(js);
};

// 当前是否运行在微信客户端
QcWeChat.prototype.isWeChat = function() {
    var ua = window.navigator.userAgent.toLowerCase();
    return ua.match(/MicroMessenger/i) == 'micromessenger';
};

// 获取url的参数
QcWeChat.prototype.getParam = function(key) {
    var r = new RegExp("(\?|#|&)" + key + "=([^&#]*)(&|#|$)");
    var m = location.href.match(r);
    return decodeURIComponent(!m ? "" : m[2]);
};

// 使用code换取token
QcWeChat.prototype.requestToken = function(code) {
    //this.gameName = "Koala";
    var self = this,
        url = self.gameDomain + "login03.php?code=" + code + "&gameName=" + self.gameName;
    //if (!self.isWeChat()) url += "&web=1";
    if (this.game.device.desktop) url += "&web=1";

    self.onStartLogin.dispatch();
    qc.AssetUtil.get(url, function(r) {
        var data = JSON.parse(r);
        if (data.error) {
            if (data.errorCode && data.errorCode == 301) {
                // 跳转到授权页面
                if (self.game.device.desktop) {
                    self.loginInWeb();
                    return;
                }
                self._gotoAuth();
                return;
            }

            // 换取token失败，重新请求登录
            self.game.log.error('换取token失败，重新请求登录');
            // 登陆失败 不重新登陆
            //self.login();
            self.onLogin.dispatch("fail");
            return;
        }

        // 登录成功了，抛出事件
        self.game.log.trace('登录成功：{0}', r);
        self.status = 'loggedIn';
        self.user = data;
        self.onLogin.dispatch("success");

        // 定期刷新access_token，并保持会话
        self.timer = self.game.timer.loop(5 * 60000, self.refreshToken, self);
    }, function(r) {
        self.onLogin.dispatch("fail");
    });
};

// 刷新token
QcWeChat.prototype.refreshToken = function() {
    var self = this,
        url = self.gameDomain + "refresh.php";
    //if (!self.isWeChat()) url += "?web=1";
    if (this.game.device.desktop) url += "?web=1";
    qc.AssetUtil.get(url, function(r) {
        var data = JSON.parse(r);
        if (data.error) {
            // 刷新token失败了，抛出事件
            self.status = 'expired';
            self.game.timer.remove(self.timer);
            delete self.timer;
            self.sessionExpired.dispatch();
            return;
        }

        // 成功了，啥也不用处理
        self.game.log.trace('刷新Access Token成功。');
    });
};

将该脚本挂载到"欢迎界面"节点，挂载完成后如下图所示：

其中Share App Id为用于分享的微信公众号的appid，Wx App Id 为用于登录的微信公众号的appid，Web App Id为网站应用的appid，Domain为域名，Game Domain为游戏服务器存放的域名，更多详细信息可查看《微信》。

六、游戏界面

在前面我们已经搭建好了开始界面，接下来我们需要进入游戏界面。游戏界面我是这样构思的，游戏运行时，在登录界面（即欢迎界面），游戏界面是不显示的，点击"快速登录"按钮才让游戏界面显示出来，此时相应的将开始界面隐藏。这个比较好实现，只要设置对象的visible属性即可完成。首先我们来介绍游戏界面的布局，游戏界面的效果图如下：

为了与"游戏场景"节点及"登录界面（欢迎界面）"节点分离出来，我又新创建了一个UIRoot节点取名"游戏场景"，"游戏场景"节点下的子节点如下所示：

在"游戏场景"节点下创建node/相机，node节点与相机节点（node与相机节点都是Empty Node）的节点属性值设置如下：

下图分别为node节点与相机节点的属性值：

               

这样做的目的是，悠悠考拉是一个无尽的虚拟世界，世界的宽度不限。在游戏中，为了让考拉一直处于屏幕中，即屏幕一直跟随考拉，此时采用相机。在游戏界面的效果图我们可以看到有柱子、秋千、考拉、暂停按钮及得分显示区域。下面一一介绍：

6.1 柱子

柱子：根据策划要求，在悠悠考拉游戏中，有关卡概念，在不同的关卡，柱子的粗细是不同的，并且考拉跳的柱子（跳台）高度也不尽相同，而且考拉跳到柱子上时有个得分区域，降落离中心区域越近就得分越高。如果将这些数据配置在程序中的话，将不便于修改及查看，故我将这些数据配置在Excel表格中，需要说明的是，我在Excel表格中配置了两张sheet表，分别为config、pillar表，其中config中的配置的柱子数据为默认数据，pillar表中的数据为关卡数据会根据config中默认数据作相应改变，具体如表所示：

config表：

表中#为注释，其余数据按字面意思即可知道，需要说明的是pillarTopMin是指三根柱子的父亲节点（游戏中我使用三根柱子循环移动），pillarTopMax是指跳台的高度（即考拉降落的柱子），pillarHeadIcon是指柱帽默认图片资源名称。

pillar表：

其中minLv与maxLv为关卡等级，看字面意思应该可以理解。thickness为柱子粗细百分比，在游戏中，是这样计算的，比如关卡等级为3级，则柱子的宽度为0.75*200（config表中的柱子默认宽度），而top表示柱子上边距百分比，如关卡等级为3级，则跳台的高度为1*510（config表中的跳台默认高度），而headIcon为柱帽对应柱子粗细的图片资源名称，scoreRect为得分区域。

配置了这些数据后，我们需要将这些数据利用代码读取出来并存放到数组中，以便我们在游戏中读取。首先解析config sheet表数据，在Scripts/logic文件夹下创建脚本：Config.js，代码如下：

var Config = qc.Koala.logic.Config = function(excel) {
    if (!excel) {
        excel = qc.Koala.game.assets.load('config');
    }

    var sheet = excel.findSheet('config');
    if (sheet) {
        sheet.rows.forEach(function(row) {
            var val = row.value;
            if (row.type === 'number') 
                val *= 1;
            this[row.key] = val;
        }, this);
    }
};

然后我们也需要解析pillar sheet表数据，在Scripts/login文件夹下创建脚本：Pillar.js，代码如下：

var PillarInfo = function(row) {
    this.id = row.id * 1;
    this.minLv = row.minLv * 1;
    this.maxLv = row.maxLv * 1 || Infinity;
    this.thickness = row.thickness * 1;
    this.top = row.top * 1;
    this.headIcon = row.headIcon;
    this.scoreRect = row.scoreRect * 1 || Infinity;
};

var Pillar = qc.Koala.logic.Pillar = function(excel) {
    // 柱子信息列表
    this.infoList = [];

    // 关卡与柱子粗细值对应表
    this.infoMap = {};

    if (!excel) {
        excel = qc.Koala.game.assets.load('config');
    }

    var sheet = excel.findSheet('pillar');
    if (sheet) {
        sheet.rows.forEach(function(row) {
            this.infoList.push(new PillarInfo(row));
        }, this);
    }
};

将Pillar类与Config类实例化，在入口脚本Koala.js的Koala.initLogic方法中加入代码，如下：

Koala.initLogic = function(excel, game) {

    // 设置游戏对象引用
    this.game = game;

    // 设置游戏帧率为60帧
    game.time.frameRate = 60;

    // 初始化系统配置
    this.logic.config = new qc.Koala.logic.Config(excel);

    // 游戏相关数据逻辑类
    this.logic.me = new qc.Koala.logic.Me();

    // 柱子相关逻辑类
    this.logic.pillar = new qc.Koala.logic.Pillar(excel);

};

根据策划要求，希望在游戏中能够模拟现实世界，考拉在荡秋千的时候会有风速，风速对考拉的速度是会有影响的，而且随着关卡的不同其风速也不相同，故我们也可以将这些数据配置到Excel表中，如下：

表中的数据不难理解，由表中配置的数据我们可知，在关卡等级1-3级是没有风速的，其它等级风速则是随着关卡等级的越大相应增大。此时我们也需要创建脚本用于解析风速（wind sheet表），在Scripts/logic文件夹下创建脚本：Wind.js，代码如下：

var WindInfo = function(row) {
    this.id = row.id * 1;
    this.minLv = row.minLv * 1;
    this.maxLv = row.maxLv * 1 || Infinity;
    this.minWind = row.minWind * 1;
    this.maxWind = row.maxWind * 1;
};

var Wind = qc.Koala.logic.Wind = function(excel) {
    // 风力信息列表
    this.infoList = [];

    // 风力范围速查表
    this.infoMap = {};

    if (!excel) {
        excel = qc.Koala.game.assets.load('config');
    }

    var sheet = excel.findSheet('wind');
    if (sheet) {
        sheet.rows.forEach(function(row) {
            this.infoList.push(new WindInfo(row));
        }, this);
    }
};

同样地，我们也需要在入口脚本Koala.js的Koala.initLogic方法中加入代码，将Wind类实例化，代码如下：

Koala.initLogic = function(excel, game) {

    // 设置游戏对象引用
    this.game = game;

    // 设置游戏帧率为60帧
    game.time.frameRate = 60;

    // 初始化系统配置
    this.logic.config = new qc.Koala.logic.Config(excel);

    // 游戏相关数据逻辑类
    this.logic.me = new qc.Koala.logic.Me();

    // 柱子相关逻辑类
    this.logic.pillar = new qc.Koala.logic.Pillar(excel);

    // 风力值逻辑类
    this.logic.wind = new qc.Koala.logic.Wind(excel);

};

在前面我们将柱子做成了预制，此时可以直接拿来用，游戏中使用三个柱子循环移动位置。在"相机"节点下创建一个Empty Node取名"柱子集"，游戏中产生的柱子将直接挂载该节点下。需要说明的是游戏时秋千与柱子是成对出现的，故我们也可以将秋千弄成预制，秋千的预制取名为"swing"。思路是，在创建柱子的同时也创建秋千，故我们可以在柱子及秋千上分别挂载脚本。需要说明的是，将Config类、Pillar类实例化后，我们可以在入口脚本中的Koala.initLogic方法中添加一个事件派发this.onLogicReady.dispatch()，而相应地我们可以在"柱子集"节点上挂载一个脚本，用于监听事件派发，创建柱子，脚本代码如下：

// 柱子池
var PillarPool = qc.defineBehaviour('qc.Koala.ui.PillarPool', qc.Behaviour, function() {
    this.pillarList = [];
}, {
    // 柱子预制
    pillarPrefab : qc.Serializer.PREFAB
});

PillarPool.prototype.awake = function() {
    this.addListener(qc.Koala.onLogicReady, this._init, this);
};

/**
 * 初始化柱子
 */
PillarPool.prototype._init = function() {
    // 设置柱子池高度
    this.gameObject.top = qc.Koala.logic.config.pillarTopMin;

    var prePillar = null;
    for (var i = 0; i < 3; i++) {
        var pillar = this.pillarList[i] || this.createPillar();
        if (prePillar) {
            pillar.init(prePillar, i);
        }
        else {
            pillar.init(null, i);
        }
        prePillar = pillar;
        this.pillarList[i] = pillar;
    }

    qc.Koala.onPillarReady.dispatch(this.pillarList);
};

/**
 * 创建柱子
 */
PillarPool.prototype.createPillar = function() {
    var node = this.game.add.clone(this.pillarPrefab, this.gameObject);
    return node.getScript('qc.Koala.ui.Pillar');
};

将该脚本挂载到"柱子集"节点上，将柱子预制拖入对对应属性值，如下图：

柱子预制脚本：我们在上面的柱子配置表可以看出不同的关卡等级，柱子的粗细不尽相同，故我们可以创建一个脚本用于在不同的关卡等级正确的显示柱子，在Scripts/ui文件夹下创建脚本：Pillar.js，该脚本的主要功能是初始化柱子本身及创建秋千对象，代码如下：

// 柱子类
var Pillar = qc.defineBehaviour('qc.Koala.ui.Pillar', qc.Behaviour, function() {
    this.swing = null;

    // 分数区域
    this.scoreRect = Infinity;
}, {
    // 秋千预制
    swingPrefab : qc.Serializer.PREFAB,
    // 柱子背景
    bg : qc.Serializer.NODE,
    // 柱头
    head : qc.Serializer.NODE
});

/**
 * 初始化柱子
 * @param  {number} start - 上一个柱子的x轴坐标
 */
Pillar.prototype.init = function(prePillar, level) {
    // 获取柱子的宽度和上边距信息
    var info = qc.Koala.logic.pillar.getInfo(level);
    this.gameObject.width = info.thickness;

    // 初始化分数区域
    this.scoreRect = info.scoreRect;

    // 初始化柱子背景
    this.initBg(info.thickness);

    // 初始化柱帽
    this.initHead(info.headIcon);

    // 设置柱子的上边距和左边距
    this.gameObject.y = info.top - this.gameObject.parent.y;
    if (prePillar == null) {
        this.gameObject.x = 0;
    }
    else {
        this.gameObject.x = prePillar.gameObject.x + qc.Koala.GAMEWIDTH - this.gameObject.width;
        this.gameObject.y += prePillar.gameObject.y;
    }

    // 创建秋千对象
    if (!this.swing)
        this.swing = this.createSwing();

    // 初始化秋千
    this.initSwing();
};

/**
 * 初始化柱子背景
 * @param  {number} width - 柱子宽度
 */
Pillar.prototype.initBg = function (width) {
    var nativeWidth = this.bg.nativeSize.width,
        ratio = width / nativeWidth,
        bottom = this.bg.parent.height * (1 - ratio),
        right = nativeWidth * (1 - ratio);
    this.bg.scaleX = this.bg.scaleY = ratio;
    this.bg.bottom = -bottom;
    this.bg.right = -right;
};

/**
 * 初始化柱帽图片资源
 * @param  {string} headIcon - 柱帽图片资源名称
 */
Pillar.prototype.initHead = function (headIcon) {
    this.head.frame = headIcon + '.png';
};

/**
 * 创建秋千对象
 * @return {qc.Koala.ui.Swing}
 */
Pillar.prototype.createSwing = function() {
    var node = this.game.add.clone(this.swingPrefab, this.gameObject.parent.parent);
    return node.getScript('qc.Koala.ui.Swing');
};

/**
 * 初始化秋千
 */
Pillar.prototype.initSwing = function() {
    this.swing.init(this);
};

将该脚本挂载到柱子预制上，并将秋千预制拖入到对应的属性，其中Bg、Head为柱子躯干及柱头，如下图：

可是我们刚才配置的柱子数据全部保存在Scripts/logic文件夹中的Pillar类中，在Scripts/ui文件夹下的Pillar.js怎么才能获取正确的柱子信息呢？我们可以这样做，在Scripts/logic文件夹中的Pillar类中加入方法，通过Scripts/ui文件夹下Pillar.js提供的参数level从而查询配置表返回相应关卡等级的柱子信息，代码如下：

var PillarInfo = function(row) {
    this.id = row.id * 1;
    this.minLv = row.minLv * 1;
    this.maxLv = row.maxLv * 1 || Infinity;
    this.thickness = row.thickness * 1;
    this.top = row.top * 1;
    this.headIcon = row.headIcon;
    this.scoreRect = row.scoreRect * 1 || Infinity;
};

var Pillar = qc.Koala.logic.Pillar = function(excel) {
    // 柱子信息列表
    this.infoList = [];

    // 关卡与柱子粗细值对应表
    this.infoMap = {};

    if (!excel) {
        excel = qc.Koala.game.assets.load('config');
    }

    var sheet = excel.findSheet('pillar');
    if (sheet) {
        sheet.rows.forEach(function(row) {
            this.infoList.push(new PillarInfo(row));
        }, this);
    }
};

/**
 * 获取柱子粗细值
 * @return {number}
 */
Pillar.prototype.getInfo = function(level) {
    var info = this.infoMap[level];
    if (!info) {
        var p = this._find(level);
        info = {
            thickness : qc.Koala.logic.config.pillarWidth,
            top : qc.Koala.logic.config.pillarTopMin,
            headIcon : qc.Koala.logic.config.pillarHeadIcon,
            scoreRect : Infinity
        };
        if (p) {
            info.thickness *= p.thickness;
            info.top = p.top * qc.Koala.logic.config.pillarTopMax;
            info.headIcon = p.headIcon;
            info.scoreRect = p.scoreRect;
        }
        this.infoMap[level] = info;
    }
    return info;
};

/**
 * 遍历获取柱子粗细百分比
 * @param  {number} level - 关卡数
 * @return {number}
 */
Pillar.prototype._find = function(level) {
    for (var i = 0, len = this.infoList.length; i < len; i++) {
        var info = this.infoList[i];
        if (level < info.minLv)
            continue;
        if (level >= info.minLv && level <= info.maxLv)
            return info;
    }
    return null;
};

6.2 秋千

秋千：在游戏中，当考拉还没有抓住秋千时，秋千是有一个初始的状态。考拉抓住秋千时，秋千要做摇摆运动，摇摆运动我们可以使用引擎提供的TweenRotation动画，效果图分别如下所示：

考拉没有抓住秋千时，秋千的状态效果图：

考拉抓住秋千时，秋千的效果图：

为了实现这两种效果，我们可以根据秋千对应的柱子确定秋千的位置及旋转的角度。首先挂载一个TweenRotation动画，如下图所示：

该TweenRotation动画主要的功能是让秋千做摇摆运动，其中From值与To值是根据秋千对应的柱子所决定的，设置其Play Style为PingPong（来回播放），持续时间是1.1秒，更多关于Tween动画属性可参看《Tween动画》。

为了实现上述的效果，我们可以通过脚本来控制，在Scripts/ui文件夹下创建脚本：Swing.js，将该脚本挂载到"swing"节点上，脚本代码如下：

var Swing = qc.defineBehaviour('qc.Koala.ui.Swing', qc.Behaviour, function() {
    // 秋千最大摆角
    this._maxRotation = 0;

    // 方向
    this.direction = 1;

    this.deltaRotation = Math.PI / 180 * 5;

    this.beginRotation = 0;
}, {
});

Object.defineProperties(Swing.prototype, {
    /**
     * 秋千最大摆角
     * @type {number}
     */
    maxRotation : {
        get : function() { return this._maxRotation; },
        set : function(v) {
            if (this._maxRotation === v) return;

            this._maxRotation = v;

            var s = this.gameObject.getScript('qc.TweenRotation');
            s.from = v;
            s.to = -v;
        }
    }
});

/**
 * 初始化
 */
Swing.prototype.awake = function() {
    var s = this.gameObject.getScript('qc.TweenRotation');
    this.addListener(s.onLoopFinished, this._onSwingFinished, this);
};

/**
 * 钟摆循环结束后，更新方向值
 */
Swing.prototype._onSwingFinished = function() {
    this.direction *= -1;
};

/**
 * 初始化秋千
 * @param  {qc.Koala.ui.Pillar} pillar - 柱子对象
 */
Swing.prototype.init = function(pillar) {
    this.gameObject.anchoredX = pillar.gameObject.x;
    this.gameObject.y = pillar.gameObject.y;

    // 计算三角形的宽高
    var height = pillar.gameObject.parent.y;
    var width = qc.Koala.GAMEWIDTH * 0.5 - pillar.gameObject.width;

    // 计算秋千最大摆角
    this.beginRotation = Math.atan(width / height);

    this.maxRotation = this.beginRotation + this.deltaRotation;

    this.gameObject.height = Math.sqrt(width * width + height * height);

    // 重置秋千位置
    this.reset();
};

/**
 * 播放钟摆动画
 * @param  {boolean} con - 是否从上一次暂停的地方开始播放
 */
Swing.prototype.play = function(con) {
    if (!con)
        qc.Tween.resetGroupToBeginning(this.gameObject, 2);
    qc.Tween.playGroup(this.gameObject, 2);
};

/**
 * 停止钟摆动画
 */
Swing.prototype.stop = function () {
    qc.Tween.stopGroup(this.gameObject, 2);
};

/**
 * 回到起点
 */
Swing.prototype.reset = function() {
    qc.Tween.stopGroup(this.gameObject, 2);
    qc.Tween.resetGroupToBeginning(this.gameObject, 2);
    this.gameObject.rotation = this.beginRotation;

    this.direction = 1;
};

把柱子和秋千弄完后，我们此时就需要请出悠悠考拉游戏的主角登场了。在"相机"节点下创建一个Sprite节点取名"koala"，该节点的位置是不固定的，因为在游戏中，随着柱子位置的不同，koala的位置也不同。后续在代码中会讲明。我们需要创建一个脚本：用于管理考拉的帧动画（前面我们已经讲述了制作考拉在游戏中的各种动作），在Scripts/ui下创建一个脚本：Koala.js，将该节点挂载到"koala"节点，代码如下所示：

var Koala = qc.defineBehaviour('qc.Koala.ui.Koala', qc.Behaviour, function() {
    // 秋千对象
    this.swingScript = null;

    // 考拉当前播放的动作
    this.currAnimation = 'stand';
}, {
    // 相机节点
    camera : qc.Serializer.NODE,
    // 特效节点
    effect : qc.Serializer.NODE,
    // 文本
    labelImg : qc.Serializer.NODE,
    // 分数
    scoreImg : qc.Serializer.NODE,
    // 死亡效果图片
    dieImg : qc.Serializer.NODE,
    // 刹车效果图片
    brakeImg : qc.Serializer.NODE
});

/**
 * 站立
 */
Koala.prototype.stand = function() {
    this.currAnimation = 'stand';
    this.gameObject.playAnimation('stand');
};

/**
 * 走
 */
Koala.prototype.walk = function() {
    // 隐藏刹车效果
    this.brakeImg.visible = false;

    this.labelImg.getScript('qc.TweenAlpha').onFinished.removeAll(this);

    this.currAnimation = 'walk';
    this.gameObject.playAnimation('walk');

    var s = this.gameObject.getScript('qc.TweenPosition');
    s.onFinished.addOnce(this.take, this);
    s.resetToBeginning();
    s.play();
};

/**
 * 拿秋千
 */
Koala.prototype.take = function() {
    // 拿秋千动作结束后处理
    this.gameObject.onFinished.addOnce(function() {
        // 设置考拉在秋千上的位置
        this.gameObject.parent = this.swingScript.gameObject;
        this.gameObject.anchoredX = 0;
        this.gameObject.anchoredY = 0;
        this.gameObject.rotation = 0;

        // 设置考拉状态
        this.swing();

        // 派发拿起秋千事件
        qc.Koala.onSwingTake.dispatch();
    }, this);

    this.currAnimation = 'take';
    // 播放拿秋千动作
    this.gameObject.playAnimation('take');
};

/**
 * 荡秋千
 */
Koala.prototype.swing = function() {
    if (qc.Koala.logic.me.paused) return;
    this.swingScript.play(true);
    this.currAnimation = 'swing';
    this.gameObject.playAnimation('swing');
};

/**
 * 放开秋千
 */
Koala.prototype.away = function() {
    this.gameObject.switchParent(this.camera);
    this.gameObject.rotation = 0;

    this.currAnimation = 'away';
    this.gameObject.playAnimation('away');
};

标题区域：标题区域由暂停按钮、方向区域、分数区域所组成；在"node"节点下创建一个Empty Node取名"标题区域"，为了让在该节点下的子节点在不同分辨率显示时，都能够正常显示。将该节点设置为向上对齐左右拉伸，故设置该节点的属性值如下：

在"标题区域"节点下依次创建暂停按钮节点、方向区域节点信息（其中方向区域由方向标识、风值、风值单位节点所构成）、分数区域节点信息。创建好后，效果图如下：

怎样得分：根据策划要求，考拉成功降落在跳台上时，作相应的加分，这里的相应加分，是在前面的柱子pillar sheet配置表中，我们配置了scoreRect(得分区域)，如果考拉降落到柱子上时，离柱子中心区域越近则得分越高，而且策划还要求要有加分图标及特效效果，同样地我们也可以将这些数据配置到前面的Excel表中，在前面的Excel表中加入一个sheet表命名score，配置的数据如下：

其中表格中的min与max表示考拉成功降落时离柱子中心的距离从而做相应的加分及贴图，其中labelImg、scoreImg为图片资源的名称，而effectName为特效动画名称。同样地我们也需要创建一个脚本用于解析该表，在Scripts/logic文件夹下创建脚本：Score.js，脚本代码如下：

var ScoreInfo = function(row) {
    this.id = row.id * 1;
    this.min = row.min * 1;
    this.max = row.max * 1;
    this.value = row.value * 1;

    this.scoreImg = row.scoreImg;
    this.labelImg = row.labelImg;

    this.effectName = row.effectName;
};

var Score = qc.Koala.logic.Score = function(excel) {
    // 分数信息列表
    this.infoList = [];

    // 默认的分数信息
    this.defaultInfo = null;

    if (!excel) {
        excel = qc.Koala.game.assets.load('config');
    }

    var sheet = excel.findSheet('score');
    if (sheet) {
        sheet.rows.forEach(function(row) {
            this.infoList.push(new ScoreInfo(row));
        }, this);
    }
};

实例化Score类，在入口脚本Koala.js的Koala.initLogic方法中加入代码，如下：

Koala.initLogic = function(excel, game) {

    // 设置游戏对象引用
    this.game = game;

    // 设置游戏帧率为60帧
    game.time.frameRate = 60;

    // 初始化系统配置
    this.logic.config = new qc.Koala.logic.Config(excel);

    // 游戏相关数据逻辑类
    this.logic.me = new qc.Koala.logic.Me();

    // 柱子相关逻辑类
    this.logic.pillar = new qc.Koala.logic.Pillar(excel);

    // 风力值逻辑类
    this.logic.wind = new qc.Koala.logic.Wind(excel);

    // 分数相关逻辑类
    this.logic.score = new qc.Koala.logic.Score(excel);

    // 分享相关逻辑类
    this.logic.share = new qc.Koala.logic.Share(excel);

    // 派发脚本准备就绪事件
    this.onLogicReady.dispatch();
};

可是我们在游戏中怎么去获取分数呢？我们可以在Score类中提供一个接口，该接口会返回玩家所得的分数，代码如下：

/**
 * 获取分数
 * @param  {number} distance - 考拉降落点到柱子中心的距离
 * @param  {number} scoreRect - 柱子的分数区域
 * @return {number}
 */
Score.prototype.getScore = function(distance, scoreRect) {
    console.log('scoreRect:',scoreRect);
    // 如果超出分数区域，则返回游戏最小分
    if (distance > scoreRect) {
        if (!this.defaultInfo)
            this.defaultInfo = {
                value : qc.Koala.logic.config.minScore,
                labelImg : qc.Koala.logic.config.labelImg,
                scoreImg : qc.Koala.logic.config.scoreImg
            };
        return this.defaultInfo;
    }

    // 通过距离计算得分
    var info = null;
    for (var i = 0, len = this.infoList.length; i < len; i++) {
        info = this.infoList[i];
        if (distance > info.min && distance <= info.max)
            break;
    }
    return info;
};

游戏界面中的大部分节点都已经创建好了，可是怎么让考拉松手时与柱子发生碰撞呢？怎么让屏幕一直跟着考拉呢？怎么让游戏背景也跟着移动呢？。。。。等等等，接下来我就一一讲述。

物理表现：在虚拟世界中，考拉有自己的位置，水平和垂直方向上的速度。在游戏中，考拉在秋千上做钟摆运动，点击屏幕时考拉松手，需要计算它的垂直速度与水平速度，需要说明的是代码中的qc.Koala.logic.config.g是个常量，我将这个数据配置到config sheet表中，代码如下：

/**
 * 监听点击事件
 */
Main.prototype.onClick = function() {
    // 禁止交互
    this.gameObject.interactive = false;

    // 关卡数加1
    qc.Koala.logic.me.level++;

    // 计算考拉下落高度
    var rotation = this.swing.gameObject.rotation,
        cos = Math.cos(rotation),
        sin = Math.sin(rotation),
        radius = this.swing.gameObject.height,
        h = radius * (cos - Math.cos(this.swing.maxRotation));

    // 计算横向及纵向速度
    var dir = this.swing.direction,
        v0 = Math.sqrt(2 * qc.Koala.logic.config.g * h) * dir,
        vx0 = v0 * cos + this.windValue,
        vy0 = v0 * sin;


    // 获取考拉脚本对象
    var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
    // 考拉放手
    koalaScript.away();

    // 获取跳台对象
    var pool = this.pillarPool.getScript('qc.Koala.ui.PillarPool');
    this._step = pool.getStep();

    // 考拉做抛物线运动
    this.drop(vx0, vy0);
};

/**
 * 考拉脱离缰绳开始掉落
 * @param  {number} vx0 - x方向初始速度
 * @param  {number} vy0 - y方向初始速度
 */
Main.prototype.drop = function(vx0, vy0) {
    // 循环定时器刷新考拉位置
    this.dropTimer = this.game.timer.loop(0, function() {
        if (qc.Koala.logic.me.paused)
            return;
        // 计算纵向速度
        var t = this.game.time.deltaTime * 0.001;
        vy0 = vy0 + qc.Koala.logic.config.g * t;

        // 考拉掉落处理
        this._onDrop(vx0, vy0, t);
    }, this);
};

/**
 * 考拉掉落帧处理
 * @param  {number} vx0 - 横向速度
 * @param  {number} vy0 - 纵向速度
 * @param  {number} t - 俩帧之间的时间间隔
 */
Main.prototype._onDrop = function (vx0, vy0, t) {
    // 计算横向和纵向偏移值
    var preY = this.koala.y,
        deltaX = vx0 * t,
        deltaY = vy0 * t;

    // 设置考拉位置
    this.koala.x += deltaX;
    this.koala.y += deltaY;

    // 调整相机位置
    this.adjustCamera(deltaX, deltaY);

    // 检测碰撞
    var result = this._checkCollide(preY);
    if (result !== 0) {
        // 移除定时器
        this.game.timer.remove(this.dropTimer);
        this.dropTimer = null;

        // 成功跳到下一个站台
        if (result === 1) {
            this._onStep();
        }

        // 游戏结束
        if (result < 0) {
            this.gameOver(result);
        }
    }
};

视野移动：在游戏中，为了让考拉一直处于屏幕中，即屏幕一直跟随考拉，此时采用相机，做法是：将柱子、考拉及秋千全部挂载到相机节点下，当考拉脱离缰绳开始掉落时，利用考拉的相对位移从而去调整相机位置，代码如下：

 1 /**
 2  * 调整相机位置
 3  * @param  {number} deltaX - x轴偏移值
 4  * @param  {number} deltaY - y轴偏移值
 5  */
 6 Main.prototype.adjustCamera = function(deltaX, deltaY) {
 7     var camera = this.pillarPool.parent,
 8         step = this._step.gameObject;
 9     console.log('camera.x:',camera.x);
10     console.log('camera.y:',camera.y);
11     camera.x -= deltaX;
12     if (camera.y - deltaY < -step.y)
13         camera.y = -step.y;
14     else
15         camera.y -= deltaY;
18     // 派发调整相机位置事件
19     qc.Koala.onAdjustCamera.dispatch(new qc.Point(deltaX, deltaY));
20 };

游戏背景：在游戏中，游戏背景由白云、山、树组成，为了呈现动态效果，白云由三朵白云构成循环移动，而山、树则是根据相机的位置调整而调整。我们可以这样做，当相机调整了位置时，相应地派发一个事件，让事件接受者相应地调整山、树的位置。此时我们需要在入口脚本Koala.js代码中创建一个事件（需要说明的是，在后续的处理中，用到了很多的事件如分数改变事件、开始登录事件、游戏暂停事件、游戏结束事件等。由于事件较多，在后续的代码中我可能不会处处提到，它们的创建事件、派发事件、接收事件是一致的原理），所以，我将游戏中要用到的事件全部创建出来，读者们也可以需要用哪个事件就相应地添加哪个事件，代码如下：

var Koala = qc.Koala = {
    ui : {},
    logic : {},

    // 游戏对象
    game : null,

    // 游戏宽度
    GAMEWIDTH : 640,

    // 逻辑脚本准备就绪事件
    onLogicReady : new qc.Signal(),

    // 柱子创建完成
    onPillarReady : new qc.Signal(),

    // 游戏开始事件
    onStart : new qc.Signal(),

    // 考拉拿起秋千事件
    onSwingTake : new qc.Signal(),

    // 游戏结束事件
    onGameOver : new qc.Signal(),

    // 游戏分数发生变化事件
    onScoreChange : new qc.Signal(),

    // 游戏暂停事件
    onPause : new qc.Signal(),

    // 继续游戏事件
    onContinue : new qc.Signal(),

    // 调整相机事件
    onAdjustCamera : new qc.Signal(),

    // 相机做Tween动画事件
    onTweenCamera : new qc.Signal(),

    // 显示排行榜事件
    showRanking : new qc.Signal(),

    // 排行榜关闭事件
    onRankingClose : new qc.Signal(),

    // 登录成功事件
    onLogin : new qc.Signal(),

    // 登录中事件
    onLogining : new qc.Signal(),

    // 登录失败事件
    onLoginFail : new qc.Signal(),

    // 显示关注页面事件
    showFollowMsg : new qc.Signal(),

    // 显示分享提示页面事件
    showShareMsg : new qc.Signal()
};

此时，相机已经改变了位置也派发了一个事件，我们可以在Background.js加入事件监听，从而改变山、树的位置，代码如下：

var Background = qc.defineBehaviour('qc.Koala.ui.Background', qc.Behaviour, function() {
    // 动画播放距离
    this.tweenDistance = 0;

    // 山与山之间的距离
    this.mountainDistance = 635;

    // 树与树之间的距离
    this.treeDistance = 340;

    this.mountains = [];

    this.trees = [];

    this.treeIcons = [ 'tree_1.bin', 'tree_2.bin', 'tree_3.bin' ];
}, {
    // 云列表
    clouds : qc.Serializer.NODES,
    // 山峰区域
    mountainRect : qc.Serializer.NODE,
    // 山峰预制
    mountainPrefab : qc.Serializer.PREFAB,
    // 树区域
    treeRect : qc.Serializer.NODE,
    // 树预制
    treePrefab : qc.Serializer.PREFAB
});

Background.prototype.awake = function() {
    // 监听调整相机事件
    this.addListener(qc.Koala.onAdjustCamera, this._adjust, this);

};

/**
 * 调整山和树的位置
 * @param  {qc.Point} delta - 调整的距离
 */
Background.prototype._adjust = function(delta) {
    var x = delta.x, y = delta.y,
        width = this.gameObject.width;

    // 更新山的位置
    var mX = x * qc.Koala.logic.config.mountainCoef,
        mY = y * qc.Koala.logic.config.mountainCoef,
        mLen = this.mountains.length;
    this.mountains.forEach(function(m, index) {
        m.x -= mX;
        if (m.x <= -this.mountainDistance)
            m.x += this.mountainDistance * mLen;
    }, this);

    // 更新树的位置
    var tX = x * qc.Koala.logic.config.treeCoef,
        tY = y * qc.Koala.logic.config.treeCoef,
        treeLen = this.trees.length;
    this.trees.forEach(function(t, index) {
        t.x -= tX;
        if (t.x <= -this.treeDistance)
            t.x += this.treeDistance * treeLen;
    }, this);
};

碰撞检测：考拉松手下降的同时，需要做碰撞检测以检测它是否成功的站到柱子上，有下面几种情况：

一、考拉碰到柱子左边缘，结束游戏；

二、考拉超出游戏边界，结束游戏；

三、考拉成功落到柱子上，则相应处理；

代码如下：

/**
 * 检测考拉是否可以站在平台上
 * @param  {number} preY - 考拉移动前的y轴位置
 * @return {number} 返回值定义如下
 *          1：落在跳台上；
 *         -1：超出游戏边界；
 *         -2：碰到跳台的左边缘；
 *          0：还在掉落
 */
Main.prototype._checkCollide = function(preY) {
    var x = this.koala.x,
        y = this.koala.y,
        step = this._step.gameObject;

    // 判断是否落到跳台上
    if (x > step.x &&
        x < step.x + step.width &&
        preY <= step.y + step.parent.y &&
        y >= step.y + step.parent.y)
        return 1;

    // 超出游戏边界，因为相机有跟着考拉在动，所以在这边不需要判断游戏屏幕x轴方向超边
    if (y > this.gameObject.height + this.koala.height - this.pillarPool.parent.y)
        return -1;

    // 判断与跳台左边缘碰撞
    if (x > step.x &&
        x < step.x + step.width &&
        preY > step.y + step.parent.y)
        return -2;

    return 0;
};

当考拉成功跳到柱子上时，我们需要更新柱子的位置（因为如果不更新柱子的位置，柱子将跟随相机到屏幕外边），代码如下：

/**
 * 考拉成功跳到下一个站台后处理
 */
Main.prototype._onStep = function() {
    var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
    koalaScript.fall(this._step);

    // 矫正柱子的位置
    this.adjustPillar();

    // 下一个跳台
    var pool = this.pillarPool.getScript('qc.Koala.ui.PillarPool');
    pool.next();

    // 重置秋千
    this.swing.reset();

    // 更新考拉当前所在跳台和当前正在使用的秋千
    this.startStep = this._step;
    this.swing = this._step.swing;

    // 重新获取风力值
    this.initWind();
};
/**
 * 跳到跳台上后，调整柱子位置
 */
Main.prototype.adjustPillar = function() {
    var camera = this.pillarPool.parent,
        s = camera.getScript('qc.TweenPosition'),
        step = this._step.gameObject,
        p = new qc.Point(-step.x - camera.parent.width * 0.5, -step.y);
    s.to = p.clone();
    s.setCurrToStartValue();
    s.resetToBeginning();
    s.play();

    p.subtract(s.from.x, s.from.y);
    qc.Koala.onTweenCamera.dispatch(p);
};

当考拉成功降落在柱子上时，我们也需要做加分并显示在屏幕上，并飘分，如果踩中得分区域的中心点的话还会播放特效，播放特效的位置我们可以根据考拉的位置而确定，在Scripts/ui文件夹下的Koala.js中加入如下代码：

/**
 * 掉落在跳台上
 * @param  {qc.Koala.ui.Pillar} pillar - 柱子对象
 */
Koala.prototype.fall = function(pillar) {
    // 设置下一个秋千对象引用
    this.swingScript = pillar.swing;

    // 矫正考拉在柱子上的位置，防止陷到柱子里面去
    this.gameObject.y = pillar.gameObject.y + pillar.gameObject.parent.y;

    // 将考拉挂载在柱子上
    this.gameObject.switchParent(pillar.gameObject);

    // 显示刹车效果
    this.brakeImg.parent = this.gameObject.parent;
    this.brakeImg.x = this.gameObject.x;
    this.brakeImg.y = this.gameObject.y;
    this.brakeImg.visible = true;

    this.currAnimation = 'fall';
    // 播放动作
    this.gameObject.playAnimation('fall');

    // 更新考拉走路曲线参数
    this.updateTween(pillar);

    // 加分数
    var distance = Math.abs(this.gameObject.anchoredX);

        scoreInfo = qc.Koala.logic.score.getScore(distance, pillar.scoreRect);
    qc.Koala.logic.me.addScore(scoreInfo.value);

    this.playEffect(scoreInfo.effectName);

    this.playLabel(scoreInfo);

    qc.Tween.resetGroupToBeginning(this.labelImg, 1);
    qc.Tween.playGroup(this.labelImg, 1);

    this.currAnimation = 'walk';
};

/**
 * 播放文字效果
 * @param  {object} info - 分数对象
 */
Koala.prototype.playLabel = function (info) {
    this.scoreImg.frame = info.scoreImg;
    this.scoreImg.resetNativeSize();
    this.labelImg.frame = info.labelImg;
    this.labelImg.resetNativeSize();

    this.labelImg.getScript('qc.TweenAlpha').onFinished.addOnce(this.walk, this);
};

/**
 * 播放特效
 * @param  {string} effectName - 动画名称
 */
Koala.prototype.playEffect = function (effectName) {
    if (!effectName) return;

    this.effect.parent = this.gameObject.parent;
    this.effect.x = this.gameObject.x;
    this.effect.y = this.gameObject.y;

    this.effect.playAnimation(effectName);
};

将上述代码整合到一个脚本，在Scripts/ui文件夹下创建脚本：Main.js，脚本代码如下：

var Main = qc.defineBehaviour('qc.Koala.ui.Main', qc.Behaviour, function() {
    // 风值
    this.windValue = 0;

    // 掉落事件控制器
    this.dropTimer = null;

    // 跳台对象
    this._step = null;

    // 秋千对象
    this.swing = null;
}, {
    // 柱子池
    pillarPool : qc.Serializer.NODE,
    // 考拉节点
    koala : qc.Serializer.NODE,
    // 暂停按钮
    pauseBtn : qc.Serializer.NODE,
    // 风值
    wind : qc.Serializer.NODE,
    // 风向
    windDirection : qc.Serializer.NODE,
    // 分数节点
    score : qc.Serializer.NODE
});

/**
 * 初始化
 */
Main.prototype.awake = function() {
    var self = this;
    var camera = this.pillarPool.parent;

    // 监听柱子初始化完成事件
    this.addListener(qc.Koala.onPillarReady, this._onPillarReady, this);

    // 监听游戏开始事件
    this.addListener(qc.Koala.onStart, this.restart, this);

    // 监听分数改变事件
    this.addListener(qc.Koala.onScoreChange, this.updateScore, this);

    // 在游戏开始钱禁止交互
    this.gameObject.interactive = false;

    // 考拉拿起秋千时，启动交互
    this.addListener(qc.Koala.onSwingTake, function() {
        this.gameObject.interactive = true;
    }, this);

    //// 初始化游戏逻辑脚本
    //qc.Koala.initLogic(this.config, this.game);

    // 分数文本中间值，用于TweenProperty组件使用
    this.score._tempText = 0;
    Object.defineProperties(this.score, {
        'tempText' : {
            get : function() { return this._tempText; },
            set : function(v) {
                if (this._tempText === v) return;

                this._tempText = v;
                this.text = Math.floor(v) + '';
            }
        }
    });
};

/**
 * 柱子准备完毕后处理
 * @param  {array} pillarList - 柱子列表
 */
Main.prototype._onPillarReady = function(pillarList) {
    this.startStep = pillarList[0];
    this.swing = this.startStep.swing;

    var s = this.koala.getScript('qc.Koala.ui.Koala');
    s.init(this.startStep);
};


/**
 * 重新开始游戏
 */
Main.prototype.restart = function() {
    // 重置逻辑脚本
    qc.Koala.resetLogic();

    // 如果掉落还没结束，则强制移除掉落的循环控制器
    if (this.dropTimer) {
        this.game.timer.remove(this.dropTimer);
        this.dropTimer = null;
    }

    // 监听相机位置调整完成事件
    var camera = this.pillarPool.parent,
        s = camera.getScript('qc.TweenPosition');
    s.onFinished.addOnce(this.start, this);

    // 重置相机位置
    this.resetCamera();

    // 显示游戏界面
    this.show();
};

/**
 * 开始游戏
 * @param  {boolean} reset - 是否重置游戏
 */
Main.prototype.start = function (reset) {
    // 是否重新开始游戏
    if (reset === true) {
        this.restart();
        return;
    }

    // 启动暂停按钮交互
    this.pauseBtn.interactive = true;

    // 更新风值
    this.initWind();

    // 重置柱子列表
    var pool = this.pillarPool.getScript('qc.Koala.ui.PillarPool');
    pool.reset();

    // 考拉开始走
    var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
    koalaScript.walk();
};

/**
 * 更新分数文本
 * @param  {number} score - 当前分数
 */
Main.prototype.updateScore = function (score) {
    var s = this.score.getScript('qc.TweenProperty');
    s.setCurrToStartValue();
    s.to = score;
    qc.Tween.resetGroupToBeginning(this.score, 1);
    qc.Tween.playGroup(this.score, 1);
};

/**
 * 初始化风值
 */
Main.prototype.initWind = function() {
    var windObj = qc.Koala.logic.wind.getWind(qc.Koala.logic.me.level);
    this.windValue = windObj.value * windObj.direction;
    this.wind.text = windObj.value + '';

    this.wind.parent.visible = windObj.value !== 0;
    this.windDirection.rotation = Math.PI * (windObj.direction - 1) * 0.5;
};

/**
 * 监听点击事件
 */
Main.prototype.onClick = function() {
    // 禁止交互
    this.gameObject.interactive = false;

    // 关卡数加1
    qc.Koala.logic.me.level++;

    // 计算考拉下落高度
    var rotation = this.swing.gameObject.rotation,
        cos = Math.cos(rotation),
        sin = Math.sin(rotation),
        radius = this.swing.gameObject.height,
        h = radius * (cos - Math.cos(this.swing.maxRotation));

    // 计算横向及纵向速度
    var dir = this.swing.direction,
        v0 = Math.sqrt(2 * qc.Koala.logic.config.g * h) * dir,
        vx0 = v0 * cos + this.windValue,
        vy0 = v0 * sin;


    // 获取考拉脚本对象
    var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
    // 考拉放手
    koalaScript.away();

    // 获取跳台对象
    var pool = this.pillarPool.getScript('qc.Koala.ui.PillarPool');
    this._step = pool.getStep();

    // 考拉做抛物线运动
    this.drop(vx0, vy0);
};

/**
 * 考拉脱离缰绳开始掉落
 * @param  {number} vx0 - x方向初始速度
 * @param  {number} vy0 - y方向初始速度
 */
Main.prototype.drop = function(vx0, vy0) {
    // 循环定时器刷新考拉位置
    this.dropTimer = this.game.timer.loop(0, function() {
        if (qc.Koala.logic.me.paused)
            return;
        // 计算纵向速度
        var t = this.game.time.deltaTime * 0.001;
        vy0 = vy0 + qc.Koala.logic.config.g * t;

        // 考拉掉落处理
        this._onDrop(vx0, vy0, t);
    }, this);
};

/**
 * 考拉掉落帧处理
 * @param  {number} vx0 - 横向速度
 * @param  {number} vy0 - 纵向速度
 * @param  {number} t - 俩帧之间的时间间隔
 */
Main.prototype._onDrop = function (vx0, vy0, t) {
    // 计算横向和纵向偏移值
    var preY = this.koala.y,
        deltaX = vx0 * t,
        deltaY = vy0 * t;

    // 设置考拉位置
    this.koala.x += deltaX;
    this.koala.y += deltaY;

    // 调整相机位置
    this.adjustCamera(deltaX, deltaY);

    // 检测考拉位置
    var result = this._checkCollide(preY);
    if (result !== 0) {
        // 移除定时器
        this.game.timer.remove(this.dropTimer);
        this.dropTimer = null;

        // 成功跳到下一个站台
        if (result === 1) {
            this._onStep();
        }

        // 游戏结束
        if (result < 0) {
            this.gameOver(result);
        }
    }
};

/**
 * 考拉成功跳到下一个站台后处理
 */
Main.prototype._onStep = function() {
    var koalaScript = this.koala.getScript('qc.Koala.ui.Koala');
    koalaScript.fall(this._step);

    // 矫正柱子的位置
    this.adjustPillar();

    // 下一个跳台
    var pool = this.pillarPool.getScript('qc.Koala.ui.PillarPool');
    pool.next();

    // 重置秋千
    this.swing.reset();

    // 更新考拉当前所在跳台和当前正在使用的秋千
    this.startStep = this._step;
    this.swing = this._step.swing;

    // 重新获取风力值
    this.initWind();
};

/**
 * 检测考拉是否可以站在平台上
 * @param  {number} preY - 考拉移动前的y轴位置
 * @return {number} 返回值定义如下
 *          1：落在跳台上；
 *         -1：超出游戏边界；
 *         -2：碰到跳台的左边缘；
 *          0：还在掉落
 */
Main.prototype._checkCollide = function(preY) {
    var x = this.koala.x,
        y = this.koala.y,
        step = this._step.gameObject;

    // 判断是否落到跳台上
    if (x > step.x &&
        x < step.x + step.width &&
        preY <= step.y + step.parent.y &&
        y >= step.y + step.parent.y)
        return 1;

    // 超出游戏边界，因为相机有跟着考拉在动，所以在这边不需要判断游戏屏幕x轴方向超边
    if (y > this.gameObject.height + this.koala.height - this.pillarPool.parent.y)
        return -1;

    // 判断与跳台左边缘碰撞
    if (x > step.x &&
        x < step.x + step.width &&
        preY > step.y + step.parent.y)
        return -2;

    return 0;
};

/**
 * 调整考拉位置
 */
Main.prototype.adjustKoala = function() {
    var step = this._step.gameObject;
    if (this.koala.y > step.y &&
        this.koala.y < step.y + this.koala.height)
        this.koala.y = step.y;
};

/**
 * 跳到跳台上后，调整柱子位置
 */
Main.prototype.adjustPillar = function() {
    var camera = this.pillarPool.parent,
        s = camera.getScript('qc.TweenPosition'),
        step = this._step.gameObject,
        p = new qc.Point(-step.x - camera.parent.width * 0.5, -step.y);
    s.to = p.clone();
    s.setCurrToStartValue();
    s.resetToBeginning();
    s.play();

    p.subtract(s.from.x, s.from.y);
    qc.Koala.onTweenCamera.dispatch(p);
};

/**
 * 调整相机位置
 * @param  {number} deltaX - x轴偏移值
 * @param  {number} deltaY - y轴偏移值
 */
Main.prototype.adjustCamera = function(deltaX, deltaY) {
    var camera = this.pillarPool.parent,
        step = this._step.gameObject;
    camera.x -= deltaX;
    if (camera.y - deltaY < -step.y)
        camera.y = -step.y;
    else
        camera.y -= deltaY;

    // 派发调整相机位置事件
    qc.Koala.onAdjustCamera.dispatch(new qc.Point(deltaX, deltaY));
};

/**
 * 重置相机位置
 */
Main.prototype.resetCamera = function () {
    var camera = this.pillarPool.parent,
        s = camera.getScript('qc.TweenPosition');
    s.to = new qc.Point(-camera.parent.width * 0.5, 0);
    s.setCurrToStartValue();
    s.resetToBeginning();
    s.play();
};

/**
 * 显示界面
 */
Main.prototype.show = function () {
    this.gameObject.visible = true;
};

将该脚本挂载到"游戏场景"节点，并将对应的节点拖入到对应的属性中，如下图：

到此，游戏界面的元素与脚本就已经讲了大部分了，下一篇文章我将讲述游戏暂停、游戏结束等功能的处理。