翻牌闯关游戏

翻牌闯关游戏

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

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

提示游戏玩法：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 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次选择的格子indexcurrBrandIndex2:'', //每两次点击第2次选择的格子indexclearBrandArr:[], //已清除的格子memoryDurationTime:5000, //记忆时长(毫秒)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;// 一轮手势引导动画2ssetTimeout(()=>{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){setTimeout(()=>{this.inGame = true;this.setTimeRun();},this.memoryDurationTime)}})},// 点击格子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