vue3开发打砖块游戏代码怎么写

完整代码

停止
游戏开始
score:{{scroce}}

{{str}}







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.xboxWidth-ball){
map.x=-speed
}
if(state.y=offsetTop-offsetHeight&&
state.y=offsetLeft&&
state.xboxHeight){
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.xoffsetTop
&&state.yitem.active)){
clearInterval(timer)
timer2=setInterval(strFun,1000)
}
state.x=state.x+=map.x
state.y=state.y+=map.y
}
//移动方块左右移动方法,接住小球
constbottomMove=ev=>{
if(ev.code==="Space")clearInterval(timer)
switch(ev.key){
case"ArrowRight":
state.mx+=100
break
case"ArrowLeft":
state.mx-=100
break
}
state.mx=state.mxboxWidth-moveBottomW?boxWidth-moveBottomW:state.mx
}
//暂停游戏
conststop=()=>{
clearInterval(timer)
}
//开始游戏
conststart=()=>{
timer=setInterval(moveBall,20)
}

//绑定移动方块事件
onMounted(()=>{
document.addEventListener("keyup",bottomMove)
})
//移动出移动方块事件
onUnmounted(()=>{
clearInterval(timer)
})
.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;
}