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

Details zur Verwendung von Klassenstilen in Vue

Inhaltsverzeichnis 1. Boolesche Werte 2. Ausdruck...

So starten Sie ein JAR-Paket und führen es unter Linux im Hintergrund aus

Der Linux-Befehl zum Ausführen des JAR-Pakets lau...

MySQL5.7.03 Ersatz der höheren Version durch MySQL 5.7.17 Installationsprozess und Lösungen für gefundene Probleme

1. Wie installiert man? 1. [Ausführen] -> [cmd...

Beschreibung des MySQL-Optimierungsparameters query_cache_limit

query_cache_limit query_cache_limit gibt die Puff...

Beispielcode zur Implementierung einer dynamischen Spaltenfilterung in einer Vue+Element-Tabelle

Anforderung: Bei der Anzeige von Daten in einer L...

CentOS7-Bereitstellung Flask (Apache, mod_wsgi, Python36, venv)

1. Installieren Sie Apache # yum install -y httpd...

So ändern Sie den Hostnamen in Linux dauerhaft

Wenn Sie Ihren Hostnamen ändern möchten, können S...

Zusammenfassung des Umschaltproblems und der Lösung zur Installation mehrerer JDK-Versionen im 64-Bit-System von Win10

Da myeclipse2017 und idea2017 auf dem Computer in...

Docker-Installations- und Konfigurationsschritte für RabbitMQ

Inhaltsverzeichnis Bereitstellung auf einem einze...

So verwenden Sie JSX in Vue

Was ist JSX JSX ist eine Syntaxerweiterung von Ja...

HTML5+CSS3-Codierungsstandards

Die goldene Regel Unabhängig davon, wie viele Per...

Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript

Inhaltsverzeichnis Überblick 1. Kompositions-API ...

Beheben Sie das Problem, dass der Name des Dateiänderungsformulars vom Typ = Datei nicht normal wiedergegeben werden kann

Der Code unter dem Easyui-Framework lautet wie fo...

So überwachen Sie mehrere JVM-Prozesse in Zabbix

1. Szenariobeschreibung: Unsere Umgebung verwende...

CSS Paint API: Ein CSS-ähnliches Zeichenbrett

1. Canvas-Bilder als CSS-Hintergrundbilder verwen...