vue脚手架开发打地鼠游戏

游戏设计：

规划游戏的核心功能，如场景、随机出现的地鼠、计分系统、游戏时间限制等。简单设计游戏流程，包括开始界面、游戏进行中、关卡设置（如不同关卡地鼠出现数量、游戏时间等）、关卡闯关成功|失败、游戏结束闯关成功|失败等状态。确定游戏的交互方式，PC端测试鼠标左键点击击打地鼠，移动端手指点击击打地鼠。

以下为游戏开发前制作的游戏界面展示效果，如图： 其中有加分、减分对应分值的地鼠图片元素，洞口图片元素，以及使用CSS遮罩效果实现的地鼠出洞时像钻出来的效果图片元素（红色的），这里遮罩图片顶部切片向上延伸39px

问题解决：

与游戏引擎开发不同，需要解决的问题如下：

1、html+css开发中，元素层级问题，很难直接实现地鼠从洞中钻出的效果

这里使用CSS遮罩效果实现的地鼠出洞时像钻出来的效果，遮罩图片元素可见区域则是地鼠运动过程中可见区域，在此之外则不可见 以下为：相关CSS设置代码截图，需要注意的是：遮罩图片不可跨域使用，这里将图片文件转成Base64格式图片了，如图：

2、音频播放会有兼容性问题

比如打到地鼠音效+加分或减分时，部分设备可能只听到一个音频；另外设置多次播放同一个音频时，会等一个播放结束后停顿后再重新播放。因此本游戏音效播放使用了Howler.js HTML5声音引擎，同一音频就可以重叠播放了。 Howler.js HTML5声音引擎 代码如下：

var rightMusic = new Howl({ src: ['static/right.mp3'], }); var wrongMusic = new Howl({ src: ['static/wrong.mp3'], }); var scoreAddMusic = new Howl({ src: ['static/scoreAdd.mp3'], }); var scoreReduceMusic = new Howl({ src: ['static/scoreReduce.mp3'], });

实现游戏功能及游戏逻辑解读：

游戏逻辑代码：

开始页（父组件）： 包括开始页、游戏结束成功通关页、游戏结束失败未通关页 功能：触发开始闯关、闯关游戏结束获取所有关卡游戏得分数据渲染展示 游戏组件（子组件）： 包括游戏页、关卡结束闯关成功页、关卡结束闯关失败页 功能：游戏交互逻辑代码

游戏资源准备：

如音效（是否打到地鼠、加分、减分）、游戏场景图片、洞口图片、不同分值的地鼠、锤子图片等，如图：

速度控制-地鼠出洞/进洞：

地鼠出洞/进洞动画时长可配置化处理，如图：

地鼠的随机出现和位置变化逻辑

如图：

计分系统：计算、更新分数

如图：

关卡难度变化及游戏时间的控制

如图：

开始界面和结束界面的显示逻辑

如图：

地鼠被打效果

根据以上逻辑渲染游戏画面，锤子敲打地鼠，地鼠出洞/进洞，地鼠被打，如图：

效果展示：

以下为：游戏主页面 | 游戏3关对应的游戏展示界面及加分、减分、闯关成功 | 闯关失败 | 通关失败 | 通关成功 截图

 

打地鼠通关录屏

打地鼠通关录屏

打地鼠未通关录屏

打地鼠未通关录屏

代码：

父组件代码： <template> <div> <!-- 首页 --> <div class="page index"> <button @click="startGame" class="index_btn">开始游戏</button> </div> <!-- 游戏页 --> <game ref="gameTemp" @gameMounted="gameLoaded" @gameOver="gameOverEnd"></game> <!-- 游戏结束 --> <div v-if="popIndex == 1" class="page pop"> <div class="pop_body"> <div class="end_body" :class="{ 'success':levelScoreData[levelScoreData.length - 1].currScore >= levelScoreData[levelScoreData.length - 1].targetScore, 'fail':levelScoreData[levelScoreData.length - 1].currScore < levelScoreData[levelScoreData.length - 1].targetScore, }"> <!-- 成功 --> <div v-if=" levelScoreData[levelScoreData.length - 1].currScore >= levelScoreData[levelScoreData.length - 1].targetScore " class="end_tips"> <p>恭喜您游戏通关啦</p> </div> <!-- 失败 --> <div v-else class="end_tips"> <p>游戏未通关哦～</p> </div> <!-- 所有关卡游戏得分数据 --> <div class="end_score_body"> <div v-for="(item,index) in levelScoreData" :key="'levelScoreData' + index" class="end_score_list"> <div>第{{index+1}}关</div> <div>关卡得分：{{item.currScore}}</div> <div>目标得分：{{item.targetScore}}</div> </div> </div> <!-- 继续游戏 --> <button class="end_btn end_btn1" @click="againGame">继续游戏</button> <!-- 关闭 --> <button class="end_btn end_btn2" @click="hideGameOver">关闭</button> </div> </div> </div> </div> </template> <script> export default { name: 'index', components:{ game:()=>import("@/views/game") }, data() { return { popIndex:0, // 1:游戏结束 levelScoreData:[], // 所有关卡游戏得分数据 } }, created(){ }, mounted(){ }, watch: { }, methods:{ // 游戏组件加载完毕 gameLoaded(){ // 开始闯关 // this.$refs.gameTemp.gameRun(); }, // 当前关卡闯关游戏结束 gameOverEnd(levelScoreData){ this.levelScoreData = levelScoreData; this.popIndex = 1; }, // popClose(){ // btnClickDo(()=>{ // if(this.popIndex == 1){ // this.levelScoreData = []; // this.$refs.gameTemp.showGame = false; // } // this.$nextTick(()=>{ // this.popIndex = 0; // }) // }) // }, // 首页-开始游戏 startGame(){ btnClickDo('.index_btn',()=>{ this.$refs.gameTemp.gameRun(); this.popIndex = 0; this.levelScoreData = []; }) }, // 游戏结束-继续游戏 againGame(){ btnClickDo('.end_btn1',()=>{ this.startGame(); }) }, // 游戏结束-关闭 hideGameOver(){ btnClickDo('.end_btn2',()=>{ this.popIndex = 0; this.levelScoreData = []; }) }, } } </script> <style scoped> .page{ width:100vw; height:100vh; position:fixed; left:0; top:0; overflow: hidden;} /* 首页 */ .page.index{ background-color: #fff; display: flex; justify-content: center; align-items: center; } .index_btn{ width: 300px; height: 80px; font-size: 30px; border-radius: 40px; border: none;} /* 弹层 */ .page.pop{ background-color: rgba(0,0,0,.5); padding-bottom: 100px; display: flex; justify-content: center; align-items: center; } .pop_body{ position: relative;} /* 游戏结束 */ .end_body{ width: 600px; padding: 80px 20px; border-radius: 20px; background-color: #fff;} .end_body.success{} .end_body.fail{} .end_tips{ padding-bottom: 40px; text-align: center;} .end_tips p{ line-height: 76px; font-size: 36px; font-weight: bold;} .end_score_body{ border: #999 solid 1px;} .end_score_list{ line-height: 60px; border-top: #999 solid 1px; display: flex; justify-content: space-between; align-items: center; } .end_score_list:first-child{ border-top: transparent;} .end_score_list div{ padding-left: 10px;} .end_score_list div:nth-child(1){ width: 20%;} .end_score_list div:nth-child(2){ width: 40%; border-left: #999 solid 1px; border-right: #999 solid 1px;} .end_score_list div:nth-child(3){ width: 40%;} .end_btn{ display: block; width: 370px; height: 80px; margin: 35px auto 0 auto; color: #fff; font-size: 30px; border-radius: 40px; border: none;} .end_body.success .end_btn{ background-color: green;} .end_body.fail .end_btn{ background-color: red;} </style>

子组件代码：game.vue <template> <div> <!-- 游戏页 --> <div v-show="showGame" class="page game"> <div class="game_body"> <!-- 游戏展示区 --> <div class="show_list_body"> <!-- 所有洞口 --> <div v-for="(item,index) in gameLevel[gameLevelIndex].num" :key="'all' + index" class="show_list"> <!-- CSS遮罩处理地鼠出洞效果 --> <div @click="wrongMusicPlay" class="show_list_mole"> <!-- 出洞地鼠 --> <img @click.stop="addScore(iidex,index)" v-for="(iitem,iidex) in gameImgList" :key="'imgBefore' + iidex" v-if="iitem.index == index && addScoreIndex !== index" :src="iitem.img" :style="'animation: fadeToTopTan ' + moleAnimationTime.outExecutionTime + 's ease both , fadeToDownHide ' + moleAnimationTime.enterExecutionTime + 's ' + moleAnimationTime.outExecutionTime + 's ease forwards;'" /> <!-- 被打地鼠 --> <img v-for="(iitem,iidex) in gameImgList" :key="'imgAfter' + iidex" v-if="iitem.index == index && addScoreIndex === index" :src="iitem.img" :style="'animation: beingBeaten .3s ease both , fadeToDownHide .2s .3s ease forwards;'" /> </div> <!-- 锤子-敲打 --> <img v-show="addScoreIndex === index" class="show_list_hammer" src="@/assets/img/game/hammer.png" /> </div> </div> <!-- <div v-if="!inGame" @click="gameStart" class="game_start_btn">开始游戏</div> --> <div class="show_time"> <div class="show_time_li"> <div>得分：<span><i>{{currScore}}</i></span></div> <div>目标：<span><i>{{gameLevel[gameLevelIndex].targetScore}}</i></span></div> </div> <div class="show_time_li"> <div>时间：<span><i>{{countdownTime}}</i>s</span></div> <div>关卡：<span><i>{{gameLevelIndex+1}}</i></span></div> </div> </div> <!-- 当前关卡得分分值集合 --> <div class="show_score"> <div v-for="(item,index) in currScoreData" :key="'score' + index" class="show_score_num">{{item > 0 ? '+' : ''}}{{item}}</div> </div> </div> </div> <!-- 关卡结束 --> <div v-show="showLevelEnd" class="page level_end"> <div class="level_end_body"> <!-- 当前关卡闯关成功 --> <div v-if="currScore >= gameLevel[gameLevelIndex].targetScore" class="level_end_success"> <!-- 非最后一关闯关成功 --> <div v-if="gameLevelIndex < gameLevel.length - 1"> <div class="level_end_title">恭喜您，本关卡闯关成功</div> <div @click="nextLevel" class="level_end_btn">下一关</div> </div> <!-- 最后一关闯关成功 --> <div v-else> <div class="level_end_title">恭喜您，本关卡闯关成功，已通过全部关卡</div> <div @click="nextLevel" class="level_end_btn">结束游戏</div> </div> </div> <!-- 当前关卡闯关失败 --> <div v-else class="level_end_fail"> <div class="level_end_title">很遗憾，本关卡未闯关成功</div> <div @click="again" class="level_end_btn">再试试</div> <div @click="over" class="level_end_btn_over">结束游戏</div> </div> </div> </div> </div> </template> <script> export default { components:{ }, data(){ return{ showGame:false, // 显示游戏页 inGame:false, // 是否游戏进行中 currScore:0, // 当前分值 currScoreData:[], // 当前关卡分值集合 addScoreIndex:'', // 哪个洞口地鼠被打到了 addScoreIndexArr:[], // 数组数据存储哪些洞口地鼠被打到了，主要用于处理每次出洞地鼠大于1个时，被打过的地鼠再次被打时导致的加分减分问题 countdownTiming:0, // countdownTimeDefault:30, // 初始化倒计时时间（秒） countdownTime:0, gameImgList:[], // 出洞地鼠-列表数据 // 地鼠图片-配置数据（图片及对应分值），游戏时从中随机取数据追加至gameImgList中 gameImgData:[ { img:require('@/assets/img/game/1.png'), score:1, }, { img:require('@/assets/img/game/2.png'), score:2, }, { img:require('@/assets/img/game/3.png'), score:3, }, { img:require('@/assets/img/game/4.png'), score:-1, }, // 炸弹-负数分值，如不需要去掉即可 ], // 地鼠出洞/进洞动画时长配置（控制 地鼠出洞/进洞 速度） moleAnimationTime:{ // outExecutionTime:.5, // 出洞动画执行时长 // enterExecutionTime:.3, // 进洞动画执行时长 outExecutionTime:.6, // 出洞动画执行时长 enterExecutionTime:.6, // 进洞动画执行时长 }, // 游戏所有关卡数据配置，如下3关：当前关卡的洞口数量、每次几个地鼠出洞、目标分值 gameLevel:[ { num:9, // 洞口数量 moleNum:1, // 每次几个地鼠出洞 targetScore:15, // 目标分值 countdownTimeDefault:20, // 倒计时时间（秒） }, { num:12, // 洞口数量 moleNum:2, // 每次几个地鼠出洞 targetScore:30, // 目标分值 countdownTimeDefault:40, // 倒计时时间（秒） }, { num:15, // 洞口数量 moleNum:3, // 每次几个地鼠出洞 targetScore:45, // 目标分值 countdownTimeDefault:60, // 倒计时时间（秒） }, ], gameLevelIndex:0, // 当前关卡（从0开始） // 关卡结束 showLevelEnd:false, } }, created() { }, mounted() { // this.gameRun(); this.$emit('gameMounted'); }, watch:{ }, methods:{ // 开始游戏，计时等设置 startGame(){ this.inGame = true; this.currScore = 0; this.currScoreData = []; this.setGameInit(); this.countdownTiming = 0; // this.countdownTime = this.countdownTimeDefault; this.countdownTime = this.gameLevel[this.gameLevelIndex].countdownTimeDefault; this.changeTime(); }, // 计时 // timing , rafId; changeTime(k){ // console.log(k); if(!this.timing && k){ this.timing = k } // 1秒执行60次 this.rafId = requestAnimationFrame(this.changeTime); // 倒计时计算 this.countdownTiming++; // 1秒(1000ms)执行一次 if(this.countdownTiming % 60 == 0){ this.countdownTime-= 1; } if(this.countdownTime <= 0){ // 关卡结束 this.showLevelEnd = true; cancelAnimationFrame(this.rafId); clearTimeout(this.timer); } }, // 动态设置 出洞地鼠-列表数据（设置随机洞口出现） setGameInit(){ this.addScoreIndexArr = []; this.addScoreIndex = ''; let currLevelNum = this.gameLevel[this.gameLevelIndex].num; // 页面中呈现的所有洞口KEY集合 let randomLevelKey = []; for(var i=0; i < currLevelNum; i++){ randomLevelKey.push(i); } // 页面中呈现的所有洞口KEY集合，打乱顺序 randomLevelKey = randomLevelKey.sort(function(a, b){return 0.5 - Math.random();}); // console.log(randomLevelKey); let moleNum = this.gameLevel[this.gameLevelIndex].moleNum; this.gameImgList = []; // 解决与上次同一洞口导致不出现问题 this.$nextTick(()=>{ for(var i=0; i < moleNum; i++){ // index 出洞地鼠展示在对应KEY的洞口（这样设置保证KEY不会重复） this.gameImgList.push({index:randomLevelKey[i],...this.gameImgData[Math.floor(Math.random() * this.gameImgData.length)]}); } // 不断展示随机出现的地鼠定时器 this.timer = setTimeout(()=>{ this.setGameInit(); // },700) // 根据 地鼠出洞/进洞动画时长配置 计算设置 },(this.moleAnimationTime.enterExecutionTime + this.moleAnimationTime.outExecutionTime) * 1000 - 100) }) }, /// gameRun(){ this.gameLevelIndex = 0; if(this.showGame){ this.startGame(); }else{ this.showGame = true; this.$nextTick(()=>{ this.$nextTick(()=>{ this.startGame(); }) }) } }, // 开始游戏 // gameStart(){ // this.gameLevelIndex = 0; // this.startGame(); // }, // 计时结束-游戏结束 gameEnd(){ // console.log(this.currScore); // console.log(this.currScoreData); this.inGame = false; this.$emit('gameOver',this.levelScoreData); }, /// // 加分减分统计 addScore(index,addScoreIndex){ // 解决快速点击同一个地鼠不停计算分值问题（且处理每次出洞地鼠大于1个时，被打过的地鼠再次被打时导致的加分减分问题） if(this.addScoreIndexArr.indexOf(addScoreIndex) != -1){ return; } this.addScoreIndexArr.push(addScoreIndex); this.addScoreIndex = addScoreIndex; // setTimeout(()=>{ // this.addScoreIndexArr = []; // this.addScoreIndex = ''; // },500) // 打到地鼠音效 rightMusic.play(); let score = this.gameImgList[index].score; if(score > 0){ // 加分对应音效 scoreAddMusic.play(); }else{ // 减分对应音效 scoreReduceMusic.play(); } this.currScore += score; this.currScoreData.push(score); // console.log(this.currScore); // console.log(this.currScoreData); }, wrongMusicPlay(){ // 未打到地鼠音效 wrongMusic.play(); }, // 当前关卡闯关成功-下一关 nextLevel(){ btnClickDo('.level_end_btn',()=>{ this.setLevelScore(); this.showLevelEnd = false; if(this.gameLevelIndex >= (this.gameLevel.length - 1)){ // 所有关卡结束 this.gameEnd(); this.showGame = false; }else{ // 下一关 this.gameLevelIndex++; this.startGame(); } }) }, // 当前关卡闯关失败-再试试 again(){ btnClickDo('.level_end_btn',()=>{ this.showLevelEnd = false; this.startGame(); }) }, // 当前关卡闯关失败-结束游戏 over(){ btnClickDo('.level_end_btn_over',()=>{ this.setLevelScore(); this.showLevelEnd = false; // 游戏结束 - 闯关失败-结束游戏 this.gameEnd(); this.showGame = false; }) }, // 每一关结束存储当前关卡游戏得分数据 setLevelScore(){ if(this.gameLevelIndex == 0){ this.levelScoreData = []; this.levelScoreData.push({ targetScore:this.gameLevel[this.gameLevelIndex].targetScore, currScore:this.currScore, }); }else{ this.levelScoreData.push({ targetScore:this.gameLevel[this.gameLevelIndex].targetScore, currScore:this.currScore, }); } }, } } </script> <style> /* 地鼠出洞 */ @keyframes fadeToTopTan{ 0%{ transform:translate(0,100%) scale(1,1) rotateY(0); opacity:0;} 70%{ transform:translate(0,0) scale(1,1.1) rotateY(0); opacity:1;} 100%{ transform:translate(0,0) scale(1,1) rotateY(0); opacity:1;} } /* 地鼠进洞 */ @keyframes fadeToDownHide{ 0%{ transform:translate(0,0) scale(1,1) rotateY(0); opacity:1;} 100%{ transform:translate(0,100%) scale(1,1) rotateY(0); opacity:0;} } /* 地鼠被打 */ @keyframes beingBeaten{ 0% , 10% ,30% , 50% , 100%{ transform:translate(0,0) scale(1,1) rotateY(0); opacity:1;} 20% , 40% , 60%{ transform:translate(8px,0) scale(1,1) rotateY(20deg); opacity:1;} } </style> <style scoped> .page{ width:100%; height:100%; position:absolute; left:0; top:0; overflow: hidden;} /* 游戏页 */ .page.game{ overflow-y: auto; -webkit-overflow-scrolling: touch;} .game_body{ min-height: 100vh; padding-top: calc(10px * 2 + 130px); background: url(../assets/img/game/bg.png) no-repeat center top; background-size: 100%; overflow: hidden;} .show_time{ width: calc(100vw - 20px); height: 130px; padding: 20px; background-color: #fff; position: absolute; left: 10px; top: 10px; display: flex; justify-content: space-between; align-items: center; } .show_time_li{} .show_time_li div{ display: flex; justify-content: flex-start; align-items: center; } .show_time_li div span{ width: 50px; white-space: nowrap;} /* 当前关卡分值集合 */ .show_score{ width: 100%; position: fixed; left: 0; top: 180px; pointer-events: none;} .show_score_num{ width: 100%; text-align: center; color: #fff; font-size: 80px; font-weight: bold; position: absolute; left: 0; top: 0; text-shadow: #fc6100 4px 4px, #fc6100 4px -4px, #fc6100 -4px 4px, #fc6100 -4px -4px; animation: scoreHide .5s .1s linear forwards; } @keyframes scoreHide{ 0%{ transform:translateY(0); opacity:1;} 100%{ transform:translateY(-100%); opacity:0;} } /* 游戏展示区 */ .show_list_body{ /* padding: 0 10px; */ min-height: calc(100vh - (10px * 2 + 130px)); max-height: calc(243px * 5 + 20px * 4); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; align-content: space-around; } /* 所有洞口 */ .show_list{ width: 235px; height: 243px; background: url(../assets/img/game/list_bg.png); background-size: 100% 100%; position: relative;} /* .show_list:nth-child(3) ~ .show_list{ margin-top: 20px;} */ /* CSS遮罩处理地鼠出洞效果 */ .show_list_mole{ width: 235px; height: 282px; padding-top: 39px; position: absolute; left: 0; bottom: 0; -webkit-mask: url(data:image/png;base64,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) repeat center top; -webkit-mask-size: 100% 100%; } /* 出洞地鼠 */ .show_list_mole img{ width: 100%; height: 100%; transform-origin: center 203px; } /* 锤子-敲打 */ .show_list_hammer{ width: 171px; position: absolute; left: 80px; top: -80px; animation: hammerStrike .3s ease both; } /* 锤子敲打 */ @keyframes hammerStrike{ 0%{ transform:translate(60px,-60px) rotate(15deg); opacity: 1;} 80%{ transform:translate(0,0) rotate(-15deg); opacity: 1;} 100%{ transform:translate(0,0) rotate(-15deg); opacity: 0;} } .game_start_btn{ padding: 0 15px; height: 60px; line-height: 60px; border-radius: 30px 0 0 30px; background-color: pink; position: absolute; right: 0; top: 60vh;} /* 关卡结束 */ .page.level_end{ background-color: rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center; } .level_end_body{ width: 600px; padding: 80px 20px; border-radius: 20px; background-color: #fff;} /* 当前关卡闯关成功 */ .level_end_success{} /* 当前关卡闯关失败 */ .level_end_fail{} .level_end_title{ height: 60px; line-height: 60px; margin-bottom: 60px; text-align: center;} .level_end_btn, .level_end_btn_over{ width: 300px; height: 80px; line-height: 80px; margin: 0 auto; text-align: center; color: #fff; border-radius: 40px;} .level_end_success .level_end_btn{ background-color: green;} .level_end_fail .level_end_btn, .level_end_fail .level_end_btn_over{ background-color: red;} .level_end_btn_over{ margin-top: 35px;} </style> 图片资源：