cocos游戏FlyBird

article/2025/9/29 19:24:21

cocos creator游戏开发FlyBird

菜单界面Menu

首先建立一个场景（scence）
将你的背景图片添加入canvas并调整canvas的大小来适应你背景图片的大小，最好不要去图片大小，这样会使你的图片变得很丑
添加一个按钮控件
在这里插入图片描述
并给这个场景添加一个脚本

cc.Class({extends: cc.Component,properties: {startBtn: cc.Button},// LIFE-CYCLE CALLBACKS:onLoad () {//点击按钮this.startBtn.node.on('click', this.onBtstart, this);},//点击按钮后跳转到游戏场景onBtstart:function(startBtn){cc.director.loadScene("Game");},start () {},// update (dt) {},
});

游戏界面Game

游戏背景
将两张图片进行拼接到一起，每当前面的图片出了显示界面后再将它移动到后面
在这里插入图片描述

屏幕滚动的脚本

cc.Class({extends: cc.Component,properties: {//两张图片bg1N:cc.Node,bg2N:cc.Node,//速度speed:0,},// LIFE-CYCLE CALLBACKS:onLoad () {},start () {},update (dt) {let dist=this.speed*dt;this.bg1N.x+=dist;this.bg2N.x+=dist;if(this.bg1N.x<=-this.bg1N.width){this.bg1N.x=this.bg2N.x+this.bg2N.width;}if(this.bg2N.x<=-this.bg2N.width){this.bg2N.x=this.bg1N.x+this.bg1N.width;}},
});

管道生成
自己定义一个管道模板，管道在后面随机生成
在这里插入图片描述

cc.Class({extends: cc.Component,properties: {pipePrefab:cc.Prefab},// LIFE-CYCLE CALLBACKS:createPipe(){let PipeN=cc.instantiate(this.pipePrefab);PipeN.parent=this.node;// PipeN.x=this.x;// this.x+=100;//随机生管道[-200,201)//屏幕let width= PipeN.width;let height=PipeN.height;let y=Math.random()*((90-height/2)-(-90+height/2))+(-90+height/2);// 在屏幕外生成飞机let winSize=cc.winSize;PipeN.x=winSize.width/2+100;PipeN.y=y;//管道移动let pipejs=PipeN.getComponent("pipe");pipejs.move();},onLoad () {this.x=0//每隔两秒创建一个管道this.schedule(this.createPipe,2);},start () {},update (dt) {},
});

管道移动并消除

cc.Class({extends: cc.Component,properties: {},// LIFE-CYCLE CALLBACKS:onLoad () {this.speed=-300;},start () {},update (dt) {},move(){let winSize=cc.winSize;cc.tween(this.node).by(5,{position:cc.v2(-(winSize.width+100),0)}).removeSelf().start()},});

小鸟飞翔和碰撞（给小鸟添加碰撞组件和物理组件）
碰撞组件检测碰撞发生从而结束游戏
物理组件是给小鸟一个重力效果

cc.Class({extends: cc.Component,properties: {},// LIFE-CYCLE CALLBACKS:onLoad () {cc.director.getPhysicsManager().enabled=true;//检测碰撞let manager=cc.director.getCollisionManager();manager.enabled=true;manager.enabledDebugDraw=true;manager.enabledDrawBoundingBox=true;}, start () {//检测键盘是否按下this.body=this.getComponent(cc.RigidBody);cc.systemEvent.on('keydown',this.onSpaceDown,this);},onSpaceDown(event){let v= this.body.linearVelocity;v.y+=100;this.body.linearVelocity=v;},//碰撞到管道onCollisionEnter:function(other,self){this.node.removeFromParent();cc.director.loadScene("GameOver");},update (dt) {},});

在这里插入图片描述
碰撞的话这里我是添加了三种碰撞物理分别是管道、小鸟、上下边界

游戏结束GameOver

cc.Class({extends: cc.Component,properties: {restarN:cc.Button,},// LIFE-CYCLE CALLBACKS:onLoad () {this.restarN.node.on('click', this.restarGame, this);},//切换到开始界面，重新游戏restarGame:function(restarN) {cc.director.loadScene("Menu");},start () {},// update (dt) {},
});