学习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啦
