小网站模板下载地址,什么是商务网站,大型网站建设培训课件,电大网上作业代做网站游戏设计#xff1a; 规划游戏的核心功能#xff0c;如场景、随机出现的地鼠、计分系统、游戏时间限制等。简单设计游戏流程#xff0c;包括开始界面、游戏进行中、关卡设置#xff08;如不同关卡地鼠出现数量、游戏时间等#xff09;、关卡闯关成功|失败、游戏结束闯关成…游戏设计 规划游戏的核心功能如场景、随机出现的地鼠、计分系统、游戏时间限制等。简单设计游戏流程包括开始界面、游戏进行中、关卡设置如不同关卡地鼠出现数量、游戏时间等、关卡闯关成功|失败、游戏结束闯关成功|失败等状态。确定游戏的交互方式PC端测试鼠标左键点击击打地鼠移动端手指点击击打地鼠。
以下为游戏开发前制作的游戏界面展示效果如图 其中有加分、减分对应分值的地鼠图片元素洞口图片元素以及使用CSS遮罩效果实现的地鼠出洞时像钻出来的效果图片元素红色的这里遮罩图片顶部切片向上延伸39px 问题解决 与游戏引擎开发不同需要解决的问题如下
1、htmlcss开发中元素层级问题很难直接实现地鼠从洞中钻出的效果 这里使用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关对应的游戏展示界面及加分、减分、闯关成功 | 闯关失败 | 通关失败 | 通关成功 截图 打地鼠通关录屏 打地鼠通关录屏 打地鼠未通关录屏 打地鼠未通关录屏 代码 父组件代码
templatediv!-- 首页 --div classpage indexbutton clickstartGame classindex_btn开始游戏/button/div!-- 游戏页 --game refgameTemp gameMountedgameLoaded gameOvergameOverEnd/game!-- 游戏结束 --div v-ifpopIndex 1 classpage popdiv classpop_bodydiv classend_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-iflevelScoreData[levelScoreData.length - 1].currScore levelScoreData[levelScoreData.length - 1].targetScore classend_tipsp恭喜您游戏通关啦/p/div!-- 失败 --div v-else classend_tipsp游戏未通关哦/p/div!-- 所有关卡游戏得分数据 --div classend_score_bodydiv v-for(item,index) in levelScoreData :keylevelScoreData index classend_score_listdiv第{{index1}}关/divdiv关卡得分{{item.currScore}}/divdiv目标得分{{item.targetScore}}/div/div/div!-- 继续游戏 --button classend_btn end_btn1 clickagainGame继续游戏/button!-- 关闭 --button classend_btn end_btn2 clickhideGameOver关闭/button/div/div/div/div
/templatescript
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 [];})},}
}
/scriptstyle 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
templatediv!-- 游戏页 --div v-showshowGame classpage gamediv classgame_body!-- 游戏展示区 --div classshow_list_body!-- 所有洞口 --div v-for(item,index) in gameLevel[gameLevelIndex].num :keyall index classshow_list!-- CSS遮罩处理地鼠出洞效果 --div clickwrongMusicPlay classshow_list_mole!-- 出洞地鼠 --img click.stopaddScore(iidex,index)v-for(iitem,iidex) in gameImgList:keyimgBefore iidexv-ifiitem.index index addScoreIndex ! index:srciitem.img:styleanimation: fadeToTopTan moleAnimationTime.outExecutionTime s ease both , fadeToDownHide moleAnimationTime.enterExecutionTime s moleAnimationTime.outExecutionTime s ease forwards; /!-- 被打地鼠 --imgv-for(iitem,iidex) in gameImgList:keyimgAfter iidexv-ifiitem.index index addScoreIndex index:srciitem.img:styleanimation: beingBeaten .3s ease both , fadeToDownHide .2s .3s ease forwards; //div!-- 锤子-敲打 --img v-showaddScoreIndex index classshow_list_hammer src/assets/img/game/hammer.png //div/div!-- div v-if!inGame clickgameStart classgame_start_btn开始游戏/div --div classshow_timediv classshow_time_lidiv得分spani{{currScore}}/i/span/divdiv目标spani{{gameLevel[gameLevelIndex].targetScore}}/i/span/div/divdiv classshow_time_lidiv时间spani{{countdownTime}}/is/span/divdiv关卡spani{{gameLevelIndex1}}/i/span/div/div/div!-- 当前关卡得分分值集合 --div classshow_scorediv v-for(item,index) in currScoreData :keyscore index classshow_score_num{{item 0 ? : }}{{item}}/div/div/div/div!-- 关卡结束 --div v-showshowLevelEnd classpage level_enddiv classlevel_end_body!-- 当前关卡闯关成功 --div v-ifcurrScore gameLevel[gameLevelIndex].targetScore classlevel_end_success!-- 非最后一关闯关成功 --div v-ifgameLevelIndex gameLevel.length - 1div classlevel_end_title恭喜您本关卡闯关成功/divdiv clicknextLevel classlevel_end_btn下一关/div/div!-- 最后一关闯关成功 --div v-elsediv classlevel_end_title恭喜您本关卡闯关成功已通过全部关卡/divdiv clicknextLevel classlevel_end_btn结束游戏/div/div/div!-- 当前关卡闯关失败 --div v-else classlevel_end_faildiv classlevel_end_title很遗憾本关卡未闯关成功/divdiv clickagain classlevel_end_btn再试试/divdiv clickover classlevel_end_btn_over结束游戏/div/div/div/div/div
/templatescript
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 i0; 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 i0; 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图片资源
