翻牌闯关游戏
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()
游戏组件页代码：
<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次选择的格子index
currBrandIndex2:'', //每两次点击第2次选择的格子index
clearBrandArr:[], //已清除的格子
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, //倒计时结束，当前关卡闯关游戏结束
}
},
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);
this.gameEnd = true;
if(!this.isClearAll){
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(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{
// 闯关失败
}
}
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(()=>{
this.currBrandIndex1 = '';
this.currBrandIndex2 = '';
this.clearBrandArr.push(index,index2);
this.$nextTick(()=>{
if(this.clearBrandArr.length == this.LevelNum[this.levelStartNum]){
// 清除完毕
this.isClearAll = true;
// this.gameRun();
if(!this.gameEnd){
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
