cocos creator小游戏案例之趣味套牛

趣味套牛

0. 思路

• 搭建基本背景
• 奔跑的牛
• 套牛的绳子
• 套牛成功的判定
• 结算
• 重新开始
• 特效,(音效,粒子)

1. 基本背景

• 按钮
  • 添加 button 组件
  • transition: sprite

2. 牛组件cow.js

- 设置皮肤数组

// cow.js
var cow_skin_type = cc.Class({
    name: 'cow_skin_type',
    properties: {
        cow_status: {
            type: cc.SpriteFrame,
            default: []
        }
    }
})
cc.Class({
    extends: cc.Component,
    properties: {
        cow_skin: {
            type: cow_skin_type,
            default: []
        }
    }
});

- 随机生成牛

// cow.js
// 1. 随机生成牛
var cow_type = Math.random() * 3 // [0, 3)
this.cow_type = Math.floor(cow_type) // 取整
if (this.cow_type >= 3) {
    this.cow_type = 0
}

- 帧动画

• 添加帧动画组件

this.anim_com = this.node.addComponent('frame_anim')

• 播放

cowWalk () {
    this.anim_com.sprite_frames = this.cow_skin[this.cow_type].cow_status
    this.anim_com.duration = 0.5
    this.anim_com.play_loop()
}

• 移动组件

// 移动速度 this.speed_x = Math.random() * 200 + 200
update (dt) {
    var move_x = -(this.speed_x * dt)
    this.node.x += move_x
    if (this.node.x < -200) {   // 超出屏幕
        // 移除组件
        this.node.removeFromParent()
    }
}

3. 奔跑game.js

- 预制

将cow保存到Prefab文件夹中 --> 声明 -->拖拽文件

// 声明
properties: {
    cow_prefab: {
        type: cc.Prefab,
        default: null
    }
}

- 实例化

startGame () {
    // [3, 6)秒生产一头牛
    this.schedule(this.produceCow, Math.random()*3+3)
},
produceCow () {
    var cow = cc.instantiate(this.cow_prefab) // 实例化(复制)一头牛
    this.node.addChild(cow)	// 添加到节点中
    cow.x = 500	// 初始坐标
    cow.y = -140
}

4. 绳子rope.js

- 设置绳子变量

properties: {
  rope_empty: {	// 空绳
    type: cc.SpriteFrame,
    default: null
  },
  rope_cow: {	// 绳子数组
    type: cc.SpriteFrame,
    default: []
  }
}

###　- 伸出绳子

• is_throw 节流

onLoad () {
    this.is_throw = false
},
throwRope () {
    if (this.is_throw) return
    this.is_throw = true
    
    // 伸出
    var top = cc.moveTo(0.5, cc.v2(0, 0))  // (duration, v2)
    var topFn = cc.callFunc(function() {

    }.bind(this), this.node)
    // 缩进
    var finish = cc.moveTo(0.5, cc.v2(0, -500))  
    var finishFn = cc.callFunc(function() {
        this.is_throw = false
    }.bind(this), this.node)
    
    var seq = cc.sequence([top, topFn, finish, finishFn])
    this.node.runAction(seq)
},

5. 套牛

思路 判定绳子扔到最高点时,牛的位置

- 牛

• 生产牛时放入数组中this.cows.push(cow)

• 遍历生产的牛,判断其位置[90, 130]

• 若位置正确,

  • 获取牛的皮肤索引this.cows[i].getComponent('cow').cow_type
  • 删除该牛

  // game.js
  catchCow () {
      var type_index = -1
      for (var i = 0; i < this.cows.length; i++) {
          if (this.cows[i].x > 90 && this.cows[i].x < 130) {
              // 当前牛的cow.js上的cow_type值
              type_index = this.cows[i].getComponent('cow').cow_type
              // 删除该牛
              this.cows[i].removeFromParent()
              this.cows.splice(i, 1)
              
              return type_index
          }
      }
      return -1
  }
  

- 绳

• 绳子到达顶点

  // this.game = cc.find('Home').getComponent('game')
  var topFn = cc.callFunc(function() {  // 抛出到顶点时的回调函数
      var index = this.game.catchCow()
      if (index !== -1) { // 套到了牛
          // 换为牛&绳
          this.setRope(index)
      }
  }.bind(this), this.node)
  

• 换为牛&绳

  setRope(index) {
      var rope_sprite = this.node.getComponent(cc.Sprite)
      rope_sprite.spriteFrame = this.rope_cow[index]
  }
  

• 套牛结束时,设置为空绳

  emptyRope() {
      var rope_empty_sprite = this.node.getComponent(cc.Sprite)
      rope_empty_sprite.spriteFrame = this.rope_empty
  },
  

6. 计时&结算

• 计数

  • 游戏开始计数归零
  • 套牛成功计数加一

• 计时

  • 游戏开始this.schedule(this.countDown, 1)

    startGame () {
        // 初始化数据
        this.cows = []
        this.time_num = 15
        this.time_src.string = ''+ this.time_num
        this.count_num = 0
        this.count_src.string = ''+ this.count_num
        // 倒计时
        this.schedule(this.countDown, 1)
        this.schedule(this.produceCow, Math.random()*3+3) // [3, 6)秒生产一头牛
    }
    

  • 倒计时

    countDown () {
        this.time_num--
        this.time_src.string = ''+ this.time_num
        if (this.time_num <= 0) { // 时间到
            // 停止所有计时器 (倒计时&生产牛)
            this.unscheduleAllCallbacks()
            // 进入结算
            this.toCheckout()
            return
        }
    }
    // this.checkout = cc.find('Home/checkout')
    // this.score = cc.find('Home/checkout/board/score').getComponent(cc.Label)
    // this.title = cc.find('Home/checkout/title').getComponent(cc.Label)
    toCheckout () {
        this.checkout.active = true
        this.score.string = '' + this.count_num
        var total = this.count_num
        if (total <= 3) {
            this.title.string = '情场空手'
        } else if (total <= 6) {
            this.title.string = '情场新手'
        } else if (total <= 8) {
            this.title.string = '情场高手'
        } else {
            this.title.string = '情场圣手'
        }
    }
    

7. 重新开始

• 添加UI -> Button组件

• 绑定 startGame事件

• 隐藏结算面板this.checkout.active = false

8. 音乐音效

- 背景音乐

• 添加AudioSource组件

- 音效

• 声明

  audio: {
      type: cc.AudioClip,
      default: null
  }
  

• 在捉到牛时播放

  cc.audioEngine.play(this.audio)
  

9. 粒子动画

• 在rope上添加ParticleSystem组件

• 获取粒子

  this.fireworks = this.node.getChildByName('fireworks').getComponent(cc.ParticleSystem)
  

• 在套牛成功时释放

  this.fireworks.resetSystem()