前言

用3寫了幾個例項，感覺Vue3的composition Api設計得還是很不錯，改變了一下習慣，但寫多兩個就好了。 這次寫一個也是兒時很覺得很好玩的遊戲-打磚塊， 無聊的時候玩一下也覺得挺好玩，遊戲性也挺高。這次我直接用vite+vue3打包嘗試一下，vite也是開箱即用，特點是也是可以清除死程式碼，按需打包，所以打包速度也是非常快的。沒用過的同學可以嘗試用用。

遊戲效果

遊戲需求

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"www.cppcns.com
 

             :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 = http://www.cppcns.com
 
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 {
  qLCHCfoX              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 bottomMovqLCHCfoXe = 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，多寫寫例項。

附上打磚塊小遊戲地址

shinewen189..io/nigo-ball-v…

到此這篇關於用vue3開發一個打磚塊小遊戲的文章就介紹到這了,更多相關vue3打磚塊小遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！