cocos creator第一个星星游戏
本人也是第一次接触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,
type: cc.Node
},
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);
},
// called every frame, 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, cc.p(0, -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;
},
});