翻牌闯关游戏

翻牌闯关游戏

3关：关卡由少至多12格、20格、30格
图案：12个
玩法：点击两张卡牌，图案一到即可消除掉

记忆时长(毫秒)：memoryDurationTime:5000
可配置，默认5000

提示游戏玩法：showTipsFlag:1
可配置，1:判断localStorage值，仅一次提示游戏玩法 2:每次游戏第一关（12格关卡）都提示游戏玩法

提示游戏玩法 时长(毫秒)：showTipsTime:4100
可配置，默认4100，注：设置的引导手势动画2s

是否需要计时：ifNeedTime:2
可配置，0：不需要计时； 1：正计时； 2：倒计时

倒计时开始时间(秒)：baseTime:[20,60,90]
可配置，第N关卡(baseTime下标对应值)对应的秒数

开始游戏（根据闯关情况自动设置对应关卡）：
this.gameRun()

当前关卡闯关游戏结束：
this.gameOver()

游戏组件页代码：

父组件中引用：

HTML：

JS：

methods:{
  // 游戏组件加载完毕
  flipBrandLoaded(){
    // 开始闯关
    // this.$refs.gameTemp.gameRun();
  },
  // 当前关卡闯关游戏结束
  gameOverEnd(isClearAll,gameEnd,levelStartNum){
    // isClearAll:'', //清除完毕游戏结束 正计时时用于结束计时
    // gameEnd:'', //倒计时结束，游戏结束
    // levelStartNum 当前关卡数
    this.levelStartNum = levelStartNum;
    this.$nextTick(()=>{
      this.gameOver(isClearAll);
    })
  },
  // 开始游戏
  gameStartDo(){
    this.$refs.gameTemp.gameRun();
  },
  // 游戏结束接口
  gameOver(isClearAll){
    if(isClearAll){
      // 闯关成功
    }
  },
}

图片资源：

 game_1.png

game_2.png

 

game_3.png

game_4.png

game_5.png

 

game/1.png 至 game/12.png