官网看一看、文档看一看。看到cocos-js 就想自己可能可以抄个例子玩玩,还是蛮有意思的。虽然底层不懂咋搞的,自己充其量就是写个配置文件的感觉。
根据官网给出的例子完成第一个游戏
先下载cocos creater ,安装
下载 教程给出的 初始文件,就是音乐和图像组件。新建一个canvas,然后将背景等图片拖上去
根据官网给出的例子完成第一个游戏
下载 教程给出的 初始文件,就是音乐和图像组件。新建一个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.htmlcc.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; },});
成果图:
总结:组件 就是属性功能 创建好对象和属性名称后,添加为游戏元素的组件进行进一步设置其属性