• 翻牌闯关游戏

    翻牌闯关游戏


    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()

    游戏组件页代码：

    1. <template>
    2.   <div v-show="showGame" class="page game">
    3.     <div class="game_body">
    4.       <div v-if="memoryShow" class="game_time">
    5.         <span>记忆倒计时：</span>
    6.         <span>{{memoryTime}}s</span>
    7.       </div>
    8.       <div v-else class="game_time">
    9.         <span>倒计时：</span>
    10.         <span>{{curTime}}s</span>
    11.       </div>
    12.       <div v-if="isStartGame" class="game_box">
    13.         <ul class="game_list" :class="{'first_level':levelStartNum == 0,'second_level':levelStartNum == 1,'third_level':levelStartNum == 2}">
    14.           <li @click="chooseBrand(index)" v-for="item,index in currLevelData" :key="index">
    15.             <img :class="clearBrandArr.indexOf(index) == -1 && inGame && (currBrandIndex1 !== index && currBrandIndex2 !== index) ? 'show' : 'hide'" src="@/assets/img/game_3.png" />
    16.             <img :class="!inGame || (currBrandIndex1 === index || currBrandIndex2 === index) ? 'show' : 'hide'" :src="item" />
    17.           </li>
    18.         </ul>
    19.       </div>
    20.     </div>
    21.     <!-- 提示游戏玩法 -->
    22.     <div v-show="showTips" class="game_tips">
    23.       <div class="game_tips_body">
    24.         <img src="@/assets/img/game_5.png" />
    25.       </div>
    26.     </div>
    27.   </div>
    28. </template>
    29.  
    30. <script>
    31. export default {
    32.   data(){
    33.     return{
    34.       // 翻牌对应的图片（12张）
    35.       gameBrandList:[
    36.         require('@/assets/img/game/1.png'),
    37.         require('@/assets/img/game/2.png'),
    38.         require('@/assets/img/game/3.png'),
    39.         require('@/assets/img/game/4.png'),
    40.         require('@/assets/img/game/5.png'),
    41.         require('@/assets/img/game/6.png'),
    42.         require('@/assets/img/game/7.png'),
    43.         require('@/assets/img/game/8.png'),
    44.         require('@/assets/img/game/9.png'),
    45.         require('@/assets/img/game/10.png'),
    46.         require('@/assets/img/game/11.png'),
    47.         require('@/assets/img/game/12.png'),
    48.       ],
    49.       LevelNum:[12,20,30], // 第N关卡对应的格子数
    50.       levelStartNum:0, // 第N关卡 从0开始
    51.       currLevelData:[], //当前关卡 翻牌对应的图片
    52.       showGame:false,
    53.       inGame:false, //进入游戏页面后，是否用户可点击参与了
    54.       isStartGame:false,
    55.       currBrandIndex1:'', //每两次点击第1次选择的格子index
    56.       currBrandIndex2:'', //每两次点击第2次选择的格子index
    57.       clearBrandArr:[], //已清除的格子
    58.       memoryDurationTime:5, //记忆时长(秒)
    59.       memoryShow:false, //展示记忆时长倒计时
    60.       memoryTime:0, //记忆时长倒计时
    61.  
    62.       showTips:false, //是否提示游戏玩法
    63.       showTipsEnd:false, //是否提示游戏玩法 展示结束
    64.       showTipsFlag:1, //1:判断localStorage值，仅一次提示游戏玩法 2:每次游戏第一关都提示游戏玩法
    65.       // showTipsFuncName:'setTimeRun', //在什么时候提示游戏玩法 setTimeRun:牌面已经全部翻转反面未开始计时 goInGame:牌面未全部翻转反面时
    66.       showTipsFuncName:'goInGame', //在什么时候提示游戏玩法 setTimeRun:牌面已经全部翻转反面未开始计时 goInGame:牌面未全部翻转反面时
    67.       showTipsTime:4100, //提示游戏玩法 时长(毫秒)
    68.  
    69.  
    70.       ifNeedTime:2, //0：不需要计时； 1：正计时； 2：倒计时
    71.       baseTime:[20,60,90], //倒计时开始时间，秒 第N关卡(baseTime下标对应值)对应的秒数
    72.       timer:null, //定时器
    73.       curTime:'-', //当前 用时 或 倒计时
    74.       timing:0,
    75.       rafId:'',
    76.       isClearAll:false, //清除完毕当前关卡闯关游戏结束 用于结束计时
    77.       gameEnd:false, //倒计时结束，当前关卡闯关游戏结束
    78.       ifFailResetLevelStartNum:true, //闯关失败重新闯关是否从第一关开始
    79.     }
    80.   },
    81.   mounted() {
    82.     // this.gameRun();
    83.     this.$emit('flipBrandMounted');
    84.   },
    85.   watch:{
    86.     showTipsEnd:function(newV,oldV){
    87.       if(newV){
    88.         if(this.showTipsFuncName == 'setTimeRun'){
    89.           this.setTimeRun();
    90.         }
    91.         if(this.showTipsFuncName == 'goInGame'){
    92.           this.goInGame();
    93.         }
    94.       }
    95.     }
    96.   },
    97.   methods:{
    98.     // 倒计时
    99.     showTime(){
    100.       this.curTime--;
    101.       // 计时结束
    102.       if(this.curTime == 0){
    103.         clearInterval(this.timer);
    104.         if(!this.isClearAll){
    105.           this.gameEnd = true;
    106.           this.gameOver();
    107.         }
    108.       }
    109.       // 清除完毕当前关卡闯关游戏结束
    110.       if(this.isClearAll == true){
    111.         clearInterval(this.timer);
    112.       }
    113.     },
    114.     // 计时
    115.     changeTime(k){
    116.       // console.log(k);
    117.       if(!this.timing && k){
    118.         this.timing = k
    119.       }
    120.       this.rafId = requestAnimationFrame(this.changeTime);
    121.       this.curTime = ((k - this.timing) / 1000).toFixed(2);
    122.       // console.log(this.curTime);
    123.       this.$nextTick(()=>{
    124.         // 清除完毕当前关卡闯关游戏结束
    125.         if(this.isClearAll == true){
    126.           cancelAnimationFrame(this.rafId);
    127.         }
    128.       })
    129.     },
    130.     // 开始计时
    131.     setTimeRun(){
    132.       this.showTipsDo('setTimeRun',(flag)=>{
    133.         if(flag){
    134.           if(this.ifNeedTime == 1){
    135.             this.timing = 0;
    136.             this.changeTime();
    137.           }
    138.           if(this.ifNeedTime == 2){
    139.             this.curTime = this.baseTime[this.levelStartNum];
    140.             this.timer ? clearInterval(this.timer) : '';
    141.             this.timer = setInterval(this.showTime,1000);
    142.           }
    143.         }
    144.       })
    145.     },
    146.  
    147.     // 提示游戏玩法 逻辑处理
    148.     showTipsDo(funcName,callback){
    149.       // console.log(funcName , this.showTipsFuncName)
    150.       // 初始化时间
    151.       if(this.ifNeedTime == 1){
    152.         this.curTime = 0;
    153.       }
    154.       if(this.ifNeedTime == 2){
    155.         this.curTime = this.baseTime[this.levelStartNum];
    156.       }
    157.       if(funcName != this.showTipsFuncName){
    158.         callback && callback(true);
    159.         return;
    160.       }
    161.       // 游戏开始前 提示游戏玩法
    162.       if((this.showTipsFlag == 1 && !localStorage.getItem('isShowTips')) || (this.showTipsFlag == 2 && this.levelStartNum == 0 && !this.showTipsEnd)){
    163.         this.showTips = true;
    164.         // 一轮手势引导动画2s
    165.         setTimeout(()=>{
    166.           this.showTips = false;
    167.           this.showTipsEnd = true;
    168.           if(this.showTipsFlag == 1) localStorage.setItem('isShowTips',1)
    169.         },this.showTipsTime)
    170.         callback && callback(false);
    171.       }else{
    172.         callback && callback(true);
    173.       }
    174.     },
    175.  
    176.     // 开始游戏
    177.     gameRun(){
    178.       // 闯关结束后再继续下一关
    179.       if(this.gameEnd || this.isClearAll){
    180.         if(this.isClearAll){
    181.           // 闯关成功
    182.           if(this.levelStartNum < this.LevelNum.length - 1){
    183.             this.levelStartNum++;
    184.           }else{
    185.             // 全部关卡闯关成功，重新第1关再开始
    186.             this.levelStartNum = 0;
    187.           }
    188.         }else{
    189.           // 闯关失败
    190.           if(this.ifFailResetLevelStartNum){
    191.             this.levelStartNum = 0;
    192.           }
    193.         }
    194.       }
    195.       this.gameEnd = false;
    196.       this.isClearAll = false;
    197.       this.$nextTick(()=>{
    198.         this.gameStart();
    199.       })
    200.     },
    201.  
    202.     // 当前关卡闯关游戏结束
    203.     gameOver(){
    204.       this.$emit('gameOver',this.isClearAll,this.gameEnd,this.levelStartNum);
    205.     },
    206.  
    207.     // 初始化游戏 当前关卡 翻牌对应的图片
    208.     gameStart(){
    209.       this.isStartGame = false;
    210.       this.inGame = false;
    211.       this.currBrandIndex1 = '';
    212.       this.currBrandIndex2 = '';
    213.       this.clearBrandArr = [];
    214.       this.currLevelData = [];
    215.  
    216.       let currBrandList = [].concat(this.gameBrandList).sort(function(a, b){
    217.         return 0.5 - Math.random();
    218.       });
    219.       let currLevelLen = this.LevelNum[this.levelStartNum];
    220.       let currLevelData = [];
    221.       for(let i = 0; i < currLevelLen / 2; i++){
    222.         if(i > this.gameBrandList.length - 1){
    223.           // 12个牌子不够双倍匹配
    224.           let randomKey = Math.floor(Math.random() * this.gameBrandList.length);
    225.           currLevelData[i] = currBrandList[randomKey];
    226.           currLevelData[currLevelLen - 1 - i] = currBrandList[randomKey];
    227.         }else{
    228.           currLevelData[i] = currBrandList[i];
    229.           currLevelData[currLevelLen - 1 - i] = currBrandList[i];
    230.         }
    231.       }
    232.       this.currLevelData = currLevelData.sort(function(a, b){
    233.         return 0.5 - Math.random();
    234.       });
    235.       this.$nextTick(()=>{
    236.         this.showGame = true;
    237.         this.isStartGame = true;
    238.         this.goInGame();
    239.       })
    240.     },
    241.     // 用户可以去点击清除操作了
    242.     goInGame(){
    243.       this.showTipsDo('goInGame',(flag)=>{
    244.         if(flag){
    245.           this.memoryTime = this.memoryDurationTime;
    246.           this.memoryDoing();
    247.         }
    248.       })
    249.     },
    250.     // 记忆时长倒计时
    251.     memoryDoing(){
    252.       if(this.memoryTime < 0){
    253.         this.memoryShow = false;
    254.         this.inGame = true;
    255.         this.setTimeRun();
    256.         return;
    257.       }
    258.       this.memoryShow = true;
    259.       clearTimeout(this.timer);
    260.       this.timer = setTimeout(()=>{
    261.         this.memoryTime--
    262.         this.memoryDoing();
    263.       },1000)
    264.     },
    265.     // 点击格子
    266.     chooseBrand(index){
    267.       // 倒计时结束不可点击
    268.       if(this.gameEnd){
    269.         console.log('倒计时结束不可点击');
    270.         return;
    271.       }
    272.       if(!this.inGame || this.currBrandIndex1 === index || (this.currBrandIndex1 && this.currBrandIndex2) || this.clearBrandArr.indexOf(index) !== -1){
    273.         return;
    274.       }
    275.       if(this.currBrandIndex1 !== ''){
    276.         this.currBrandIndex2 = index;
    277.         if(this.currLevelData[index] == this.currLevelData[this.currBrandIndex1] && index != this.currBrandIndex1){
    278.           // 两点击一样
    279.           this.clearBrand(this.currBrandIndex1,index);
    280.         }else{
    281.           // 两点击不一样
    282.           setTimeout(()=>{
    283.             this.currBrandIndex1 = '';
    284.             this.currBrandIndex2 = '';
    285.           },300)
    286.         }
    287.       }else{
    288.         this.currBrandIndex1 = index;
    289.       }
    290.     },
    291.     // 两次点击相同清除格子
    292.     clearBrand(index,index2){
    293.       setTimeout(()=>{
    294.         if(this.clearBrandArr.indexOf(index) !== -1 && this.clearBrandArr.indexOf(index2) !== -1){
    295.           // 快速点击情况不记录
    296.         }else{
    297.           this.currBrandIndex1 = '';
    298.           this.currBrandIndex2 = '';
    299.           this.clearBrandArr.push(index,index2);
    300.           this.$nextTick(()=>{
    301.             if(this.clearBrandArr.length == this.LevelNum[this.levelStartNum]){
    302.               // 清除完毕
    303.               // this.gameRun();
    304.               if(!this.gameEnd){
    305.                 this.isClearAll = true;
    306.                 this.gameOver();
    307.               }
    308.             }
    309.           })
    310.         }
    311.       },300)
    312.     },
    313.  
    314.   }
    315. }
    316. </script>
    317.  
    318. <style scoped>
    319. .page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow: hidden;}
    320.  
    321. /* 游戏页 */
    322. .page.game{ background-color: #fff;}
    323. .game_body{ height: 1104px; padding-top: 60px; background: url(../assets/img/game_1.png) no-repeat center top; background-size: 100%; position: relative;}
    324. .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;}
    325. .game_time{ height: 62px; line-height: 53px; color: #FFFDF4; font-size: 36px; font-weight: bold;
    326.   display: flex; justify-content: center; align-items: center;
    327.   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;
    328. }
    329. .game_box{ height: 940px; margin-top: 42px;}
    330. .game_list{
    331.   display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
    332. }
    333. .game_list li img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
    334.   transition: all .2s linear;
    335. }
    336. .game_list li img.show{
    337.   transform: scaleX(1);
    338. }
    339. .game_list li img.hide{ display: block !important;
    340.   transform: scaleX(0);
    341. }
    342. /* 12格 */
    343. .game_list.first_level{ padding: 0 98px;}
    344. .game_list.first_level li{ width: 168px; height: 222px; position: relative;
    345.   animation: fadeToDown .5s linear both;
    346. }
    347. .game_list.first_level li:nth-child(3n + 2){ margin: 0 calc((100% - 168px * 3) / 2);}
    348. .game_list.first_level li:nth-child(3) ~ li{ margin-top: 15px;}
    349. /* 20格 */
    350. .game_list.second_level{ padding: 0 82px;}
    351. .game_list.second_level li{ width: 131px; height: 173px; position: relative;
    352.   animation: fadeToDown .5s linear both;
    353. }
    354. .game_list.second_level li{ margin-left: calc((100% - 131px * 4) / 3);}
    355. .game_list.second_level li:nth-child(4n + 1){ margin-left: 0;}
    356. .game_list.second_level li:nth-child(4) ~ li{ margin-top: 10px;}
    357. /* 30格 */
    358. .game_list.third_level{ padding: 0 71px;}
    359. .game_list.third_level li{ width: 108px; height: 143px; position: relative;
    360.   animation: fadeToDown .5s linear both;
    361. }
    362. .game_list.third_level li{ margin-left: calc((100% - 108px * 5) / 4);}
    363. .game_list.third_level li:nth-child(5n + 1){ margin-left: 0;}
    364. .game_list.third_level li:nth-child(5) ~ li{ margin-top: 8px;}
    365.  
    366. /* 提示游戏玩法 */
    367. .game_tips{ width: 100%; height: 100%; padding-top: 438px; background-color: rgba(0,0,0,.6); position: absolute; left: 0; top: 0;}
    368. .game_tips_body{ width: 479px; height: 365px; margin: 0 auto; background: url(../assets/img/game_4.png); background-size: 100% 100%; position: relative;}
    369. .game_tips_body img{ width: 128px; position: absolute; left: 117px; top: 96px;
    370.   transform-origin: 35px 32px;
    371.   animation: gameTips 2s linear both infinite;
    372. }
    373. @keyframes gameTips{
    374.   0%{ transform: translate(0,0) scale(1.15);}
    375.   15%,30%{ transform: translate(0,0) scale(1);}
    376.   45%{ transform: translate(166px,0) scale(1.15);}
    377.   60%,100%{ transform: translate(166px,0) scale(1);}
    378. }
    379. </style>

    父组件中引用：


    HTML：

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

    JS：

    1. methods:{
    2.   // 游戏组件加载完毕
    3.   flipBrandLoaded(){
    4.     // 开始闯关
    5.     // this.$refs.gameTemp.gameRun();
    6.   },
    7.   // 当前关卡闯关游戏结束
    8.   gameOverEnd(isClearAll,gameEnd,levelStartNum){
    9.     // isClearAll:'', //清除完毕游戏结束 正计时时用于结束计时
    10.     // gameEnd:'', //倒计时结束，游戏结束
    11.     // levelStartNum 当前关卡数
    12.     this.levelStartNum = levelStartNum;
    13.     this.$nextTick(()=>{
    14.       this.gameOver(isClearAll);
    15.     })
    16.   },
    17.   // 开始游戏
    18.   gameStartDo(){
    19.     this.$refs.gameTemp.gameRun();
    20.   },
    21.   // 游戏结束接口
    22.   gameOver(isClearAll){
    23.     if(isClearAll){
    24.       // 闯关成功
    25.     }
    26.   },
    27. }

    图片资源：

     game_1.png

    game_2.png

     

    game_3.png

    game_4.png

    game_5.png

     

    game/1.png 至 game/12.png

  • 相关阅读:
    机器学习之 Jupyter Notebook 使用
    967亿销售额！博世解码智能汽车新蓝图
    @requestBody与@RequestParam
    【计算机毕业设计】22.学校试卷生成系统+vue
    AI人机对话-无能版
    怎么压缩图片？图片压缩技巧快学来
    浅谈压力测试的作用是什么
    化工DCS/SIS/MIS系统时钟同步（NTP服务器）建设
    ubuntu18.04配置Java环境与安装RCS库
    【leetcode周赛总结】LeetCode第 81 场双周赛（6.25）
  • 原文地址：https://blog.csdn.net/qq_16494241/article/details/132927257