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