当前位置：首页 > news >正文

vue脚手架开发打地鼠游戏

news 2025/9/26 5:20:35

游戏设计：

规划游戏的核心功能，如场景、随机出现的地鼠、计分系统、游戏时间限制等。
简单设计游戏流程，包括开始界面、游戏进行中、关卡设置（如不同关卡地鼠出现数量、游戏时间等）、关卡闯关成功|失败、游戏结束闯关成功|失败等状态。
确定游戏的交互方式，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;'" /><!-- 被打地鼠 --><imgv-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>