Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit vue3 ein Brick-Breaking-Spiel entwickeln

<Vorlage>

    <button @click="stop">Stopp</button>
    <button @click="start">Spielstart</button>
    <div style="Farbe: rot; Textausrichtung: Mitte; Schriftgröße: 25px">Punktzahl:{{scroce}}</div>

    <div Klasse="box" :style="{Breite :boxWidth +'px', Höhe:boxHeight +'px'}">
        <div Klasse="str">{{str}}</div>
        <div Klasse="kuaiBox">
            <div class="kuai" v-for="(item,index) in arr" :key="index" :style="{opacity :item.active ? '0':'1'}"></div>
        </div>
        <div Klasse="Ball" :style="{links :x + 'px', oben : y + 'px', Breite : Ball +'px', Höhe: Ball+'px'}"></div>
        <div Klasse="bottomMove"
             :style="{links :mx + 'px' , oben : my + 'px',Breite :moveBottomW +'px',Höhe : moveBottomH+'px' }"></div>
    </div>
</Vorlage>

<Skript-Setup>
    importiere {onMounted, onUnmounted, reaktiv, toRefs} aus 'vue'

    const boxWidth = 500, // Szenenbreite boxHeight = 300, // Szenenhöhe ball = 10, // Ballbreite und -höhe moveBottomH = 5, // Blockhöhe verschieben moveBottomW = 100 // Block verschieben, schnelles Lesen const strArr = 'Herzlichen Glückwunsch, Herausforderung erfolgreich!'

    //Verwenden Sie reactive, um einige beobachtbare Informationen zu speichern const state = reactive({
        x: boxWidth / 2 - ball / 2, // Die Standardposition der x-Achse des Balls ist in der Mitte y: boxHeight - ball - moveBottomH, // Die Standardposition der y-Achse des Balls ist in der Mitte mx: boxWidth / 2 - moveBottomW / 2, // Die Standardposition des bewegten Blocks ist in der Mitte my: boxHeight - moveBottomH, // Die Standardposition der y-Achse des bewegten Blocks ist in der Mitte // Array der getroffenen Blöcke arr: Array.from({length: 50}, (_, index) => {
            zurückkehren {
                Index,
                aktiv: false
            }
        }),
        str: '', // Gibt das Wort „erfolgreiche Herausforderung“ zurück scroce: 0 // Punktzahl })
    // Verwenden Sie toRefs, um die Informationen des beobachteten Objekts für die Verwendung als Vorlage zu dekonstruieren const {x, y, mx, my, arr, str, scroce} = toRefs(state)
    let timer = null, // Balltimergeschwindigkeit = 3, // Ballgeschwindigkeitskarte = {x: 10, y: 10},
        timer2 = null, // Timer für erfolgreiche Wortanzeige der Challenge index = 0 // Indexwert für erfolgreiche Wortanzeige der Challenge // Methode zur Anzeige des erfolgreichen Worts der Challenge const strFun = () => {
        wenn (strArr.length === index) clearInterval(timer2)
        Zustand.str += strArr.substr(index, 1)
        Index++
    }

    
    //Methode zum Bewegen des Balls// 1. Hier wird das Kartenobjekt verwendet, um die Koordinateninformationen aufzuzeichnen und festzustellen, ob der Ball abprallt, wenn er die linken, rechten, oberen und beweglichen Blöcke trifft// 2. Durchlaufe die Steine, um festzustellen, wann der Ball mit den Steinen kollidiert und verschwindet const moveBall = () => {
        const {offsetTop, offsetHeight, offsetLeft, offsetWidth} = document.querySelector('.bottomMove')
        wenn (Zustand.x <= 0) {
            map.x = Geschwindigkeit
        } sonst wenn (Zustand.x > Boxbreite - Ball) {
            map.x = -Geschwindigkeit
        }
        wenn (Zustand.y <= 0) {
            map.y = Geschwindigkeit
        }
        wenn (Zustand.y >= OffsetTop - OffsetHeight &&
            Zustand.y <= OffsetTop + OffsetHeight &&
            Zustand.x >= offsetLeft &&
            Zustand.x < OffsetLinks + OffsetBreite) {
            map.y = -Geschwindigkeit
        }
        wenn (Zustand.y > Boxhöhe) {
            Intervall löschen(Timer)
            Alarm('Spiel vorbei')
            Fenster.Standort.neu laden()
        }
        Array.from(Zustand.arr).fürEach((Element, Index) => {
            Konstante {
                OffsetLinks,
                Offset oben,
                Offsetbreite,
                Offsethöhe
            } = Dokument.querySelectorAll('.kuai')[index]
            wenn (state.x > offsetLeft
                && Zustand.x < OffsetLinks + OffsetBreite
                && status.y > offsetTop
                && Zustand.y < Offset oben + Offset Höhe) {
                wenn (!state.arr[index].active) {
                    Zustand.scroce += 100
                }
                Zustand.arr[index].active = true
            }
        })
        wenn (Array.von(Zustand.arr).jedes(Element => Element.aktiv)) {
            Intervall löschen(Timer)
            Timer2 = setzeIntervall(strFun, 1000)
        }
        Zustand.x = Zustand.x += Karte.x
        Zustand.y = Zustand.y += Karte.y
    }

    //Methode, um den Block nach links und rechts zu bewegen und den Ball zu fangen const bottomMove = ev => {
        wenn (ev.code === 'Leerzeichen') ClearInterval(Timer)
        Schalter (ev.key) {
            Fall 'PfeilRechts':
                staat.mx += 100
                brechen
            Fall 'Pfeil nach links':
                staat.mx -= 100
                brechen
        }
        staat.mx = staat.mx < 0 ? 0 : staat.mx
        Zustand.mx = Zustand.mx > Boxbreite - MoveBottomW ? Boxbreite - MoveBottomW : Zustand.mx
    }
    // Spiel pausieren const stop = () => {
        Intervall löschen(Timer)
    }
    // Starte das Spiel const start = () => {
        Timer = Intervall festlegen(Ball bewegen, 20)
    }
    
    // Bewegliches Blockereignis binden onMounted(() => {
        document.addEventListener('Taste hoch', unten verschieben)
    })
    // Aus dem Bewegungsblock-Ereignis herausgehen onUnmounted(() => {
        Intervall löschen(Timer)
    })
</Skript>

<Stil>

    .bottomMove {
        Breite: 100px;
        Höhe: 10px;
        Hintergrund: rot;
        Position: absolut;
        Übergangsdauer: 100ms;
        Übergangs-Timing-Funktion: Easy-Out;
    }

    .ball {
        Breite: 20px;
        Höhe: 20px;
        Hintergrundfarbe: rot;
        Randradius: 50 %;
        Position: absolut;
    }

    .kuaiBox {
        Anzeige: Flex;
        Flex-Wrap: Umwickeln;
    }

    .kuai {
        Breite: 30px;
        Höhe: 10px;
        Hintergrund: rot;
        Rand: 10px;
        Übergangsdauer: 100ms;
        Übergangs-Timing-Funktion: Ease-In;
    }

    .str {
        Textausrichtung: zentriert;
        Schriftgröße: 50px;
        Farbe: rot;

    }

    .Kasten {

        Inhalt ausrichten: zentriert;
        Breite: 500px;
        Höhe: 500px;
        Rand: 0 automatisch;
        Position: relativ;
        Rand: 5px durchgehend rot;
        Überlauf: versteckt;
    }

    .picker {
        Breite: 50px;
        Höhe: 50px;
    }
</Stil>