FlappyBird

2019/09/05 23:55
阅读数 33

学习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啦
 
 
 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部