最近小游戏做完了，记录一下。开发工具cocos creator，纯前端。
游戏介绍
小游戏一共只有两个游戏场景，分别是开始界面和游戏界面。开始界面
游戏界面
游戏实现
- 游戏背景无限滚动（用两张背景图交替往上滚动，实现游戏背景一直在动）
- 自动生成新的阶梯以及小球和阶梯的碰撞事件
- 屏幕触碰事件（控制小球左右移动）
- 小球每下降3000像素（没搞懂单位是什么），分数加一
游戏制作
一、游戏背景无限滚动背景滚动主要靠两张背景图片实现，就是轮流往上移动。
bg节点下挂了两个背景，通过给bg节点挂个脚本，让back1和back2一直往上移动，当移动到一定距离后就把上面的图片移动到下面，从而实现背景无限滚动。
主要实现滚动代码如下：
update(deltaTime: number) {
let n = this.node.parent.getComponent(main).n; //获取主脚本里的变量n，用来控制滚动的速度，随着游戏的进行，n的值会越来越大，即滚动速度会越来越快，增加游戏难度。
this.back1.setPosition(0,this.back1.position.y+1+n,0);//实现back1背景滚动
this.back2.setPosition(0,this.back2.position.y+1+n,0);//实现back2背景滚动
console.log(this.back1.position);
if (this.back1.position.y>=3000){//当位置超过3000就把上面的背景移动到下面，实现无限滚动
this.back1.position = new Vec3(0,-3000,0);
}
if(this.back2.position.y>=3000){
this.back2.position = new Vec3(0,-3000,0);
}
}
二、自动生成新的阶梯以及小球和阶梯的碰撞事件
生成阶梯通过主脚本控制，游戏中有多种阶梯，我为每一种阶梯分别写了一个脚本（应该可以公用一个，懒得改了）。即有一个公用的脚本控制不同阶梯的生成，每一个阶梯都有自己专有的脚本来控制关于自身的事件。
游戏主脚本控制随机生成阶梯代码：
floors:Prefab[] = [];//用来存不同的阶梯的
generalfloor(){
let floor = instantiate(this.floors[Math.floor(Math.random()*(this.floors.length-1))]);//随机生成一种阶梯
floor.parent = this.node;
floor.position = new Vec3(randomRange(-380,380),-1000,0);//生成阶梯的位置随机
}
这种是最普通的阶梯，只需要随着背景一直滚动即可。
主要实现代码：
update(deltaTime: number) {
let self = this;
let n = this.node.parent.getComponent(main).n;//同样从主脚本里获取n值，用来控制滚动速度
this.node.position = new Vec3(this.node.position.x,this.node.position.y+1+n,0);
if (this.node.position.y>=1000){//当阶梯从下到上超过游戏屏幕后就需要把节点删除了
setTimeout(()=>{
self.node.destroy();
},0);
}
}
这种比第一种特殊一点，需要实现碰撞后会由原本实心的阶梯变成半透明的阶梯，再消失。整个从实心到消失的时间设置的是三秒。
制作动画自己百度吧，两秒就能学会，直接看代码。
- 首先需要我们制作阶梯由实心到半透明的动画
- 之后节点注册碰撞函数，监听碰撞信息，当碰撞后就调用动画，让它变半透明
- 最后我们删除节点，实现阶梯消失
start() {//在开始阶段注册碰撞监听 let collider = this.getComponent(Collider2D); if (collider) { collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this); } } onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) { // 只在两个碰撞体开始接触时被调用一次 if(otherCollider.node.name = "ball"){//只有小球碰撞时才会运行动画 this.getComponent(Animation).play();//动画运行 setTimeout(()=>{ if(this.node){ this.node.active = false;//三秒后让节点失效 } },3000) } }update(deltaTime: number) {//实现阶梯上升，达到一定高度删除阶梯 let self = this; let n = this.node.parent.getComponent(main).n; this.node.position = new Vec3(this.node.position.x, this.node.position.y + 1 + n, 0); if (this.node.position.y >= 1000) { setTimeout(() => { self.node.destroy(); }, 0); } }
这里最大的坑就是this.node.active = false;//三秒后让节点失效，一开始没考虑全面，想着动画运行完直接删除节点得了。自己测试中发现，有时候会调用destroy失败，节点不存在。
是因为没考虑到当碰撞后，还没到三秒删除节点的时间，此时节点的高度超过1000，在updata()函数里已经把节点删除了，再等到三秒后节点就不存在了，自然删除失败。
这一种阶梯看起来像弹簧一样，可以实现跳跃功能的。主要是碰撞后给小球一个向上的速度，水平速度不变。
主要代码如下：
onBeginContact(){//碰撞回调函数
this.donghua.play();//碰撞后开始运行动画
this.ball.getComponent(RigidBody2D).linearVelocity = new Vec2(this.ball.getComponent(RigidBody2D).linearVelocity.x,20);//给小球一个向上的速度，水平速度不变
}
update(deltaTime: number) {//实现阶梯一直向上移动，超过一定高度删除阶梯
let self = this;
let n = this.node.parent.getComponent(main).n;
this.node.position = new Vec3(this.node.position.x, this.node.position.y + 1+n, 0);
if (this.node.position.y >= 1000) {
setTimeout(() => {
self.node.destroy();
}, 0);
}
}
这种阶梯一碰就game over，会调用游戏的暂停函数，然后弹出来页面让你选择复活还是回到首页。
主要代码实现：
onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
// 只在两个碰撞体开始接触时被调用一次
if(otherCollider.node.name == "ball"){//碰到小球就调用主脚本的stopgame函数用来暂停游戏
this.node.parent.getComponent(main).stopgame();
}
}
update(deltaTime: number) {//实现阶梯上升及超过一定高度删除阶梯
let self = this;
let n = this.node.parent.getComponent(main).n;
this.node.position = new Vec3(this.node.position.x, this.node.position.y + 1 + n, 0);
if (this.node.position.y >= 1000) {
setTimeout(() => {
self.node.destroy();
}, 0);
}
}
stopgame(){
let alert = instantiate(this.floors[6]);//生成上面图片显示的弹窗
alert.setPosition(new Vec3(0,0,0));
alert.parent = this.node;
director.pause();//暂停函数
}
弹窗有两个按钮复活和首页。
复活按钮实现：
click(button:Button){//复活按钮的回调函数
director.resume();//游戏恢复
let ball = this.node.parent.parent.getChildByName("ball");//小球回到起始位置
ball.setPosition(new Vec3(0,300,0));
ball.getComponent(RigidBody2D).linearVelocity = new Vec2(0,0);
this.node.parent.destroy();//删除弹窗
}
回到首页按钮实现：
home(button: Button) {
director.loadScene("start");//切换到首页开始游戏的场景
this.node.parent.destroy();//删除弹窗
}
这个阶梯是向右移动阶梯，碰撞过程中会让小球向右速度每帧加0.2。
主要代码实现：
onPreSolve(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {//碰撞回调函数
let x = otherCollider.getComponent(RigidBody2D).linearVelocity.x;
otherCollider.getComponent(RigidBody2D).linearVelocity = new Vec2(x+0.2,0);//每次向右速度加0.2
}
update(deltaTime: number) {//同上，懒得打说明了
let self = this;
let n = this.node.parent.getComponent(main).n;
this.node.position = new Vec3(this.node.position.x, this.node.position.y + 1+n, 0);
if (this.node.position.y >= 1000) {
setTimeout(() => {
self.node.destroy();
}, 0);
}
}
这个阶梯是向左移动阶梯，碰撞过程中会让小球向左速度每帧加0.2。
主要代码实现：
onPreSolve(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {//回调函数
let x = otherCollider.getComponent(RigidBody2D).linearVelocity.x;
otherCollider.getComponent(RigidBody2D).linearVelocity = new Vec2(x - 0.2, 0);//每帧向左速度加0.2
}
update(deltaTime: number) {//同上
let self = this;
let n = this.node.parent.getComponent(main).n;
this.node.position = new Vec3(this.node.position.x, this.node.position.y + 1+n, 0);
if (this.node.position.y >= 1000) {
setTimeout(() => {
self.node.destroy();
}, 0);
}
}
最后是游戏最上面的尖刺和小球掉到最底下从屏幕消失，二者都会触发游戏结束。
主要代码实现：
onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {//碰撞到最上面的尖刺后游戏结束
if(otherCollider.node.name == "ball"){
this.node.parent.getComponent(main).stopgame();
}
}
if (this.ball.position.y <= -1000) {//小球位置低于1000，即消失在屏幕里游戏结束
this.stopgame();
}
三、屏幕触碰事件
游戏主要通过触碰实现小球的向左，向右移动。实现方式很简单，注册监听函数，判断当前触摸点在左边还是右边即可。
主要代码实现：
movestart(touch:EventTouch){//触碰一开始的回调函数
let position = touch.getUILocation();
let x = this.node.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(position.x,position.y,0)).x;//获取碰撞点的水平坐标
if(x>0){
this.ball.getComponent(RigidBody2D).linearVelocity = new Vec2(20, this.ball.getComponent(RigidBody2D).linearVelocity.y);//给向右20速度
}else{
this.ball.getComponent(RigidBody2D).linearVelocity = new Vec2(-20, this.ball.getComponent(RigidBody2D).linearVelocity.y);//给向左20速度
}
}
moveend(touch:EventTouch){//触碰结束的回调函数
this.ball.getComponent(RigidBody2D).linearVelocity = new Vec2(0, this.ball.getComponent(RigidBody2D).linearVelocity.y);//立即停止，水平速度设0，垂直速度不影响
}
四、分数实现
用一个lable标签记录当前的分数。
主要代码实现：
update(deltaTime: number) {
this.score+=3;
let x = this.score/3000;
this.getComponent(Label).string = Math.floor(x).toString();
}
计算方式自己看吧，我也不知道具体怎么算的，反正这样写分数增加的很慢（纯要求难度）。
总结
第一次做出来游戏，挺有成就感的（虽然游戏素材都是copy别人的，游戏玩法也是抄袭的，但是整个游戏代码和框架是我自己做的，这也很强了有没有）。第一次做，大部分场景的实现还是靠百度的，虽然有官方的使用文档但一开始也看不懂好吧。
一回生二回熟，下次做一个带后端的，纯前端唯一的好处就是反应快，不过微信小游戏发布最大只能4m，这一次差一点就超了。
小游戏还在审核过程中，没发布，项目开源到我的github上了，感兴趣的可以看看。
github地址：https://github.com/nibabashilkk/100-floors-down
电脑没装git，只能传个压缩包了。
本文链接：https://xiaoliu.life/606.html文章来源：https://www.toymoban.com/news/detail-636429.html
转载请注明转载自：爱加班的小刘文章来源地址https://www.toymoban.com/news/detail-636429.html
到了这里，关于从0开始做游戏—-cocos引擎的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
