cocos官网例子

原创
2018/04/01 14:58
阅读数 1.8K

官网看一看、文档看一看。看到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;
    },
});

成果图:

总结:组件 就是属性功能 创建好对象和属性名称后,添加为游戏元素的组件进行进一步设置其属性

 

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部