VUE implementiert einen Beispielcode für das Spiel Flappy Bird

let rafId = null; // requestAnimationFrame-ID
lass startSpeed ​​​​= 1;
const SPEED = 0.04; // Beschleunigung const UP = 5.0; // Obergrenze der Geschwindigkeitsakkumulation const UP_SUM = 30; // Höhe eines Sprungs const BIRD_WIDTH = 50; // Breite des Vogelbildes 50px
const PIPE_DISTANCE = 350; // Horizontaler Abstand zwischen Rohren let id = 0; // Eindeutige ID des Rohrs, die Zählung beginnt bei 0 ...
 
Daten() {
    zurückkehren {
      Start: falsch,
      Clientbreite: 0,
      Clienthöhe: 0,
      spaceHeight: [240, 200, 160], // Der Abstand zwischen dem oberen und dem unteren RohrpipeArr: [], // Rohr-Arrayscore: 0, // PunktzahljumpSum: 0, // Aktuelle relative SprunghöhejumpFlag: false, // true – Drücken Sie die Leertaste, um in die aufsteigende Phase zu springen; false – Phase des freien FallsdropBirdImg: require("@/assets/img/bird/bird0_0.png"),
      flyBirdImg: erfordern("@/assets/img/bird/bird0_2.png"),
      gameOver: false, // Flag, das einen Spielfehler anzeigt, wird verwendet, um Animationsframes zu stoppen};
},

<div class="Vogel" id="Vogel" ref="Vogel"></div>
 
 #Vogel {
      Höhe: 50px;
      Breite: 50px;
      Randradius: 50 %;
      Hintergrund: URL("~assets/img/bird/bird0_1.png") keine Wiederholung, Mitte/enthalten;
      // Anfangsposition des Vogels position: absolute;
      links: 300px;
      oben: 300px;
}

Schleife() {
      lass _this = dies;
      wenn (_this.jumpFlag) {
        // Der Vogel springt_dies.jump();
      }
      lass oben = _this.$refs.bird.offsetTop;
      if (top > _this.clientHeight - BIRD_WIDTH || top <= 0) {
        //Erreiche die Grenze, das Spiel endet_this.resetGame();
      } sonst wenn (!_this.jumpFlag) {
        _this.$refs.bird.style.background = `url('${_this.dropBirdImg}') keine Wiederholung zentrieren/enthalten`;
        _this.$refs.bird.style.top = top + startSpeed ​​* startSpeed ​​+ "px"; // Beschleunigten Fall simulieren, wenn (startSpeed ​​< UP) {
          startSpeed ​​+= GESCHWINDIGKEIT;
        }
      }
      _this.pipesMove(); // Pipeline-Bewegung}

springen() {
      lass _this = dies;
      _this.$refs.bird.style.background = `url('${_this.flyBirdImg}') keine Wiederholung zentriert/enthalten`;
      wenn (_this.jumpSum > UP_SUM) {
        // Beim Erreichen der Spitze herunterfallen_this.jumpFlag = false;
        _this.jumpSum = 0;
        Startgeschwindigkeit = 1;
      } anders {
        _this.$refs.bird.style.top = _this.$refs.bird.offsetTop - 8 + "px";
        _this.jumpSum += 8;
      }
}

Animation: bgMove 8s linear unendlich;
      @keyframes bgMove {
        0% {
          Hintergrundposition: 805px 0;
        }
        100 % {
          Hintergrundposition: 0 0;
        }
}

addPipe(id) {
      lass obj = {};
      sei top_num = diese.Summe(10, 170);
      lass Höhe = diese.spaceHeight[
        Math.floor(Math.random() * dieser.RaumHöhe.Länge)
      ]; // Lückenwert nach dem Zufallsprinzip auswählen let bottom_num = height - top_num;
      obj.top = top_num;
      obj.id = ID;
      obj.rechts = -(PIPE_DISTANCE / 2);
      obj.bottom = untere_Nummer;
      dies.pipeArr.push(obj);
},
Summe(m, n) {
      // Zufallszahlen zwischen nm return Math.floor(Math.random() * (m - n) + n);
}

RohreBewegen() {
      lass _this = dies;
      wenn (_this.pipeArr.length === 0) {
        zurückkehren;
      }
      lass right0 = _this.pipeArr[0].right;
      wenn (rechts0 > this.clientWidth + 300) {
        dies.pipeArr.shift();
      }
      lass right_last = _this.pipeArr[_this.pipeArr.length - 1].right;
      wenn (rechts_letzter >= PIPE_DISTANCE / 2) {
        ich würde++;
        dies.addPipe(id);
      }
      für (lass i = 0; i < _this.pipeArr.length; i++) {
        // Bestimmen Sie, ob der Vogel das Rohr berührt hat. Der Vogel ist 50*50, links: 300px; das Rohr ist 100px breit; der Rohreintrittsbereich rechts ist Breite-450 bis Breite-300
        Wenn (
          _this.pipeArr[i].right >= _this.clientWidth - 450 &&
          _this.pipeArr[i].right <= _this.clientWidth - 300
        ) {
          // Das Rohr hat den Berührungsbereich des Vogels erreicht. let bird_top = _this.$refs.bird.offsetTop;
          // 12 ist das Vogelbildmaterial mit Leerzeichen oben und unten, wenn (
            bird_top <= _this.clientHeight / 2 - _this.pipeArr[i].top - 12 ||
            Vogelspitze >=
              _this.clientHeight / 2 + _this.pipeArr[i].bottom - BIRD_WIDTH + 12
          ) {
            // drücke die Pipe_this.resetGame();
            zurückkehren;
          }
        }
        if (_this.pipeArr[i].right === _this.clientWidth - 300 && _this.pipeArr[i].right === _this.clientWidth - 301) { // Wenn sich direkt links vom Vogel ein Rohr befindet, ist das ein Beweis dafür, dass der Vogel durch das Rohr geflogen ist. Berechnen Sie die Punktzahl des Vogels basierend auf der Rohr-ID _this.score = _this.pipeArr[i].id + 1;
        }
        _this.pipeArr[i].right = _this.pipeArr[i].right + 2; // Das Rohr bewegt sich 2px pro Frame
      }
}

<Abschnitt Klasse="pipes-wrap" ref="pipes">
          <div
            Klasse="Pipe-Element"
            v-for="(Element, Index) in PipeArr"
            :Schlüssel="Artikel-ID"
            :id="'Rohr' + Index"
            :style="'rechts:' + item.rechts + 'px;'"
          >
            <div
              Klasse = "Rohr Rohrspitze"
              :style="'oben:-' + item.top + 'px;'"
            ></div>
            <div
              Klasse = "Rohr Rohr-Boden"
              :Stil="'unten:-' + Element.unten + 'px;'"
            ></div>
          </div>
</Abschnitt>
 
.pipes-wrap {
        Position: relativ;
        Höhe: 100%;
        Überlauf: versteckt;
        .pipe-Element {
          Position: absolut;
          Höhe: 100%;
          Breite: 100px;
          .Rohr {
            Breite: 100 %;
            Höhe: 50%;
            Position: relativ;
          }
          .Rohrspitze {
            Hintergrund: URL ('"~assets/img/bird/pipe_down.png') keine Wiederholung;
            Hintergrundgröße: 100px;
            Hintergrundposition: unten;
          }
          .Rohrboden {
            Hintergrund: URL ('"~assets/img/bird/pipe_up.png') keine Wiederholung;
            Hintergrundgröße: 100px;
            Hintergrundposition: oben;
          }
        }
}