VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

Willkommen zur vorherigen Canvas-Spielserie:

《VUE implementiert einen Flappy Bird~~~》

Errate das Wortspiel

《VUE+Canvas realisiert Flipper- und Brick-Breaking-Spiel für den Desktop》

《VUE+Canvas implementiert ein Tippspiel von Thunder Fighter》

Wie der Titel schon sagt, hat jeder dieses Spiel schon einmal gespielt und es ist überall zu sehen. Verwenden Sie die Richtungstasten nach links und rechts, um die Bewegung des Gottes des Reichtums zu steuern und die vom Himmel fallenden Goldbarren aufzufangen. Wenn die Zeit abgelaufen ist, endet das Spiel. Schauen wir uns zunächst die Wirkung an:

Im Vergleich zum vorherigen Thunder Fighter, der überall Kugeln abfeuerte, ist die Bewegungsbahn der Elemente diesmal sehr einfach, mit vertikalen Juwelen und einem horizontal bewegten God of Wealth. Ähnlich wie beim vorherigen Code sind hier die wichtigsten Schritte:

1. Der Gott des Reichtums bewegt sich horizontal mit Tastatursteuerung

Dies ist sehr einfach und ähnelt der Steuerung des Schiebereglers in „VUE + Canvas zur Realisierung des Desktop-Flipper-Ziegeleliminierungsspiels“:

zeichneCaishen() {
      lass _this = dies;
      _this.ctx.speichern();
      _dieses.ctx.drawImage(
        _this.caishenImg,
        _this.caishen.x,
        _dies.caishen.y,
        120,
        120
      );
      _this.ctx.restore();
},
bewegeCaishen() {
      dies.caishen.x += dies.caishen.dx;
      wenn (this.caishen.x > this.clientWidth - 120) {
        this.caishen.x = this.clientWidth – 120;
      } sonst wenn (this.caishen.x < 0) {
        dies.caishen.x = 0;
      }
}

2. Juwelen, die vom Himmel fallen

Dies ist ebenfalls sehr einfach, es ist jedoch zu beachten, dass der anfängliche x-Wert der Juwelen nicht zufällig von 0 bis zur Clientbreite festgelegt werden kann, da sich die Juwelen sonst leicht anhäufen und die Spielbarkeit des Spiels beeinträchtigen können. Daher ist es am besten, die Juwelen auf verschiedene Spuren zu verteilen. Hier teilen wir die Leinwandbreite in 5 Spuren auf. Wenn die Juwelen anfänglich gezeichnet werden, verteilen wir sie auf der Spur und der y-Wert wird zufällig auf eine bestimmte Höhe eingestellt, um ein versetztes Erscheinungsbild zu erzeugen. Anschließend werden die neu generierten Juwelen entsprechend der Gleisverteilung generiert, um ein Zusammendrängen der Juwelen zu vermeiden.

ErzeugeSchatz() {
      lass _this = dies;
      wenn (_this.treasureArr.length < MaxNum) {
        lass random = Math.floor(Math.random() * TreasureNames.length);
        lass Kanal = _this.getRandomArbitrary(1, 5);
        _dieser.treasureArr.push({
          x: _this.channelWidth * (1 / 2 + (Kanal - 1)) - 30,
          y: 0,
          Name: TreasureNames[random],
          Geschwindigkeit: _this.getRandomArbitrary(2, 4)
        });
      }
},
filterTreasure(Artikel) {
      lass _this = dies;
      Wenn (
        Artikel.x <= _this.caishen.x + 110 &&
        item.x >= _this.caishen.x &&
        Artikel.y > _this.caishen.y
      ) {
        // Bestimme die Berührungsreichweite mit dem Gott des Reichtums_this.score += _this.treasureObj[item.name].score;
        gibt false zurück;
      }
      wenn (item.y >= _this.clientHeight) {
        gibt false zurück;
      }
      gibt true zurück;
},
zeichneSchatz() {
      lass _this = dies;
      _this.treasureArr = _this.treasureArr.filter(_this.filterTreasure);
      _this.treasureArr.fürEach(Artikel => {
        _dieses.ctx.drawImage(
          _this.treasureObj[Artikelname].src,
          item.x,
          Artikel.y,
          60,
          60
        );
        item.y += item.geschwindigkeit;
      });
},
getRandomArbitrary(min, max) {
      gibt Math.random() * (max - min) + min zurück;
}

Hier verwenden wir die Filterfunktion, um die Juwelen herauszufiltern, die verschwinden sollen. Wenn wir die Methode for+splice+i-- verwenden, verursacht dies Jitter.

Geben Sie dann jedem Juwel eine zufällige Bewegungsgeschwindigkeit, und wenn das Juwel in den Bildbereich des Gottes des Reichtums eintritt, wird die entsprechende Punktzahl gesammelt.

3. Countdown-Ring

Stellen Sie den Countdown auf 30 Sekunden ein. Berechnen Sie dann im Rückruf requestAnimationFrame, ob die Differenz in Millisekunden zwischen der aktuellen Zeit und dem letzten Zeitstempel größer als 1000 ist, um die Sekunden zu berechnen. Nehmen Sie dann einen weiteren Zeitstempel, um den Fortschritt zu akkumulieren und eine reibungslose Bewegung des Rings zu erreichen.

zeichneCountDown() {
      // Zeichne den Fortschrittsring let _this = this;
      _this.progress += Date.now() - _this.timeTag2;
      _this.timeTag2 = Date.now();
      _this.ctx.beginPath();
      _this.ctx.moveTo(50, 50);
      _diese.ctx.arc(
        50,
        50,
        40,
        Math.PI * 1,5,
        Math.PI * (1,5 + 2 * (_this.progress / (countDownInit * 1000))),
        FALSCH
      );
      _this.ctx.closePath();
      _this.ctx.fillStyle = "gelb";
      _this.ctx.fill();
 
      // Einen ausgefüllten Kreis zeichnen_this.ctx.beginPath();
      _this.ctx.arc(50, 50, 30, 0, Math.PI * 2);
      _this.ctx.closePath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.fill();
 
      //Füllen Sie text_this.ctx.font = "fett 16px Microsoft YaHei";
      _this.ctx.fillStyle = "#333";
      _this.ctx.textAlign = "zentriert";
      _this.ctx.textBaseline = "Mitte";
      _this.ctx.moveTo(50, 50);
      _this.ctx.fillText(_this.countDown + "s", 50, 50);
    }
(Funktion animloop() {
        _this.ctx.clearRect(0, 0, _this.clientWidth, _this.clientHeight);
        _diese.Schleife();
        animationId = Fenster.requestAnimationFrame(animloop);
        wenn (_this.countDown === 0) {
          _this.gameOver = wahr;
          Fenster.CancelAnimationFrame(animationId);
        }
        wenn (Datum.jetzt() - _dieses.ZeitTag >= 1000) {
          _dieser.countDown--;
          _this.timeTag = Date.now();
        }
})();

An diesem Punkt ist ein sehr einfaches Spiel mit dem Gott des Reichtums abgeschlossen, bei dem es darum geht, Goldbarren zu fangen. Um den Schwierigkeitsgrad zu erhöhen, können Sie natürlich einen Abschnitt einrichten, in dem kontinuierlich Bomben abgeworfen werden. Das Prinzip ist dasselbe wie bei der Bewegung von Juwelen.

Nachfolgend sehen Sie den vollständigen Code zu Ihrer Information:

<Vorlage>
  <div Klasse="caishen">
    <canvas id="caishen" width="1200" height="750"></canvas>
    <div Klasse="Container" v-if="gameOver">
      <div Klasse="Dialog">
        <p class="once-again">Herzlichen Glückwunsch! </p>
        <p class="once-again">Schätze in dieser Runde: {{ score }} Punkte</p>
      </div>
    </div>
  </div>
</Vorlage>
 
<Skript>
const TreasureNames = [
  "Yuanbao",
  "Tongqian",
  "jintiao",
  "shuijin_red",
  "shuijin_blau",
  "Fudai"
];
lass animationId = null;
Lassen Sie countDownInit = 0;
Konstante MaxNum = 5;
Standard exportieren {
  Name: "CaiShen",
  Daten() {
    zurückkehren {
      Punktzahl: 0,
      ctx: null,
      caishenImg: null,
      Clientbreite: 0,
      Clienthöhe: 0,
      Kanalbreite: 0,
      caishen:
        x: 0,
        y: 0,
        Geschwindigkeit: 8,
        dx: 0
      },
      Fortschritt: 0,
      Countdown: 30,
      ZeitTag: Date.now(),
      timeTag2: Datum.jetzt(),
      SchatzArr: [],
      gameOver: falsch,
      SchatzObj: {
        yuanbao:
          Punktzahl: 5,
          src: null
        },
        Tongqian:
          Punktzahl: 2,
          src: null
        },
        jintiao:
          Punktzahl: 10,
          src: null
        },
        shuijin_red:
          Punktzahl: 20,
          src: null
        },
        shuijin_blue: {
          Punktzahl: 15,
          src: null
        },
        Fudai:
          Punktzahl: 8,
          src: null
        }
      }
    };
  },
  montiert() {
    lass _this = dies;
    let container = document.getElementById("caishen");
    _this.ctx = container.getContext("2d");
    _this.clientWidth = Containerbreite;
    _this.clientHeight = Containerhöhe;
    _this.channelWidth = Math.floor(_this.clientWidth / 5);
    _this.caishenImg = neues Bild();
    _this.caishenImg.src = erfordern("@/assets/img/caishen/财神爷.png");
 
    _this.initTreasures();
    countDownInit = _this.countDown;
    _this.caishen.x = _this.clientWidth / 2 - 60;
    _this.caishen.y = _this.clientHeight – 120;
    Dokument.onkeydown = Funktion(e) {
      let key = window.event.keyCode;
      wenn (Schlüssel === 37) {
        //Linke Taste_this.caishen.dx = -_this.caishen.speed;
      } sonst wenn (Schlüssel === 39) {
        //Rechte Taste_this.caishen.dx = _this.caishen.speed;
      }
    };
    Dokument.onkeyup = Funktion(e) {
      _this.caishen.dx = 0;
    };
    _this.caishenImg.onload = Funktion() {
      (Funktion animloop() {
        _this.ctx.clearRect(0, 0, _this.clientWidth, _this.clientHeight);
        _diese.Schleife();
        animationId = Fenster.requestAnimationFrame(animloop);
        wenn (_this.countDown === 0) {
          _this.gameOver = wahr;
          Fenster.CancelAnimationFrame(animationId);
        }
        wenn (Datum.jetzt() - _dieses.ZeitTag >= 1000) {
          _dieser.countDown--;
          _this.timeTag = Date.now();
        }
      })();
    };
  },
  Methoden: {
    initTreasures() {
      lass _this = dies;
      Objekt.Schlüssel(_this.treasureObj).fürJeden(Schlüssel => {
        _this.treasureObj[key].src = neues Bild();
        _dieses.SchatzObj[
          Schlüssel
        ].src.src = erfordern(`@/assets/img/caishen/${key}.png`);
      });
      für (lass i = 0; i < MaxNum; i++) {
        lass random = Math.floor(Math.random() * TreasureNames.length);
        _dieser.treasureArr.push({
          x: _this.channelWidth * (1 / 2 + i) - 30,
          y: _this.getRandomArbitrary(0, 20),
          Name: TreasureNames[random],
          Geschwindigkeit: _this.getRandomArbitrary(2, 4)
        });
      }
    },
    Schleife() {
      lass _this = dies;
      _this.drawCountDown();
      _this.drawCaishen();
      _this.moveCaishen();
      _this.generateTreasure();
      _this.drawTreasure();
      _this.drawScore();
    },
    zeichneCaishen() {
      lass _this = dies;
      _this.ctx.speichern();
      _dieses.ctx.drawImage(
        _this.caishenImg,
        _this.caishen.x,
        _dies.caishen.y,
        120,
        120
      );
      _this.ctx.restore();
    },
    bewegeCaishen() {
      dies.caishen.x += dies.caishen.dx;
      wenn (this.caishen.x > this.clientWidth - 120) {
        this.caishen.x = this.clientWidth – 120;
      } sonst wenn (this.caishen.x < 0) {
        dies.caishen.x = 0;
      }
    },
    Punktestand zeichnen() {
      lass _this = dies;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.textAlign = "zentriert";
      _this.ctx.textBaseline = "Mitte";
      _this.ctx.fillText(_this.score + "Wert", 30, _this.clientHeight - 10);
      _this.ctx.closePath();
    },
    zeichneCountDown() {
      // Zeichne den Fortschrittsring let _this = this;
      _this.progress += Date.now() - _this.timeTag2;
      _this.timeTag2 = Date.now();
      _this.ctx.beginPath();
      _this.ctx.moveTo(50, 50);
      _diese.ctx.arc(
        50,
        50,
        40,
        Math.PI * 1,5,
        Math.PI * (1,5 + 2 * (_this.progress / (countDownInit * 1000))),
        FALSCH
      );
      _this.ctx.closePath();
      _this.ctx.fillStyle = "gelb";
      _this.ctx.fill();
 
      // Einen ausgefüllten Kreis zeichnen_this.ctx.beginPath();
      _this.ctx.arc(50, 50, 30, 0, Math.PI * 2);
      _this.ctx.closePath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.fill();
 
      //Füllen Sie text_this.ctx.font = "fett 16px Microsoft YaHei";
      _this.ctx.fillStyle = "#333";
      _this.ctx.textAlign = "zentriert";
      _this.ctx.textBaseline = "Mitte";
      _this.ctx.moveTo(50, 50);
      _this.ctx.fillText(_this.countDown + "s", 50, 50);
    },
    filterTreasure(Artikel) {
      lass _this = dies;
      Wenn (
        Artikel.x <= _this.caishen.x + 110 &&
        item.x >= _this.caishen.x &&
        Artikel.y > _this.caishen.y
      ) {
        // Bestimme die Berührungsreichweite mit dem Gott des Reichtums_this.score += _this.treasureObj[item.name].score;
        gibt false zurück;
      }
      wenn (item.y >= _this.clientHeight) {
        gibt false zurück;
      }
      gibt true zurück;
    },
    zeichneSchatz() {
      lass _this = dies;
      _this.treasureArr = _this.treasureArr.filter(_this.filterTreasure);
      _this.treasureArr.fürEach(Artikel => {
        _dieses.ctx.drawImage(
          _this.treasureObj[Artikelname].src,
          item.x,
          Artikel.y,
          60,
          60
        );
        item.y += item.geschwindigkeit;
      });
    },
    getRandomArbitrary(min, max) {
      gibt Math.random() * (max - min) + min zurück;
    },
    ErzeugeSchatz() {
      lass _this = dies;
      wenn (_this.treasureArr.length < MaxNum) {
        lass random = Math.floor(Math.random() * TreasureNames.length);
        lass Kanal = _this.getRandomArbitrary(1, 5);
        _dieser.treasureArr.push({
          x: _this.channelWidth * (1 / 2 + (Kanal - 1)) - 30,
          y: 0,
          Name: TreasureNames[random],
          Geschwindigkeit: _this.getRandomArbitrary(2, 4)
        });
      }
    }
  }
};
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<style scoped lang="scss">
#caishen
  Hintergrundfarbe: #b00600;
  Hintergrundbild: URL("~assets/img/caishen/brick-wall.png");
}
.container {
  Position: absolut;
  oben: 0;
  rechts: 0;
  unten: 0;
  links: 0;
  Hintergrundfarbe: rgba(0, 0, 0, 0,3);
  Textausrichtung: zentriert;
  Schriftgröße: 0;
  Leerzeichen: Nowrap;
  Überlauf: automatisch;
}
.container:nach {
  Inhalt: "";
  Anzeige: Inline-Block;
  Höhe: 100%;
  vertikale Ausrichtung: Mitte;
}
.dialog {
  Breite: 400px;
  Höhe: 300px;
  Hintergrund: rgba(255, 255, 255, 0,5);
  Kastenschatten: 3px 3px 6px 3px rgba (0, 0, 0, 0,3);
  Anzeige: Inline-Block;
  vertikale Ausrichtung: Mitte;
  Textausrichtung: links;
  Schriftgröße: 28px;
  Farbe: #fff;
  Schriftstärke: 600;
  Rahmenradius: 10px;
  Leerzeichen: normal;
  Textausrichtung: zentriert;
  .noch einmal-btn {
    Hintergrund: #1f9a9a;
    Rand: keiner;
    Farbe: #fff;
  }
}
</Stil>

Dies ist das Ende dieses Artikels über die Realisierung des Spiels God of Wealth mit Barren durch VUE+Canvas. Weitere relevante Inhalte zum Spiel Vue mit Barren finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen
  • Vue verwendet Canvas, um den Bildkomprimierungs-Upload zu realisieren
  • So zeichnen Sie die Zeitleiste mit Vue+Canvas
  • VUE+Canvas realisiert den gesamten Prozess eines einfachen Gobang-Spiels
  • So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren
  • VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels
  • Vue verwendet die Maus, um ein Rechteck auf Canvas zu zeichnen
  • Vue nutzt Canvas zur Implementierung mobiler handschriftlicher Signaturen
  • Vue+Canvas realisiert Puzzlespiel
  • Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

<<:  Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

>>:  Grafisches Tutorial zur Installation von Linux CentOS6.9 unter VMware

Artikel empfehlen

CSS HACK für IE6/IE7/IE8/IE9/FF (Zusammenfassung)

Seit ich die offizielle Version von IE8.0 install...

Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

Grundlegende Syntax Die Verwendung von Text-Overf...

Implementierung des WeChat-Tap-Animationseffekts basierend auf dem CSS3-Animationsattribut

Als ich die kürzlich beliebte WeChat-Tap-Funktion...

Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18

Die Installation, Konfiguration und Optimierung v...

Beitrag zur Übermittlung von HTML-Daten_PowerNode Java Academy

Zu den vom HTTP/1.1-Protokoll angegebenen HTTP-An...

JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel

In diesem Artikel wird der spezifische Code von J...

Wettersymbol-Animationseffekt implementiert durch CSS3

Ergebnisse erzielen Implementierungscode html <...

Einführung in die Verwendung des Daten-URI-Schemas zum Einbetten von Bildern in Webseiten

Das Daten-URI-Schema ermöglicht es uns, Daten mith...

Vue realisiert problemlos Wasserzeicheneffekte

Vorwort: Verwenden Sie den Wasserzeicheneffekt im...

Erste Schritte mit GDB unter Linux

Vorwort gdb ist ein sehr nützliches Debugging-Too...

MySQL-Transaktionsdetails

Inhaltsverzeichnis Einführung Vier Merkmale von T...

Ubuntu 20.04 stellt eine Verbindung zu WLAN her (2 Methoden)

Ich habe vor Kurzem Ubuntu 20.04 installiert und ...

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

Konfigurieren Sie die Webseitenkomprimierung, um ...

Ubuntu 16.04 64-Bit in drei Schritten mit 32-Bit-Programmen kompatibel

Schritt 1: Bestätigen Sie die Architektur Ihres S...

Verwendung der JavaScript-Sleep-Funktion

Inhaltsverzeichnis 1. Schlaffunktion 2. setTimeou...