本人也是第一次接触cocos creator,现在也正处于学习阶段,按照官网的教程一点一点来练习。下面是练习官网的第一个实例:
《Star.js》
cc.Class({
extends: cc.Component,
properties: {
pickRadius: 0
},
// use this for initialization
onLoad: function () {
},
getPlayerDistance: function(){
//getPosition()和position是一个意思,一个是函数,一个是属性
var playerPos = this.mainlogic.player.getPosition();//mainlogic表示的就是脚本Game中的实例
var dist = cc.pDistance(this.node.position,playerPos);//cc.pDistance(v1,v2)返回指定两个向量之间的距离
return dist;
},
onPicked: function(){
this.mainlogic.spawnNewStar();//创建一个星星
this.mainlogic.gainscore();
this.node.destroy();//释放该对象,并释放所有它对其他对象的引用
},
// called every frame,uncomment this function to activate update callback
update: function (dt) {
if(this.getPlayerDistance() < this.pickRadius){
this.onPicked();
return ;
}
var opacityRatio = 1 - this.mainlogic.timer/this.mainlogic.starDuration;
var minOpacity = 50;
//Math.floor()用作向下取整
//Math.ceil()用作向上取整
//Math.round()四舍五入取整
this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
},
});
《Game.js》
cc.Class({
extends: cc.Component,
properties: {
starPrefab: {
default: null,
type: cc.Prefab
},
maxStarDuration: 0,
minStarDuration: 0,
ground: {
default: null,
type: cc.Node
},
player: {
default: null,
scoreDisplay: {
default: null,
type: cc.Label
},
scoreAudio: {
default: null,
url: cc.AudioClip
}
},
// use this for initialization
onLoad: function () {
//获取地平面的y轴坐标,node属性里有x(x轴坐标),y(y轴坐标),width(宽度),height(高度)
this.groundY = this.ground.y + this.ground.height/2;
//初始化定时器
this.timer = 0;
this.starDuration = 0;
//生成一个新的星星
this.spawnNewStar();
this.score = 0;
},
spawnNewStar: function(){
//使用给定的模板在场景中生成一个新节点
var newStar = cc.instantiate(this.starPrefab); //iinstantiate是复制给定的对象
//将新增的节点添加到Canvas节点下面
this.node.addChild(newStar);
//为星星设置一个随机位置
newStar.setPosition(this.getNewStarPosition());
//将Game组件的实例传入星星组件
newStar.getComponent("Star").mainlogic = this; //mainlogic是脚本Star中的一个变量
//重置定时器
this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
this.timer = 0;
},
getNewStarPosition: function(){
var randX = 0;
//根据地平面位置和主角跳跃高度,随机得到一个星星的y坐标
//cc.random0To1()是返回一个0到1之间的随机数
//getComponent获取节点上指定类型的组件,如果节点有附加指定类型的组件,则返回,如果没有则为空,传入的参数也可以是脚本的额名字
var randY = this.groundY + cc.random0To1() * this.player.getComponent("Player").jumpHeight + 50;
//根据屏幕宽度,随机得到一个星星x坐标,randomMinus1To1()是返回一个-1到1之间的随机数
var maxX = this.node.width/2;
randX = cc.randomMinus1To1() * maxX;
//返回星星的坐标
return cc.p(randX,randY);
},uncomment this function to activate update callback
update: function (dt) {
//每帧更新定时器,超过限度还没有生成新的星星,则判定游戏失败
if(this.timer > this.starDuration){
this.gameOver();
return ;
}
this.timer += dt;
},
gameOver: function(){
this.player.stopAllActions();//停止player节点的跳跃动作
cc.director.loadScene("game");//通过场景名进行加载,"game"就是场景的名字,也在资源管理器中进行查看
},
gainscore: function(){
this.score += 1;
//string是Label的一个属性(显示文本内容),toString()是将数字转为字符串
this.scoreDisplay.string = "score: " + this.score.toString();
//播放得分音效
cc.audioEngine.playEffect(this.scoreAudio,false);
}
});
《Player.js》
cc.Class({ extends: cc.Component,properties: { //主角跳跃高度 jumpHeight: 0,//主角跳跃持续时间 jumpDuration: 0,//最大移动距离 maxMoveSpeed: 0,//加速度 accel: 0,//跳跃音效 jumpAudio: { default: null,url: cc.AudioClip } },setJumpAction: function(){ var jumpUp = cc.moveBy(this.jumpDuration,cc.p(0,this.jumpHeight)).easing(cc.easeCubicActionOut()); var jumpDown = cc.moveBy(this.jumpDuration,-this.jumpHeight)).easing(cc.easeCubicActionIn()); var callback = cc.callFunc(this.playJumpSound,this); return cc.repeatForever(cc.sequence(jumpUp,jumpDown,callback)); },playJumpSound: function(){ cc.audioEngine.playEffect(this.jumpAudio,false); },setInputControl: function(){ var self = this; cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD,onKeyPressed: function(keyCode,event){ switch(keyCode){ case cc.KEY.a: self.accLeft = true; self.accRight = false; break; case cc.KEY.d: self.accLeft = false; self.accRight = true; break; } },onKeyReleased: function(keyCode,event){ switch(keyCode){ case cc.KEY.a: self.accLeft = false; break; case cc.KEY.d: self.accRight = false; break; } } },self.node); },// use this for initialization onLoad: function () { this.jumpAction = this.setJumpAction(); this.node.runAction(this.jumpAction); this.accLeft = false; this.accRight = false; this.xSpeed = 0; this.setInputControl(); },// called every frame,uncomment this function to activate update callback 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){ this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed); } this.node.x += this.xSpeed * dt; },});