vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

<テンプレート>

    <button @click="stop">停止</button>
    <button @click="start">ゲーム開始</button>
    <div style="color: red; text-align: center;font-size: 25px">スコア:{{scroce}}</div>

    <div class="box" :style="{幅:boxWidth +'px', 高さ: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>
</テンプレート>

<スクリプトの設定>
    'vue' から {onMounted、onUnmounted、reactive、toRefs} をインポートします。

    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) => {
            戻る {
                索引、
                アクティブ: 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 === インデックス) clearInterval(timer2)
        state.str += strArr.substr(インデックス、1)
        インデックス++
    }

    
    //ボールを動かす方法// 1. ここでは、マップ オブジェクトを使用して座標情報を記録して、ボールが左、右、上、および移動ブロックに当たったときにバウンドするかどうかを決定します// 2. ボールがブロックに衝突して消えるタイミングを検出するために、ブロックをループします const moveBall = () => {
        const {offsetTop、offsetHeight、offsetLeft、offsetWidth} = document.querySelector('.bottomMove')
        （状態x <= 0）の場合{
            map.x = 速度
        } そうでない場合 (state.x > boxWidth - ball) {
            map.x = -速度
        }
        （状態y <= 0）の場合{
            map.y = 速度
        }
        if (state.y >= offsetTop - offsetHeight &&
            state.y <= offsetTop + offsetHeight &&
            state.x >= offsetLeft &&
            状態.x < offsetLeft + offsetWidth) {
            map.y = -速度
        }
        （状態.y > ボックスの高さ）の場合{
            クリアインターバル(タイマー)
            警告('ゲームオーバー')
            ウィンドウの場所を再読み込み()
        }
        Array.from(state.arr).forEach((item, index) => {
            定数{
                オフセット左、
                オフセットトップ、
                オフセット幅、
                オフセット高さ
            } = document.querySelectorAll('.kuai')[インデックス]
            if (state.x > offsetLeft
                && state.x < offsetLeft + offsetWidth
                && state.y > オフセットトップ
                && state.y < offsetTop + offsetHeight) {
                状態.arr[インデックス].activeの場合{
                    状態.scroce += 100
                }
                state.arr[インデックス].active = true
            }
        })
        Array.from(state.arr).every(item => item.active) の場合 {
            クリアインターバル(タイマー)
            タイマー2 = setInterval(strFun, 1000)
        }
        状態.x = 状態.x += マップ.x
        状態.y = 状態.y += マップ.y
    }

    //ブロックを左右に動かし、ボールをキャッチするメソッド const bottomMove = ev => {
        if (ev.code === 'Space') clearInterval(timer)
        スイッチ (ev.key) {
            ケース 'ArrowRight':
                状態.mx += 100
                壊す
            ケース 'ArrowLeft':
                状態.mx -= 100
                壊す
        }
        state.mx = state.mx < 0 ? 0 : state.mx
        state.mx = state.mx > boxWidth - moveBottomW ? boxWidth - moveBottomW : state.mx
    }
    // ゲームを一時停止する const stop = () => {
        クリアインターバル(タイマー)
    }
    // ゲームを開始する const start = () => {
        タイマー = setInterval(moveBall, 20)
    }
    
    // 移動ブロックイベントをバインド onMounted(() => {
        document.addEventListener('keyup', bottomMove)
    })
    // 移動ブロックイベントから抜け出す onUnmounted(() => {
        クリアインターバル(タイマー)
    })
</スクリプト>

<スタイル>

    .bottomMove{
        幅: 100ピクセル;
        高さ: 10px;
        背景: 赤;
        位置: 絶対;
        遷移期間: 100ms;
        遷移タイミング関数: イーズアウト;
    }

    。ボール {
        幅: 20px;
        高さ: 20px;
        背景色: 赤;
        境界線の半径: 50%;
        位置: 絶対;
    }

    .kuaiBox{
        ディスプレイ: フレックス;
        flex-wrap: ラップ;
    }

    .kuai {
        幅: 30ピクセル;
        高さ: 10px;
        背景: 赤;
        マージン: 10px;
        遷移期間: 100ms;
        遷移タイミング関数: イーズイン;
    }

    .str {
        テキスト配置: 中央;
        フォントサイズ: 50px;
        色: 赤;

    }

    。箱 {

        コンテンツの中央揃え: 中央;
        幅: 500ピクセル;
        高さ: 500px;
        マージン: 0 自動;
        位置: 相対的;
        境界線: 5px 実線の赤;
        オーバーフロー: 非表示;
    }

    .ピッカー{
        幅: 50px;
        高さ: 50px;
    }
</スタイル>