【Cocos Creator 實戰教程(2)】——天天酷跑(動畫、動作相關)
阿新 • • 發佈:2019-01-09
轉載請保留原文連結,個人公眾號:xinshouit(新手程式設計師),歡迎關注
準備工作
把背景圖拉長,很長很長的那種。。。。一會我們要讓它滑動起來
背景動畫
為背景節點新增滾動動畫
現在背景就迴圈滾動起來了(圖是我後來截的,這步猴哥還沒登場呢)
猴哥動畫
導彈動畫
這裡我們要新增兩個Clip,一個是高空導彈,一個是低空導彈
這裡我們要給導彈加幾個幀事件,在導彈導彈猴哥頭上的幾個幀上新增judgeDown事件,當導彈到達猴哥頭上,猴哥還沒低頭,那就遊戲結束,低空導彈同理,需要猴哥跳起
結束場景
遊戲指令碼
Game.js
cc.Class({
extends: cc.Component,
properties: {
king:{
default:null,
type:cc.Node,
}
},
onLoad: function () {
var self = this;
//左側蹲,右側跳
this.node.on('touchstart',function(event){
var visibleSize = cc.director.getVisibleSize();
if (event.getLocationX()<visibleSize.width/2){
self.king.getComponent('King').down();
}else{
self.king.getComponent('King').jump();
}
});
//左側鬆手就恢復跑的狀態
this.node.on('touchend',function(event){
var visibleSize = cc.director.getVisibleSize();
if (event.getLocationX()<visibleSize.width/2){
self.king.getComponent('King').downRelease();
}else{
// self.king.getComponent('King').jump();
}
});
},
});
King.js
cc.Class({
extends: cc.Component,
properties: {
// 主角跳躍高度
jumpHeight: 0,
// 主角跳躍持續時間
jumpDuration: 0,
//主角狀態
state:'run',
},
//跑
run:function(){
this.getComponent(cc.Animation).play('king_run');
this.state = 'run';
},
//跳
jump:function(){
if(this.state == 'run'){
this.state = 'jump';
this.getComponent(cc.Animation).stop();
this.node.runAction(cc.sequence(cc.jumpBy(this.jumpDuration, cc.p(0,0), this.jumpHeight, 1),
cc.callFunc(function() {
this.run();
}, this)));
}
},
//彎腰跑
down:function(){
if(this.state == 'run'){
this.state = 'down';
this.node.runAction(cc.scaleTo(0.05, 1, 0.5));
}
},
//腰累了
downRelease:function(){
if(this.state == 'down'){
this.node.runAction(cc.sequence(cc.scaleTo(0.05, 1, 1),
cc.callFunc(function() {
this.run();
}, this)));
}
},
});
Bomb.js
cc.Class({
extends: cc.Component,
properties: {
king:{
default:null,
type:cc.Node,
}
},
//判斷高空導彈來時,猴哥是否蹲下(響應之前設定的幀事件)
judgeDown:function(){
if(this.king.getComponent('King').state == 'down'){
console.log("down---------------------");
}else{
cc.director.loadScene('Over');
}
},
//判斷低空導彈來時,猴哥是否跳起
judgeJump:function(){
if(this.king.getComponent('King').state == 'jump'){
console.log("jump---------------------");
}else{
cc.director.loadScene('Over');
}
},
onLoad: function () {
let self = this;
//每隔2秒隨機發射高空和低空導彈
this.schedule(function(){
if(Math.random()>0.5){
this.getComponent(cc.Animation).play('bomb_high');
}else{
this.getComponent(cc.Animation).play('bomb_low');
}
},3);
},
});
Over.js
cc.Class({
extends: cc.Component,
properties: {
},
reTry: function(){
cc.director.loadScene('Game');
},
onLoad: function () {
},
});