翻牌闯关游戏

翻牌闯关游戏

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

记忆时长(秒)：memoryDurationTime:5
可配置：默认5

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

在什么时候提示游戏玩法：showTipsFuncName:'goInGame'
可配置：1:setTimeRun:牌面已经全部翻转反面未开始计时 2:goInGame:牌面未全部翻转反面时

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

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

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

闯关失败重新闯关是否从第一关开始：ifFailResetLevelStartNum:true
可配置：默认true

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

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

游戏组件页代码：

<template>
  <div v-show="showGame" class="page game">
    <div class="game_body">
      <div v-if="memoryShow" class="game_time">
        <span>记忆倒计时：</span>
        <span>{{memoryTime}}s</span>
      </div>
      <div v-else class="game_time">
        <span>倒计时：</span>
        <span>{{curTime}}s</span>
      </div>
      <div v-if="isStartGame" class="game_box">
        <ul class="game_list" :class="{'first_level':levelStartNum == 0,'second_level':levelStartNum == 1,'third_level':levelStartNum == 2}">
          <li @click="chooseBrand(index)" v-for="item,index in currLevelData" :key="index">
            <img :class="clearBrandArr.indexOf(index) == -1 && inGame && (currBrandIndex1 !== index && currBrandIndex2 !== index) ? 'show' : 'hide'" src="@/assets/img/game_3.png" />
            <img :class="!inGame || (currBrandIndex1 === index || currBrandIndex2 === index) ? 'show' : 'hide'" :src="item" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 提示游戏玩法 -->
    <div v-show="showTips" class="game_tips">
      <div class="game_tips_body">
        <img src="@/assets/img/game_5.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 翻牌对应的图片（12张）
      gameBrandList:[
        require('@/assets/img/game/1.png'),
        require('@/assets/img/game/2.png'),
        require('@/assets/img/game/3.png'),
        require('@/assets/img/game/4.png'),
        require('@/assets/img/game/5.png'),
        require('@/assets/img/game/6.png'),
        require('@/assets/img/game/7.png'),
        require('@/assets/img/game/8.png'),
        require('@/assets/img/game/9.png'),
        require('@/assets/img/game/10.png'),
        require('@/assets/img/game/11.png'),
        require('@/assets/img/game/12.png'),
      ],
      LevelNum:[12,20,30], // 第N关卡对应的格子数
      levelStartNum:0, // 第N关卡 从0开始
      currLevelData:[], //当前关卡 翻牌对应的图片
      showGame:false,
      inGame:false, //进入游戏页面后，是否用户可点击参与了
      isStartGame:false,
      currBrandIndex1:'', //每两次点击第1次选择的格子index
      currBrandIndex2:'', //每两次点击第2次选择的格子index
      clearBrandArr:[], //已清除的格子
      memoryDurationTime:5, //记忆时长(秒)
      memoryShow:false, //展示记忆时长倒计时
      memoryTime:0, //记忆时长倒计时

      showTips:false, //是否提示游戏玩法
      showTipsEnd:false, //是否提示游戏玩法 展示结束
      showTipsFlag:1, //1:判断localStorage值，仅一次提示游戏玩法 2:每次游戏第一关都提示游戏玩法
      // showTipsFuncName:'setTimeRun', //在什么时候提示游戏玩法 setTimeRun:牌面已经全部翻转反面未开始计时 goInGame:牌面未全部翻转反面时
      showTipsFuncName:'goInGame', //在什么时候提示游戏玩法 setTimeRun:牌面已经全部翻转反面未开始计时 goInGame:牌面未全部翻转反面时
      showTipsTime:4100, //提示游戏玩法 时长(毫秒)


      ifNeedTime:2, //0：不需要计时； 1：正计时； 2：倒计时
      baseTime:[20,60,90], //倒计时开始时间，秒 第N关卡(baseTime下标对应值)对应的秒数
      timer:null, //定时器
      curTime:'-', //当前 用时 或 倒计时
      timing:0,
      rafId:'',
      isClearAll:false, //清除完毕当前关卡闯关游戏结束 用于结束计时
      gameEnd:false, //倒计时结束，当前关卡闯关游戏结束
      ifFailResetLevelStartNum:true, //闯关失败重新闯关是否从第一关开始
    }
  },
  mounted() {
    // this.gameRun();
    this.$emit('flipBrandMounted');
  },
  watch:{
    showTipsEnd:function(newV,oldV){
      if(newV){
        if(this.showTipsFuncName == 'setTimeRun'){
          this.setTimeRun();
        }
        if(this.showTipsFuncName == 'goInGame'){
          this.goInGame();
        }
      }
    }
  },
  methods:{
    // 倒计时
    showTime(){
      this.curTime--;
      // 计时结束
      if(this.curTime == 0){
        clearInterval(this.timer);
        if(!this.isClearAll){
          this.gameEnd = true;
          this.gameOver();
        }
      }
      // 清除完毕当前关卡闯关游戏结束
      if(this.isClearAll == true){
        clearInterval(this.timer);
      }
    },
    // 计时
    changeTime(k){
      // console.log(k);
      if(!this.timing && k){
        this.timing = k
      }
      this.rafId = requestAnimationFrame(this.changeTime);
      this.curTime = ((k - this.timing) / 1000).toFixed(2);
      // console.log(this.curTime);
      this.$nextTick(()=>{
        // 清除完毕当前关卡闯关游戏结束
        if(this.isClearAll == true){
          cancelAnimationFrame(this.rafId);
        }
      })
    },
    // 开始计时
    setTimeRun(){
      this.showTipsDo('setTimeRun',(flag)=>{
        if(flag){
          if(this.ifNeedTime == 1){
            this.timing = 0;
            this.changeTime();
          }
          if(this.ifNeedTime == 2){
            this.curTime = this.baseTime[this.levelStartNum];
            this.timer ? clearInterval(this.timer) : '';
            this.timer = setInterval(this.showTime,1000);
          }
        }
      })
    },

    // 提示游戏玩法 逻辑处理
    showTipsDo(funcName,callback){
      // console.log(funcName , this.showTipsFuncName)
      // 初始化时间
      if(this.ifNeedTime == 1){
        this.curTime = 0;
      }
      if(this.ifNeedTime == 2){
        this.curTime = this.baseTime[this.levelStartNum];
      }
      if(funcName != this.showTipsFuncName){
        callback && callback(true);
        return;
      }
      // 游戏开始前 提示游戏玩法
      if((this.showTipsFlag == 1 && !localStorage.getItem('isShowTips')) || (this.showTipsFlag == 2 && this.levelStartNum == 0 && !this.showTipsEnd)){
        this.showTips = true;
        // 一轮手势引导动画2s
        setTimeout(()=>{
          this.showTips = false;
          this.showTipsEnd = true;
          if(this.showTipsFlag == 1) localStorage.setItem('isShowTips',1)
        },this.showTipsTime)
        callback && callback(false);
      }else{
        callback && callback(true);
      }
    },

    // 开始游戏
    gameRun(){
      // 闯关结束后再继续下一关
      if(this.gameEnd || this.isClearAll){
        if(this.isClearAll){
          // 闯关成功
          if(this.levelStartNum < this.LevelNum.length - 1){
            this.levelStartNum++;
          }else{
            // 全部关卡闯关成功，重新第1关再开始
            this.levelStartNum = 0;
          }
        }else{
          // 闯关失败
          if(this.ifFailResetLevelStartNum){
            this.levelStartNum = 0;
          }
        }
      }
      this.gameEnd = false;
      this.isClearAll = false;
      this.$nextTick(()=>{
        this.gameStart();
      })
    },

    // 当前关卡闯关游戏结束
    gameOver(){
      this.$emit('gameOver',this.isClearAll,this.gameEnd,this.levelStartNum);
    },

    // 初始化游戏 当前关卡 翻牌对应的图片
    gameStart(){
      this.isStartGame = false;
      this.inGame = false;
      this.currBrandIndex1 = '';
      this.currBrandIndex2 = '';
      this.clearBrandArr = [];
      this.currLevelData = [];

      let currBrandList = [].concat(this.gameBrandList).sort(function(a, b){
        return 0.5 - Math.random();
      });
      let currLevelLen = this.LevelNum[this.levelStartNum];
      let currLevelData = [];
      for(let i = 0; i < currLevelLen / 2; i++){
        if(i > this.gameBrandList.length - 1){
          // 12个牌子不够双倍匹配
          let randomKey = Math.floor(Math.random() * this.gameBrandList.length);
          currLevelData[i] = currBrandList[randomKey];
          currLevelData[currLevelLen - 1 - i] = currBrandList[randomKey];
        }else{
          currLevelData[i] = currBrandList[i];
          currLevelData[currLevelLen - 1 - i] = currBrandList[i];
        }
      }
      this.currLevelData = currLevelData.sort(function(a, b){
        return 0.5 - Math.random();
      });
      this.$nextTick(()=>{
        this.showGame = true;
        this.isStartGame = true;
        this.goInGame();
      })
    },
    // 用户可以去点击清除操作了
    goInGame(){
      this.showTipsDo('goInGame',(flag)=>{
        if(flag){
          this.memoryTime = this.memoryDurationTime;
          this.memoryDoing();
        }
      })
    },
    // 记忆时长倒计时
    memoryDoing(){
      if(this.memoryTime < 0){
        this.memoryShow = false;
        this.inGame = true;
        this.setTimeRun();
        return;
      }
      this.memoryShow = true;
      clearTimeout(this.timer);
      this.timer = setTimeout(()=>{
        this.memoryTime--
        this.memoryDoing();
      },1000)
    },
    // 点击格子
    chooseBrand(index){
      // 倒计时结束不可点击
      if(this.gameEnd){
        console.log('倒计时结束不可点击');
        return;
      }
      if(!this.inGame || this.currBrandIndex1 === index || (this.currBrandIndex1 && this.currBrandIndex2) || this.clearBrandArr.indexOf(index) !== -1){
        return;
      }
      if(this.currBrandIndex1 !== ''){
        this.currBrandIndex2 = index;
        if(this.currLevelData[index] == this.currLevelData[this.currBrandIndex1] && index != this.currBrandIndex1){
          // 两点击一样
          this.clearBrand(this.currBrandIndex1,index);
        }else{
          // 两点击不一样
          setTimeout(()=>{
            this.currBrandIndex1 = '';
            this.currBrandIndex2 = '';
          },300)
        }
      }else{
        this.currBrandIndex1 = index;
      }
    },
    // 两次点击相同清除格子
    clearBrand(index,index2){
      setTimeout(()=>{
        if(this.clearBrandArr.indexOf(index) !== -1 && this.clearBrandArr.indexOf(index2) !== -1){
          // 快速点击情况不记录
        }else{
          this.currBrandIndex1 = '';
          this.currBrandIndex2 = '';
          this.clearBrandArr.push(index,index2);
          this.$nextTick(()=>{
            if(this.clearBrandArr.length == this.LevelNum[this.levelStartNum]){
              // 清除完毕
              // this.gameRun();
              if(!this.gameEnd){
                this.isClearAll = true;
                this.gameOver();
              }
            }
          })
        }
      },300)
    },

  }
}
</script>

<style scoped>
.page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow: hidden;}

/* 游戏页 */
.page.game{ background-color: #fff;}
.game_body{ height: 1104px; padding-top: 60px; background: url(../assets/img/game_1.png) no-repeat center top; background-size: 100%; position: relative;}
.game_body::after{ content: ""; width: 100%; min-height: calc(100vh - 1104px); height: 396px; background: url(../assets/img/game_2.png); background-size: 100% 100%; position: absolute; left: 0; top: 1102px;}
.game_time{ height: 62px; line-height: 53px; color: #FFFDF4; font-size: 36px; font-weight: bold;
  display: flex; justify-content: center; align-items: center;
  text-shadow: 2px 2px 0 #895F41 , 2px 2px 0 #895F41 ,  -2px -2px 0 #895F41 , -2px -2px 0 #895F41 ,  2px -2px 0 #895F41 , 2px -2px 0 #895F41 ,  -2px 2px 0 #895F41 , -2px 2px 0 #895F41;
}
.game_box{ height: 940px; margin-top: 42px;}
.game_list{
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
}
.game_list li img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
  transition: all .2s linear;
}
.game_list li img.show{
  transform: scaleX(1);
}
.game_list li img.hide{ display: block !important;
  transform: scaleX(0);
}
/* 12格 */
.game_list.first_level{ padding: 0 98px;}
.game_list.first_level li{ width: 168px; height: 222px; position: relative;
  animation: fadeToDown .5s linear both;
}
.game_list.first_level li:nth-child(3n + 2){ margin: 0 calc((100% - 168px * 3) / 2);}
.game_list.first_level li:nth-child(3) ~ li{ margin-top: 15px;}
/* 20格 */
.game_list.second_level{ padding: 0 82px;}
.game_list.second_level li{ width: 131px; height: 173px; position: relative;
  animation: fadeToDown .5s linear both;
}
.game_list.second_level li{ margin-left: calc((100% - 131px * 4) / 3);}
.game_list.second_level li:nth-child(4n + 1){ margin-left: 0;}
.game_list.second_level li:nth-child(4) ~ li{ margin-top: 10px;}
/* 30格 */
.game_list.third_level{ padding: 0 71px;}
.game_list.third_level li{ width: 108px; height: 143px; position: relative;
  animation: fadeToDown .5s linear both;
}
.game_list.third_level li{ margin-left: calc((100% - 108px * 5) / 4);}
.game_list.third_level li:nth-child(5n + 1){ margin-left: 0;}
.game_list.third_level li:nth-child(5) ~ li{ margin-top: 8px;}

/* 提示游戏玩法 */
.game_tips{ width: 100%; height: 100%; padding-top: 438px; background-color: rgba(0,0,0,.6); position: absolute; left: 0; top: 0;}
.game_tips_body{ width: 479px; height: 365px; margin: 0 auto; background: url(../assets/img/game_4.png); background-size: 100% 100%; position: relative;}
.game_tips_body img{ width: 128px; position: absolute; left: 117px; top: 96px;
  transform-origin: 35px 32px;
  animation: gameTips 2s linear both infinite;
}
@keyframes gameTips{
  0%{ transform: translate(0,0) scale(1.15);}
  15%,30%{ transform: translate(0,0) scale(1);}
  45%{ transform: translate(166px,0) scale(1.15);}
  60%,100%{ transform: translate(166px,0) scale(1);}
}
</style>

父组件中引用：

HTML：

<flipBrand ref="gameTemp" @flipBrandMounted="flipBrandLoaded" @gameOver="gameOverEnd"></flipBrand>

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