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

完整代码

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.xoffsetLeft+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.xoffsetLeft+offsetWidth
&
    &
    state.y>
    offsetTop
&
    &
state.yoffsetTop+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.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.mx0?0:state.mx
state.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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！