cocos官網例子 原

官網看一看、文檔看一看。看到cocos-js 就想自己可能可以抄個例子玩玩，還是蠻有意思的。雖然底層不懂咋搞的，自己充其量就是寫個配置文件的感覺。

http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

根據官網給出的例子完成第一個遊戲

先下載cocos creater ，安裝

下載 教程給出的 初始文件，就是音樂和圖像組件。新建一個canvas，然後將背景等圖片拖上去

http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

根據官網給出的例子完成第一個遊戲

 

 

下載 教程給出的 初始文件，就是音樂和圖像組件。新建一個canvas，然後將背景等圖片拖上去

 

爲圖片添加組件，一般是js腳本，js的屬性不能點 導入爲插件，不然選不到 添加用戶腳本組件

配置文件中的play.js

// Learn cc.Class:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/class.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/class.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
       //主角跳躍高度
       jumpHeight: 0,
        // 主角跳躍持續時間
        jumpDuration: 0,
        // 最大移動速度
        maxMoveSpeed: 0,
        // 加速度
        accel: 0,
    },

    // LIFE-CYCLE CALLBACKS:
    //初始事件
    onLoad () {
        //初始化跳躍動作
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
        //加速度方向開關
        this.accLeft = false;
        this.accRight = false;
        //主角當前水平方向速度
        this.xSpeed = 0;
        //初始化鍵盤輸入監聽
        this.setInputControl();

    },
    //跳躍事件 詳情看cocos2d-js
    setJumpAction:function(){
        //跳躍上升
        var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHeight)).easing(cc.easeCubicActionOut());
        //下落
        var jumpDown = cc.moveBy(this.jumpDuration,cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        //不斷重複
        return cc.repeatForever(cc.sequence(jumpUp,jumpDown));
    },
    //重寫輸入控制事件
      setInputControl: function () {
        var self = this;
        // 添加鍵盤事件監聽
        // 有按鍵按下時，判斷是否是我們指定的方向控制鍵，並設置向對應方向加速
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function (event){
            switch(event.keyCode) {
                case cc.KEY.a:
                    self.accLeft = true;
                    break;
                case cc.KEY.d:
                    self.accRight = true;
                    break;
            }
        });

        // 鬆開按鍵時，停止向該方向的加速
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function (event){
            switch(event.keyCode) {
                case cc.KEY.a:
                    self.accLeft = false;
                    break;
                case cc.KEY.d:
                    self.accRight = false;
                    break;
            }
        });
    },
    //start () {},

     update: function (dt) {
        // 根據當前加速度方向每幀更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // 限制主角的速度不能超過最大值
        if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 根據當前速度更新主角的位置
        this.node.x += this.xSpeed * dt;
    },
});

成果圖：

總結：組件 就是屬性功能 創建好對象和屬性名稱後，添加爲遊戲元素的組件進行進一步設置其屬性