CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏


CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
前言

源码在最下面!!!
游戏完成后的样子
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
做这个游戏只用单色的精灵就可以,如果想让游戏看起来美观还可以自己换

CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
对于这个游戏来说canvas的宽和高这样设置最佳

1、开启物理和碰撞

首先先新建场景,取名为Game
然后新建脚本取名为Collision

onLoad(){
let manager = cc.director.getCollisionManager();//获取碰撞引擎
manager.enabled = true;//开启碰撞引擎
}

onload这么写,作用是打开碰撞引擎

然后再新建一个脚本,取名为Physize

onLoad(){
let manager=cc.director.getPhysicsManager();//声明变量
manager.enabled=true;//开启物理引擎
manager.gravity=cc.v2(0,-1000);//下落速度
}

onload这么写,作用是打开物理引擎
把两个脚本都挂到canvas上面

二、做箱子

首先先创建一个空节点,取名为BoxParent
然后在BoxParent下面新建一个单色精灵,取名为groud
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
把属性按照这个调好,给groud添加RigidBody、PhysicsBoxCollider和BoxCollider组件
属性按照图片调好
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
地面就算做完了
把groud复制粘贴一份,改名为box,把Y坐标改成100,并且把RigidBody的类型设置成动态(box的父节点也是BoxParent)
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
box光有这些是不够的,我们得给他添加一个移动的动画
在box节点上新建Clip动画文件,取名为move,并且添加Animation组件
在属性列表里面按Add Property添加X属性
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
分三个关键帧
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
0:00的时候X是-120
0:10的时候X是120
0:20的时候X是-120
WrapMode选为loop
速度根据自己喜欢选(可以按照我选的速度选)CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
然后记得在动画组件里面指定动画CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
接下来就开始写脚本了,新建一个脚本取名为Box

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

@property(cc.RigidBody)
self:cc.RigidBody = null;//自身刚体

@property(cc.PhysicsBoxCollider)
self_box:cc.PhysicsBoxCollider = null;//自身物理碰撞

@property(cc.BoxCollider)
self_collision:cc.BoxCollider = null;//自身碰撞

@property(cc.Node)
me:cc.Node = null;//自身

@property(cc.Animation)
move:cc.Animation = null;//箱子移动时的动画

isdown:boolean = false;//是否在向下降

onLoad(){
this.self.type = cc.RigidBodyType.Static;//开始时刚体是静止的
this.move.play("move");//播放移动动画
}

update(){
if(this.isdown == true){//如果箱子正在下降
this.self.type = cc.RigidBodyType.Dynamic;//刚体变成动态的
}
}

}

把Box脚本挂到box节点上
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
声明的这些组件都是Box节点本身
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
一个一个绑定就好了
然后在资源管理器的assets下面创建文件夹Prefabs来存放预制体
把刚刚做好的box节点拖到资源管理器的assets下面的文件夹Prefabs里

三、写主控制器

在写主控制器之前先创建一个Lable,改名为score,用来记分数
把Lable的Y坐标改成300

我们需要一个主控制器来对游戏进行控制
新建一个脚本,取名为MainController

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

@property(cc.Prefab)
box:cc.Prefab = null;//预制体 箱子

@property(cc.Node)
xiangji:cc.Node = null;//相机

@property(cc.Node)
boxParent:cc.Node = null;//箱子的父节点

@property(cc.Node)
box_self:cc.Node = null;//最开始的箱子自身

@property(cc.Label)
score_lb:cc.Label = null;//分数

@property(cc.Node)
lb_score:cc.Node = null;//分数

isok:boolean = true;//是否可以生成新的箱子

score:number = 0;//分数

onLoad(){
this.xiangji.on(cc.Node.EventType.TOUCH_START,this.down,this);//给相机在触摸的时候添加点击事件
this.xiangji.width = this.node.width;//相机的宽和高和屏幕的宽和高一样
this.xiangji.height = this.node.height;
}

update(dt:number){
this.score_lb.string = "分数:" + this.score.toString();//每秒获取最新分数
this.lb_score.y = this.xiangji.y+(this.xiangji.height/2)-this.lb_score.height-10;//介绍和分数的最佳位置
//this.jieshao.y = this.xiangji.y-(this.xiangji.height/2)+this.jieshao.height+10;
}

down(){//箱子下降
if(this.isok == true){
let box = this.boxParent.children[this.boxParent.childrenCount-1].getComponent("Box");//获取box组件
box.isdown = true;//箱子开始下降
box.move.stop("move");//停止播放移动动画
console.log("点击了相机");
this.scheduleOnce(function() {
this.shengcheng();
},0.5);//为了防止箱子堆到一块,在0.5秒后生成新的箱子
this.score += Math.floor(Math.random()*3);//随机加分数
this.isok = false;
this.scheduleOnce(function() {
this.isok = true;
},0.5);//0.5秒后才可以继续生成新箱子
}
}

shengcheng(){//生成新箱子
let node = cc.instantiate(this.box)//你要复制的节点名称
node.parent = this.boxParent;//复制节点的父节点是什么
node.setPosition(cc.v2(0,(this.xiangji.y+this.xiangji.height/2)-this.box_self.height-50));//复制的节点的位置

let pos : cc.Vec2[] = [];
pos.push(cc.v2(this.xiangji.position));
pos.push(cc.v2(0,this.xiangji.y+this.box_self.height));

this.xiangji.runAction(cc.sequence(//相机的移动
cc.cardinalSplineTo(0.8,pos,0.5),
cc.callFunc(function(){
//执行动画时的函数
})
));

console.log("生成了新的箱子");
}

}

这是脚本里的代码,把MainController脚本挂到canvas上面
然后开始绑定节点
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
游戏场景现在应该是这样的

四、添加障碍物

在相机(Main Camera)下新建两个单色精灵
这样设置大小CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
然后把Y坐标都改成0,然后把其中一个X坐标改成-250,另一个把X坐标改成250
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
然后应该是这样的
在两个障碍物上添加盒子碰撞组件
CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
并且设置好大小
然后再来写一个脚本,取名为CollisionCallback

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

onCollisionEnter(other,self){//当碰撞产生的时候调用//other 产生碰撞的另一个碰撞组件self 产生碰撞的自身的碰撞组件
console.log('onCollisionEnter')
if(other.node.name == "box"){//如果碰撞的节点是box游戏就结束
this.GameOver();
}
}

GameOver(){
console.log("游戏结束了");
cc.director.loadScene("Finish");//游戏结束场景跳转
}

}

然后把CollisionCallback脚本挂到两个障碍物上面

五、游戏结束

新建一个场景取名为Finish,然后创建一个Lable,在Lable的String上面写GameOver
再新建一个脚本取名为Back,写一个onbtn方法,然后挂到canvas上面

onbtn(){
cc.director.loadScene("Main");
}

然后在场景里新建一个按钮,把刚刚写的onbtn函数绑定到按钮上

游戏大体基本就完成了

Cocos技术交流Q群:1130122408
欢迎进群闲聊、技术交流都欢迎

源码在群里

制作不易,感谢你的观看
Thank You~~

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » CocosCreator叠箱子游戏(教程 + 源码)TS实现小游戏
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏