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

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

成都创新互联公司技术团队十载来致力于为客户提供网站制作、成都网站建设、成都品牌网站建设、营销型网站建设、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了上1000家网站，包括各类中小企业、企事单位、高校等机构单位。

游戏需求

1. 创建一个场景

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

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

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

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

完整代码

    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)
    })

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