FlappyBird

mac2022-06-30 71

学习CocosCreator有段时间了，现在花了两天时间写了个像素鸟的小游戏，这个游戏之前又看到过，但是不知道怎么又下架了，之前还是蛮火的游戏，想起来后去网上看了看，原来是因为侵犯了超级玛丽的游戏元素，都是像素级小游戏，嗯，国外人的版权意识还是挺高的。好了，题外话就到这了，开始切入正题吧。

写这个游戏也不难，最主要的是思路，该怎么去写，我也在网上看到过 C++版的，易语言的，Cocos2d的，都挺多的，都是大神啊

我这个是Creator版的，跟Cocos2d有点差别，但是差别又不大

好了，上代码（本来是想截图的，但是想想还是要对得起自己，还是手敲吧）

这个游戏我是用 ts 写的，外加CocosCreator

onLoad(){

　　// 获取到小鸟，管道，背景，陆地的节点，这些this的都是先在前面声明了的

　　// 小鸟　　this.bird = cc.find('layout_wrap/node_bird', this.node) 　　// 背景　　this.bg = cc.find('layout_wrap/layout_bg', this.node) 　　// 管道　　this.pipe = cc.find('layout_wrap/layout_cont', this.node) 　　// 陆地　　this.land = cc.find('layout_wrap/layout_land', this.node) 　　// 初始化数据　　this.initData()

}

// 这里去初始化一下，一些声明的游戏数据

private initData(): void { 　　this.time = 0 // 帧率（每帧调用，模拟小鸟扇动翅膀）　　this.speed = 0 // 速度　　this.distance = 150 // 管道距离　　this.rateSpeed = 1 // 移速　　this.upSpeed = 2 // 加速　　this.slowSpeed = 0.06 // 减速　　// 监听运行事件　　let wrap = cc.find('layout_wrap', this.node) 　　wrap.on(cc.Node.EventType.TOUCH_START, this.runnIng.bind(this), this) 　　// 开始界面　　this.layoutstar = cc.find('layout_wrap/layout_star', this.node) 　　// 开始按钮　　this.starbtn = cc.find('layout_content/button_play', this.layoutstar) 　　this.addClickEvent(this.starbtn, 'onClickStar') 　　// 暂停按钮　　let pausebtn = cc.find('node_score/button_pause', wrap) 　　this.addClickEvent(pausebtn, 'onClickPause') 　　// 继续按钮　　let resumebtn = cc.find('layout_pause/button_resume', wrap) 　　this.addClickEvent(resumebtn, 'onClickResume') 　　// 游戏结束，重新开始　　let again = cc.find('layout_over/node_content/button_play', wrap) 　　this.addClickEvent(again, 'onClickAgain') 　　// Get Ready提示节点　　this.ready = cc.find('node_score/node_ready', wrap) 　　// 游戏结束　　this.gameover = cc.find('layout_over', wrap) 　　// 加载管道　　this.addPipe() 　　// 碰撞系统　　let manager = cc.director.getCollisionManager() 　　manager.enabled = true } //下面开始写功能 // 点击开始 protected onClickStar(): void { 　　// 缩放界面　　let act = cc.callFunc(() => { 　　　　this.layoutstar.active = false 　　　　this.layoutstar.destroy() 　　}) 　　// 这里用到动作系统的缩放和渐隐，算是一点点动画效果吧　　let seq = cc.sequence(cc.spawn(cc.scaleTo(0.3, 0), cc.fadeOut(0.3)), act) 　　if (this.layoutstar) { 　　　　this.layoutstar.runAction(seq) 　　} 　　// 这里是避免忘记吧结束界面没有隐藏掉，　　if (this.gameover) { 　　　　this.gameover.active = false 　　} } // 点击运行 private runnIng(): void { 　　if (this.ready.active && !this.layoutstar.active) { 　　　　// 隐藏Get Ready提示节点　　　　this.ready.active = false 　　　　// 显示update， ison是作为update的开关　　　　this.ison = true 　　} 　　this.speed = 2.5 // 给小鸟一个向上的加速度 } // 加载管道，这里的管道是通过预制体来加载上去的 private addPipe(): void { 　　this.LoadPrefabs('node_pipe', (n: cc.Node) => { 　　　　if (!n) { 　　　　　　return 　　　　} 　　　　for (let i = 0; i < 4; i++) { 　　　　// 复制节点　　　　let copy = cc.instantiate(n) 　　　　// 插入节点　　　　this.pipe.addChild(copy, i) 　　　　// 调整管道位置　　　　copy.x = this.node.width / 2 + (this.distance + copy.width) * i 　　　　// 480~720 　　　　copy.y = (Math.random() * 0.5 + 1) * 480 　　　　if (i > 0) { 　　　　　　// 相邻管道之间的差距不超过120 　　　　　　this.distanceY(i, i - 1) 　　　　} 　　　　} 　　}) } // 移动背景 private moveBg(bgs: cc.Node): void { 　　bgs.x = bgs.x - 1 　　// 当背景移动出屏幕后，将这个背景再加到两个背景的前面　　// 像素对齐，所以bg.x为一个确切数　　if (bgs.x < -614) { 　　　　bgs.x = 1228 　　　　// 调整节点顺序　　　　if (bgs == this.bg.children[0]) { 　　　　this.bg.children[1].zIndex = 0 　　　　this.bg.children[2].zIndex = 1 　　　　this.bg.children[0].zIndex = 2 　　　　} else if (bgs == this.bg.children[1]) { 　　　　this.bg.children[2].zIndex = 0 　　　　this.bg.children[0].zIndex = 1 　　　　this.bg.children[1].zIndex = 2 　　　　} else if (bgs == this.bg.children[2]) { 　　　　this.bg.children[0].zIndex = 0 　　　　this.bg.children[1].zIndex = 1 　　　　this.bg.children[2].zIndex = 2 　　　　} 　　} } // 移动管道 private movePipe(pipes: cc.Node): void { 　　pipes.x = pipes.x - 2 　　// 当管道移动一个屏幕宽后，再将这个管道的位置改变到屏幕右侧　　if (pipes.x < -(pipes.width + this.node.width / 2)) { 　　　　pipes.x = 515 　　　　// 480~1000 　　　　pipes.y = (Math.random() + 1) * 520 - 40 　　　　// 相邻管道之间的差距不超过120 　　　　if (pipes == this.pipe.children[0]) { 　　　　this.distanceY(0, 3) 　　　　} else if (pipes == this.pipe.children[1]) { 　　　　this.distanceY(1, 0) 　　　　} else if (pipes == this.pipe.children[2]) { 　　　　this.distanceY(2, 1) 　　　　} else if (pipes == this.pipe.children[3]) { 　　　　this.distanceY(3, 2) 　　　　} 　　} } // 移动陆地 private moveLand(lands: cc.Node): void { 　　lands.x = lands.x - 2 * this.rateSpeed 　　// 当陆地移动一个屏幕宽后，再将这个陆地的位置改变到屏幕右侧　　if (lands.x < -(this.node.width)) { 　　　　lands.x = this.node.width - 2 * this.rateSpeed 　　} } // 相邻管道之间的Y方向差距 private distanceY(a: number, b: number): void { 　　if (Math.abs(this.pipe.children[a].y - this.pipe.children[b].y) > 140) { 　　　　this.pipe.children[a].y = this.pipe.children[b].y + ((Math.random() * 2 - 1) * 140) 　　　　if (this.pipe.children[a].y > 1000) { 　　　　this.pipe.children[a].y = this.pipe.children[b].y - (Math.random() * 140) 　　　　} else if (this.pipe.children[a].y < 480) { 　　　　this.pipe.children[a].y = this.pipe.children[b].y + (Math.random() * 140) 　　　　} 　　} } // 最主要的是这个思路，要形成流畅的效果，就要每帧都去调用它， update(dt: number) { 　　// 终止移动　　if (this.gameover.active) { 　　　　this.ison = false 　　} 　　// 帧率切换节点的显示，模拟扇翅膀　　if (this.ison) { 　　　　let timeTemp = this.time + dt 　　　　this.time = timeTemp 　　　　if (this.time > 0.5) { 　　　　　　if (this.bird.children[0].active) { 　　　　　　this.bird.children[0].active = false 　　　　　　this.bird.children[1].active = true 　　　　} 　　　　else if (this.bird.children[1].active) { 　　　　　　this.bird.children[1].active = false 　　　　　　this.bird.children[2].active = true 　　　　} 　　　　else if (this.bird.children[2].active) { 　　　　　　this.bird.children[2].active = false 　　　　　　this.bird.children[3].active = true 　　　　} 　　　　else if (this.bird.children[3].active) { 　　　　　　this.bird.children[3].active = false 　　　　　　this.bird.children[0].active = true 　　　　} 　　　　// 别忘了要重置为零　　　　this.time = 0 　　} 　　// 给定小鸟的下降减速　　this.speed = this.speed - 0.06 　　// 小鸟在y轴上的移动　　this.bird.y = this.bird.y + this.speed 　　// 小鸟上飞改变方向, 通过改变旋转方向来实现小鸟的朝向　　this.bird.angle = this.speed * 10 　　// 移动背景　　this.moveBg(this.bg.children[0]) 　　this.moveBg(this.bg.children[1]) 　　this.moveBg(this.bg.children[2]) 　　// 移动管道　　this.movePipe(this.pipe.children[0]) 　　this.movePipe(this.pipe.children[1]) 　　this.movePipe(this.pipe.children[2]) 　　this.movePipe(this.pipe.children[3]) 　　// 移动陆地　　this.moveLand(this.land.children[0]) 　　this.moveLand(this.land.children[1]) 　　} } // 这是挂载在主场景上的脚本，画面和功能做出来了，但是如果没有结束，那么相信这个游戏也不会太有趣

// 如何来结束游戏？那就是当小鸟装上管道后，就结束游戏，如果没有，那就加分啦

// 这里用到的是碰撞去写的，当然也可以去用其他的方法去实现

// 这是挂载在小鸟的这个节点上的脚本

// 加载的时候会初始分数

onLoad() { 　　// 分数　　this.gameMain.Score = 0 　　// 分数节点　　this.topScore = cc.find('node_score/label_score', this.node.parent) } // 这里用到的碰撞，在小鸟，管道，和中间的空隙都会绑定碰撞的组件 // 当小鸟撞在管道上，游戏结束， // 小鸟通过中间的空隙，加一分 onCollisionEnter(other, self) { 　　if (other.tag == 2) { 　　　　this.gameMain.Score++ 　　} else if (other.tag == 1) { 　　this.gameOver() 　　} 　　// 显示分数　　this.topScore.getComponent(cc.Label).string = this.gameMain.Score.toString() } // 结束游戏 private gameOver(): void { 　　// 显示结束游戏的界面　　let gameover = cc.find('layout_over', this.node.parent) 　　gameover.active = true 　　// 渐显　　gameover.runAction(cc.fadeTo(0.5, 255)) 　　// 分数　　let scorelabel = cc.find('node_content/sprite_panel/label_score', gameover).getComponent(cc.Label) 　　scorelabel.string = this.gameMain.Score.toString() 　　// 重置分数　　this.scheduleOnce(() => { 　　　　this.gameMain.Score = 0 　　}, 0.5) }

好啦，一个简单的单机像素鸟就做好了，想要更详细的源码的小伙伴可以私聊我哦~~ 下面放出效果图，唉，没有挂载服务器，无法直接上传到web平台，只能放出gif啦

转载于:https://www.cnblogs.com/zhen-prz/p/11470545.html