如何用vue3开发一个打砖块小游戏(vue3,web开发)

游戏效果

游戏需求

1. 创建一个场景

2. 创建一个球，创建一堆被打击方块

3. 创建一个可以移动方块并可控制左右移动

4. 当球碰撞左右上边界及移动方块回弹

5. 挡球碰撞下边界游戏结束

上完整代码

<template><button@click="stop">停止</button><button@click="start">游戏开始</button><divstyle="color:red;text-align:center;font-size:25px">score:{{scroce}}</div><divclass="box":style="{width:boxWidth+"px",height:boxHeight+"px"}"><divclass="str">{{str}}</div><divclass="kuaiBox"><divclass="kuai"v-for="(item,index)inarr":key="index":style="{opacity:item.active?"0":"1"}"></div></div><divclass="ball":style="{left:x+"px",top:y+"px",width:ball+"px",height:ball+"px"}"></div><divclass="bottomMove":style="{left:mx+"px",top:my+"px",width:moveBottomW+"px",height:moveBottomH+"px"}"></div></div></template><scriptsetup>import{onMounted,onUnmounted,reactive,toRefs}from"vue"constboxWidth=500,//场景宽度boxHeight=300,//场景高度ball=10,//小球的宽高moveBottomH=5,//移动方块高度moveBottomW=100//移动方块快读conststrArr="恭喜你,挑战成功!!"//用reactive保存一些可观察信息conststate=reactive({x:boxWidth/2-ball/2,//小球x轴位置信息计算默认位置在中间y:boxHeight-ball-moveBottomH,//小球Y轴的位置信息计算默认位置在中间mx:boxWidth/2-moveBottomW/2,//移动方块的位置信息计算默认位置在中间my:boxHeight-moveBottomH,//移动方块y轴的的位置信息计算默认位置在中间//被打击方块的数组arr:Array.from({length:50},(_,index)=>{return{index,active:false}}),str:"",//返回挑战成功字眼scroce:0//分数})//用toRefs将观察对象的信息解构出来供模板使用const{x,y,mx,my,arr,str,scroce}=toRefs(state)lettimer=null,//小球定时器speed=3,//小球速度map={x:10,y:10},timer2=null,//挑战成功字眼显示定时器index=0//挑战成功字眼续个显示的索引值//挑战成功字眼续个显示的方法conststrFun=()=>{if(strArr.length===index)clearInterval(timer2)state.str+=strArr.substr(index,1)index++}//移动小球的方法//1.这里同过变量map对象来记录坐标信息,确定小球碰到左右上及移动方块是否回弹//2.循环砖块检测小球碰撞到砖块消失constmoveBall=()=>{const{offsetTop,offsetHeight,offsetLeft,offsetWidth}=document.querySelector(".bottomMove")if(state.x<=0){map.x=speed}elseif(state.x>boxWidth-ball){map.x=-speed}if(state.y<=0){map.y=speed}if(state.y>=offsetTop-offsetHeight&&state.y<=offsetTop+offsetHeight&&state.x>=offsetLeft&&state.x<offsetLeft+offsetWidth){map.y=-speed}if(state.y>boxHeight){clearInterval(timer)alert("gameover")window.location.reload()}Array.from(state.arr).forEach((item,index)=>{const{offsetLeft,offsetTop,offsetWidth,offsetHeight}=document.querySelectorAll(".kuai")[index]if(state.x>offsetLeft&&state.x<offsetLeft+offsetWidth&&state.y>offsetTop&&state.y<offsetTop+offsetHeight){if(!state.arr[index].active){state.scroce+=100}state.arr[index].active=true}})if(Array.from(state.arr).every(item=>item.active)){clearInterval(timer)timer2=setInterval(strFun,1000)}state.x=state.x+=map.xstate.y=state.y+=map.y}//移动方块左右移动方法,接住小球constbottomMove=ev=>{if(ev.code==="Space")clearInterval(timer)switch(ev.key){case"ArrowRight":state.mx+=100breakcase"ArrowLeft":state.mx-=100break}state.mx=state.mx<0?0:state.mxstate.mx=state.mx>boxWidth-moveBottomW?boxWidth-moveBottomW:state.mx}//暂停游戏conststop=()=>{clearInterval(timer)}//开始游戏conststart=()=>{timer=setInterval(moveBall,20)}//绑定移动方块事件onMounted(()=>{document.addEventListener("keyup",bottomMove)})//移动出移动方块事件onUnmounted(()=>{clearInterval(timer)})</script><style>.bottomMove{width:100px;height:10px;background:red;position:absolute;transition-duration:100ms;transition-timing-function:ease-out;}.ball{width:20px;height:20px;background-color:red;border-radius:50%;position:absolute;}.kuaiBox{display:flex;flex-wrap:wrap;}.kuai{width:30px;height:10px;background:red;margin:10px;transition-duration:100ms;transition-timing-function:ease-in;}.str{text-align:center;font-size:50px;color:red;}.box{justify-content:center;width:500px;height:500px;margin:0auto;position:relative;border:5pxsolidred;overflow:hidden;}.picker{width:50px;height:50px;}</style>