怎么用vue3实现打砖块小游戏

这篇文章主要介绍“怎么用vue3实现打砖块小游戏”，在日常操作中，相信很多人在怎么用vue3实现打砖块小游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用vue3实现打砖块小游戏”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

游戏需求

1. 创建一个场景

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

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

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

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

完整代码

<template>    <button @click="stop">停止</button>    <button @click="start">游戏开始</button>    <div style="color: red; text-align: center;font-size: 25px">score:{{scroce}}</div>    <div class="box" :style="{width :boxWidth +"px", height:boxHeight +"px"}">        <div class="str">{{str}}</div>        <div class="kuaiBox">            <div class="kuai" v-for="(item,index) in arr" :key="index" :style="{opacity :item.active ? "0":"1"}"></div>        </div>        <div class="ball" :style="{left :x + "px", top : y + "px", width : ball +"px", height: ball+"px"}"></div>        <div class="bottomMove"             :style="{left :mx + "px" , top : my + "px",width :moveBottomW +"px",height : moveBottomH+"px"  }"></div>    </div></template><script setup>    import {onMounted, onUnmounted, reactive, toRefs} from "vue"    const boxWidth = 500, // 场景宽度        boxHeight = 300, // 场景高度        ball = 10,//小球的宽高        moveBottomH = 5,//移动方块高度        moveBottomW = 100//移动方块快读    const strArr = "恭喜你,挑战成功!!"    //用reactive 保存一些可观察信息    const state = 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)    let timer = null, // 小球定时器        speed = 3,// 小球速度        map = {x: 10, y: 10},        timer2 = null, // 挑战成功字眼显示定时器        index = 0//挑战成功字眼续个显示的索引值    // 挑战成功字眼续个显示的方法    const strFun = () => {        if (strArr.length === index) clearInterval(timer2)        state.str += strArr.substr(index, 1)        index++    }        //移动小球的方法      // 1.这里同过变量map 对象来记录坐标信息, 确定小球碰到 左右上 及移动方块是否回弹    // 2.循环砖块检测小球碰撞到砖块消失    const moveBall = () => {        const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = document.querySelector(".bottomMove")        if (state.x <= 0) {            map.x = speed        } else if (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("game over")            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.x        state.y = state.y += map.y    }    //移动方块左右移动方法 ,接住小球    const bottomMove = 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.mx < 0 ? 0 : state.mx        state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx    }    // 暂停游戏    const stop = () => {        clearInterval(timer)    }    // 开始游戏     const start = () => {        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: 0 auto;        position: relative;        border: 5px solid red;        overflow: hidden;    }    .picker {        width: 50px;        height: 50px;    }</style>

到此，关于“怎么用vue3实现打砖块小游戏”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！