JavaScript implementiert die H5-Goldmünzenfunktion (Beispielcode)

importiere Hilo von „hilojs“;
exportiere Standard Hilo.Class.create({
 Mischungen: Hilo.EventMixin,
 queue: null, // Klasse herunterladen gold: null, // Goldmünze wood: null, // Goldmünze water: null, // Ei fireElement: null, // Goldmünze soil: null, // Roter Umschlag person: null, // Auto score0: null, // 
 score1: null, // 
 score2: null, // 
 laden() {
 lass imgs = [
  {
  ID: „Boden“, //roter Umschlag src: require(„../../../assets/image/red.png“)
  },
  {
  ID: „Wasser“, //Ei src: require(„../../../assets/image/dan.png“)
  },
  {
  ID: „Gold“, //Gold Quelle: erforderlich („../../../assets/image/money3.png“)
  },
  {
  ID: „Person“, // Auto src: require(„../../../assets/image/che1.png“)
  }
 ];
 diese.Warteschlange = neue Hilo.LoadQueue();
 diese.Warteschlange.add(imgs);
 this.queue.on('abgeschlossen', this.onComplete.bind(this));
 diese.Warteschlange.auf('Fehler', (e) => {
  console.log('Ladefehler', e)
 })
 diese.Warteschlange.start();
 },
 onComplete() { //Laden abgeschlossen console.log('Laden abgeschlossen')
 this.gold = this.queue.get('gold').content;//Goldmünzenthis.water = this.queue.get('water').content;//Eierthis.soil = this.queue.get('soil').content;//Roter Umschlagthis.person = this.queue.get('person').content;
 //Den kompletten Ereignis-Listener der Download-Warteschlange löschen this.queue.off('complete');
 // vollständig macht this.fire('vollständig') verfügbar;
 }
})

importiere Hilo von „hilojs“;
importiere Asset von './Asset' //Definiere Parameter des Autos mit der Goldmünze und dem roten Umschlag importiere Gold von './gold' //Generiere zufällig stinkende Eier mit einem roten Umschlag importiere Hand von './hand' //Kollision auf Initialisierungsebene des Autos let startTime = 0
exportiere Standardklasse Spiel {
 Konstruktor(Seite) {
 diese.seite = Seite
 //Spielzeit festlegen this.gameTime = 0
 this.gameStatus = "bereit"
 /*
  spielen, Spiel beginnt, bereit, Spiel endet**/
 // Download-Warteschlange this.asset = new Asset()
 //Canvas-Objekt this.stage = null

 // Canvas-Informationen this.width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * 2
 // diese.Höhe = innereHöhe * 2 < 1334 ? innereHöhe * 2 : 1334
 this.height = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) * 2
 dieser.Maßstab = 0,5

 // Timer-Objekt this.ticker = null

 //Goldmünze, roter Umschlag, stinkendes Ei this.Gold = null
 //Goldmünze, roter Umschlag, stinkendes Ei, Fallgeschwindigkeitthis.enemySpeed ​​​​= 1000//Goldmünze, Fallgeschwindigkeitthis.redSpeed ​​​​= 1000//Roter Umschlag, Fallgeschwindigkeitthis.danSpeed ​​​​= 1000//Roter Umschlag, Fallgeschwindigkeit//Goldmünze, roter Umschlag, stinkendes Ei, Generierungsgeschwindigkeitthis.createSpeed ​​​​= 200
 //Das Auto, das die Goldmünze, den roten Umschlag und das stinkende Ei erhält this.hand = null
 //Start-Schaltfläche this.beginBtn = null
 //Ergebnis this.score = 0
 //Definieren Sie ein Kollisionsarray this.crashList = []
 this.isEnd = false
 //Anzahl der faulen Eier, die dies getroffen haben.danNum = 0
 //Zeitgeber this.timerAll = null
 }
 init() {
 this.asset.on('abgeschlossen', Funktion () {
  this.asset.off('abgeschlossen')
  dies.initStage()
 }.binden(dies));
 dies.asset.laden()
 }
 initStage() {
 // console.log(diese.Breite, diese.Höhe)
 // Stufe diese.Stufe = neue Hilo.Stufe({
  Rendertyp: "Leinwand",
  Breite: diese.Breite,
  Höhe: diese.Höhe,
  scaleX: diese.Skala,
  scaleY: diese.Skala,
  Container: diese.Seite
 });
 this.stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END]);

 //Starte den Timer, um die Seite zu aktualisieren. Der Parameter ist die Bildrate this.ticker = new Hilo.Ticker(60)
 // Die Stufe wird zur Zeitwarteschlange hinzugefügt this.ticker.addTick(this.stage)
 // Fügen Sie die Animationsklasse zur Zeitwarteschlange hinzu this.ticker.addTick(Hilo.Tween);
 //Ticker starten
 dieser.ticker.start(true);
 dies.startGame();
 }

 startGame() { //Starte das Spiel startTime = new Date().getTime()
 dies.initZongzi();
 dies.initHand()
 //diese.beginBtn.removeFromParent()
 diese.Phase.entfernenKind(diese.beginBtn)
 dies.spielZeit = dies.setGameTime;
 dieser.Score = 0;
 diese.crashList = [];
 dies.isEnd = falsch;
 this.gameStatus = "spielen"

 dies.calcTime()
 }
 calcTime() { //Spielzeit this.timerAll = setTimeout(() => {
  lass jetzt = neues Date().getTime()
  let Differenz = parseInt((jetzt - Startzeit) / 1000)
  wenn (Differenz % 30 == 0) {
  dieser.Gold.score[0] = dieser.Gold.score[0] + 5
  dieser.Gold.score[2] = dieser.Gold.score[2] + 5
  dies.Gold.enemySpeed ​​​​= dies.Gold.enemySpeed ​​​​+ 500
  dies.Gold.redSpeed ​​​​= dies.Gold.redSpeed ​​​​+ 200
  dies.Gold.danSpeed ​​​​= dies.Gold.danSpeed ​​​​+ 300
  }
  
  dies.calcTime()
  }, 1000);
 }
 Zeitberechnungszeit löschen() {
 this.Gold.score[0] = 5
 this.Gold.score[2] = 5
 this.Gold.enemySpeed ​​​​= 1000
 dies.Gold.redSpeed ​​​​= 1000
 dies.Gold.danSpeed ​​​​= 1000
 : LöscheTimeout(diesen.timerAlle);
 }
 gameOver() { // Rufe this.Gold.stopCreateEnemy() auf, wenn das Spiel endet

 this.gameStatus = "bereit"
 dies.initBeginBtn()

 //diese.hand.removeChild(diese.hand.score)
 diese.Phase.entfernenKind(diese.Hand)
 }
 initZongzi() {//Initialisiere den roten Umschlag der Goldmünze this.Gold = new Gold({
  ID: 'gold',
  Höhe: diese.Höhe,
  Breite: diese.Breite,
  Feindgeschwindigkeit: this.enemySpeed,
  redSpeed: diese.redSpeed,
  danSpeed: dies.danSpeed,
  Geschwindigkeit erstellen: diese.Geschwindigkeit erstellen,
  pointerEnabled: false, // Die Phase kann nicht ohne Abschlussereignis betrieben werden bindingSmallGoldList: [this.asset.gold, this.asset.water, this.asset.soil],
  Startzeit
 }).addTo(diese.Phase, 2)
 //Stage-Update this.stage.onUpdate = this.onUpdate.bind(this);
 }
 initHand() {//Initialisiere die Hand this.hand = new Hand({
  ID: 'Hand',
  img: diese.Vermögensperson,
  Höhe: this.asset.person.height,
  Breite: this.asset.person.width,
  x: diese.Breite / 2 - diese.Asset.Person.Breite / 4,
  y: diese.Höhe - diese.Asset.Person.Höhe / 2 - 40
 }).addTo(diese.Stage, 1);
 Hilo.util.copy(diese.hand, Hilo.drag);
 
 this.hand.startDrag([0, this.height - this.asset.person.height / 2 - 40, this.width - this.asset.person.width / 2 + 10, 0]);
 }
 onUpdate() {//Stufenaktualisierung wenn (this.gameStatus == 'ready') {
  zurückkehren
 }
 // console.log('Kollision', diese.crashList)
 lass num = []
 dies.crashList.forEach(e => {
  wenn (e == 'dan') {
  Anzahl.push(e)
  }
 })
 this.danNum = Nummer.Länge
 if (num.length >= 3) {//Spiel vorbei console.log('Spiel vorbei')
  dies.clearCalcTime()
  dies.isEnd = wahr;
  dies.gameOver()
  zurückkehren
 }
 dies.Gold.children.forEach(item => {
  wenn (this.hand.checkCollision(item)) {
  
  wenn (item.drawable.image.src.indexOf("rot") != -1) {
   dies.crashList.push('rot')
  }
  wenn (item.drawable.image.src.indexOf("money3") != -1) {
   dies.crashList.push('Geld3')
  }
  wenn (item.drawable.image.src.indexOf("dan") != -1) {
   this.crashList.push('dan')
  }
  // Kollision item.over();
  dieser.Score += Artikel.Score || 0;
  Schalter (Artikel.Score) {
   Fall -1:
   diese.hand.addScore(dieses.asset.score0)
   brechen;
   Fall 1:
   diese.hand.addScore(dieses.asset.score1)
   brechen;
   Fall 2:
   diese.hand.addScore(dieses.asset.score2)
   brechen;

   Standard:
   brechen;
  }
  }
 })
 }
 initBeginBtn() {
 }
}

importiere Hilo von „hilojs“;
importiere SmallGold aus './SmallGold'
lass Feind = Hilo.Class.create({
 Erweitert: Hilo.Container,
 
 Timer: null, // TimerSmallGoldList: [],
 Feindgeschwindigkeit: 0,
 rote Geschwindigkeit: 0,
 Geschwindigkeit: 0,
 Erstellungsgeschwindigkeit: 0,
 Punktzahl: [5, 0, 5],
 zwischen: null,
 Startzeit: null,
 Konstruktor: Funktion (Eigenschaften) {
 Enemy.superclass.constructor.call(diese, Eigenschaften);
 this.startTime = Eigenschaften.startTime
 
 dies.tween = Hilo.Tween;
 dies.createEnemy();
 dies.beginCreateEnemy();
 },
 
 erstelleFeind() { 
 lass jetzt = neues Date().getTime()
 let Differenz = parseInt((jetzt - this.startTime) / 200)
 
 lass index = null;
 let differenceNow = parseInt((jetzt - this.startTime) / 1000)
 
 wenn (0 <= UnterschiedJetzt && UnterschiedJetzt <= 60) {
  wenn (Differenz == 0) {
  Index = 0
  dies.createGold(index, dies.enemySpeed)
  } sonst wenn (Differenz % 70 == 0) {//0-15 Sekunden, 1 Hindernis-Ei-Index = 1
  dies.createGold(index, dies.danSpeed)
  } sonst wenn (Differenz % 147 == 0 || Differenz % 154 == 0) {//15-30 Sekunden Hindernis-Eier 2 (150-155)
  Index = 1
  dies.createGold(index, dies.danSpeed)
  } sonst wenn (Differenz % 222 == 0 || Differenz % 226 == 0 || Differenz % 235 == 0) {//30-45 Sekunden Hindernis-Eier 3 (225-230)
  Index = 1
  dies.createGold(index, dies.danSpeed)
  } sonst wenn (Differenz % 296 == 0 || Differenz % 302 == 0 || Differenz % 307 == 0 || Differenz % 311 == 0) { // 60 Sekunden, 4 Hindernis-Eier Index = 1
  dies.createGold(index, dies.danSpeed)
  } anders {
  lass Zahl = this.random(0, 100);
  if (number < 40) { //0 ist eine Goldmünze, 2 Ziffern für einen roten Umschlag, 1 ist ein Ei, index = 0
   dies.createGold(index, dies.enemySpeed)
  } sonst wenn (Zahl <= 100) {
   Index = 2
   dies.createGold(index, dies.redSpeed)
  }

  }
  
 } anders {
  sei nowmiao = Differenz - 300
  if (nowmiao % 70 == 0 || nowmiao % 75 == 0 || nowmiao % 78 == 0 || nowmiao % 85 == 0) { // 0-15 Sekunden, 4 Hindernis-Eier Index = 1
  dies.createGold(index, dies.danSpeed)
  } anders {
  lass Zahl = this.random(0, 100);
  if (number < 40) { //0 ist eine Goldmünze, 2 Ziffern für einen roten Umschlag, 1 ist ein Ei, index = 0
   dies.createGold(index, dies.enemySpeed)
  } sonst wenn (Zahl <= 100) {
   Index = 2
   dies.createGold(index, dies.redSpeed)
  }

  }
  
 }
 },
 erstelleGold(index, feindGeschwindigkeit) {
 halten lassen = undefiniert
 wenn (diese.SmallGoldList[index].Breite && diese.SmallGoldList[index].Höhe) {
  halten = neues SmallGold({
  Bild: this.SmallGoldList[index],
  Rechteck: [0, 0, diese.SmallGoldList[index].Breite, diese.zongziList[index].Höhe],
  Breite: this.SmallGoldList[index].width / 2,
  Höhe: this.SmallGoldList[index].height / 2,
  // MaßstabX: 0,5,
  // MaßstabY: 0,5,
  }).addTo(dies);
 }
 let widthScreen = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
 let heightScreen = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

 hold.x = 0,45 * Bildschirmbreite;
 hold.y = 0,4 * Bildschirmhöhe;
 

 hold.score = dieser.score[index]

 dies.tween.to(hold, {
  x: dies.random(0, (diese.Breite - diese.SmallGoldList[0].Breite / 2)),
  y: diese.Höhe
 }, {
  Dauer: 1400 / Feindgeschwindigkeit * 1000,
  Schleife: falsch,
  bei Abschluss: () => {
  halten.removeFromParent()
  }
 });
 },
 zufällig(unten, oben) {
 returniere Math.floor(Math.random() * (oberer - unterer + 1)) + unterer;
 },
 beginCreateEnemy() { //Starte die Generierung von this.timer = setInterval(() => {
  dies.createEnemy();
 }, diese.erstellenGeschwindigkeit);
 },
 stopCreateEnemy() {//Generierung stoppen und alles entfernen clearInterval(this.timer)
 dies.removeAllChildren()
 },
 checkCollision(enemy) { //Kollisionserkennung für (var i = 0, len = this.children.length; i < len; i++) {
  wenn (Feind.HitTestObject(this.children[i], true)) {
  gibt true zurück;
  }
 }
 gibt false zurück;
 }
})

Standard-Feind exportieren

importiere Hilo von „hilojs“;
lass hand = Hilo.Class.create({
 Erweitert: Hilo.Container,

 // Bild img: null,
 //Autoschüssel: null,
 //Ergebnis: null,

 Konstruktor(Eigenschaften) {
 hand.superclass.constructor.call(diese, Eigenschaften)
 dies.initHand()
 },
 initHand() { //Hintergrund initialisieren this.hand = new Hilo.Bitmap({
  ID: 'Hand',
  Bild: this.img,
  Rechteck: [0, 0, diese.Bildbreite, diese.Bildhöhe],
  Breite: this.img.width / 2,
  Höhe: this.img.height / 2,
  // MaßstabX: 0,5,
  // MaßstabY: 0,5,
 }).addTo(dies);
 },
 addScore(Bild) { //Punkte hinzufügen wenn (this.img.width && image.width) {
  dieser.score = neues Hilo.Bitmap({
  ID: "Punktzahl",
  Bild: Bild,
  Rechteck: [0, 0, Bild?.Breite || 0, Bild?.Höhe || 0],
  x: (diese.Bildbreite - Bildbreite) / 2,
  y: -Bildhöhe
  }).addTo(dies);
 }

 wenn (dieses.Bild.Breite && Bild.Breite) {
  Hilo.Tween.to(dieser.Score, {
  x: (diese.Bildbreite - Bildbreite / 2) / 2,
  y: -2 * Bildhöhe,
  Alpha: 0,
  Breite: Bildbreite / 2,
  Höhe: Bildhöhe / 2
  }, {
  Dauer: 600,
  //Verzögerung: 100,
  Leichtigkeit: Hilo.Ease.Quad.EaseIn,
  bei Abschluss: () => {

  }
  });
 }

 },
 // Kollisionserkennung checkCollision(enemy) {
 wenn (Feind.HitTestObject(this.hand, true)) {
  gibt true zurück;
 }
 gibt false zurück;
 }
})

Standardhand exportieren

importiere Hilo von „hilojs“;
lass SmallGold = Hilo.Klasse.erstellen({
 Erweitert: Hilo.Bitmap,
 Konstruktor: Funktion (Eigenschaften) {
 SmallGold.superclass.constructor.call(diese, Eigenschaften);
 dies.onUpdate = dies.onUpdate.bind(dies);
 },
 über(){
 dies.removeFromParent();
 },
 beiUpdate() {
 wenn (diese.übergeordnete.Höhe < dieses.y) {
 dies.removeFromParent();
 zurückkehren
 }
 }
 })
 
Standard-SmallGold exportieren

<Vorlage>
 <div Klasse="Fix">
 <div Klasse="hilo">
 <div ref="hilo" class="canvas"></div>
 <img src="../../assets/image/youton3.png" alt="" class="tong" />
 
 <div Klasse="Ergebnis">
 <div Klasse="links">
  <img :src="headimgurl" alt="" class="headimgurl" />
  <div Klasse="p1">
  <p class="p2">Spieler: {{ nickname }}</p>
  <p Klasse="p3">
  Punktzahl: {{ score }}
  <span
  ><img
   src="../../assets/image/dan21.png"
   alt=""
   Klasse="danNum"
  />x{{ danNum }}</span
  >
  </p>
  </div>
 </div>
 </div>
 </div>
 </div>
</Vorlage>

<Skript>
Spiel aus "./js/game" importieren;
Standard exportieren {
 Name: "Spiel",

 Daten() {
 zurückkehren {
 Spiel: neues Spiel(),
 
 };
 },
 berechnet: {
 Punktzahl() {
 //Spielstand return this.game.score;
 },
 danNum() {
 //Die Anzahl der kollidierten schwarzen Eier return this.game.danNum;
 },
 
 },
 betrachten:
 "Spiel.istEnd": {
 handler(neuerName) {
 // console.log(neuerName);
 if (neuerName) {
  dies.geheZu();
 }
 },
 sofort: wahr,
 },
 },
 montiert() {
 dies.$nextTick(() => {
 diese.Spielseite = diese.$refs.hilo;
 dieses.spiel.init();
 });
 
 },
 vorZerstören() {
 dieses.spiel.gameOver();
 },
 zerstört() {},
 Methoden: {
 geheZu(){}
 },
};
</Skript>