Natives JS-objektorientiertes Tippspiel
|
In diesem Artikel wird der spezifische Code des objektorientierten JS-Tippspiels zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt Demo-EinführungKlicken Sie über die Tastatur auf die Zahl, die der fallende Ball anzeigt. Der Ball wird aktualisiert und fällt an einer beliebigen Position erneut. Darüber hinaus erhöht sich nach jeweils fünf Bällen die Fallgeschwindigkeit, die Position und Größe der Bälle wird aktualisiert und die Farben wechseln nach dem Zufallsprinzip. Durch die Implementierung der objektorientierten Klassenmethode kann der Demo-Quellcode direkt verwendet werden. Weisen Sie es der HTML-Datei zu und öffnen Sie es dann, um es zu verwenden. Es kann als Schulkursdesign verwendet werden Quellcode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Stil>
.Titel{
Breite: 1200px;
Höhe: 80px;
Rand: 400px automatisch;
Farbe: dunkelblau;
Textschatten: 3px 3px 3px schwarz;
Schriftgröße: 80px;
Schriftstärke: fett;
Textausrichtung: zentriert;
Schriftfamilie: „楷体“;
}
.Name{
Breite: 1000px;
Höhe: 40px;
Rand: 0 automatisch;
Farbe: himmelblau;
Textschatten: 3px 3px 3px schwarz;
Schriftgröße: 40px;
Schriftstärke: fett;
Textausrichtung: zentriert;
Schriftfamilie: „楷体“;
}
</Stil>
<Text>
<div style="font-size: 40px;">Aktueller Punktestand<div class="score" >0</div></div>
<div class="title">Kleine Native-JS-Demo: Tipp-Übungsspiel</div>
<div class="name">Autor: lz</div>
</body>
<Skript>
Klasse TypingGame {
Konstruktor() {
dies.oSpan
diese.Geschwindigkeit = 2;
dieser.timer = "";
dieses.Wort;
this.colors = ["rot", "orange", "lila", "schwarz", "pink", "blau", "himmelblau", "gelbgrün", "braun", "tomate", "indianrot", "orchidee", "peru", "aqua", "schieferblau", "grau", "grau", "karminrot", "grün"]//Farbsammlung this.createWord(this.speed);
Dokument.onkeydown = e => {
var e = e || Fenster.Ereignis;
var Schlüsselcode = e.Schlüsselcode || e.welcher;
// TypingGame.oSpan = dies.$$("span");
var Schlüsselwort = String.fromCharCode(Schlüsselcode).
toLowerCase()
wenn (dieses.Wort === Schlüsselwort) {
// Einen umhauen - punkten // Den ursprünglichen Punktestand abrufen var score = this.$('.score', false).innerText - 0
// Lass den Score +1
Punktzahl++
// Setze die Punktzahl nach dem Hinzufügen von 1 in das Div document.querySelector('.score').innerText = score
wenn (Punktzahl === 5) {
this.speed += 2 // Alle fünf Buchstaben erhöht sich die Fallgeschwindigkeit}
dies.oSpan.parentElement.removeChild(dies.oSpan)
dies.createWord(diese.Geschwindigkeit)
}
}
}
erstelleWord(Geschwindigkeit) {
let wh=this.getRandom(30,80);//Zufällige Größe this.oSpan = this.creEle('span');
// konsole.log(dies.oSpan)
dies.setStyle(dies.oSpan, {
Breite: w+"px",
Höhe: w+"px",
Position: 'absolut',
oben: 0,
links: this.getRandom(document.documentElement.clientWidth - 30) + "px",
borderRadius: "50%",
Zeilenhöhe: '30px',
Textausrichtung: "zentriert",
Hintergrundfarbe: this.colors[this.getRandom(18)],
Farbe: "weiß",
Schriftstärke: "fett",
textAlign:"zentriert",
Zeilenhöhe:wh+"px"
})
Dokument.Body.AppendChild(dieses.oSpan)
// Zufällige Zeichen: 97~122
var randomNum = this.getRandom(97, 123)
dieses.Wort = String.fromCharCode(randomNum);
dies.oSpan.innerText = dieses.Wort
// Dieses Etikett sollte sich langsam nach unten bewegen. this.elementsMove(this.speed);
}
Elemente verschieben() {
// konsole.log(dies.oSpan)
// Zeitgeber clearInterval(this.timer)
dieser.timer = setzeInterval(() => {
// Höhe abrufen var t = this.oSpan.offsetTop;
// Höhe erhöhen t += this.speed;
console.log(diese.Geschwindigkeit)
// Wenn dieses Tag das Ende des Browsers erreicht, GAME OVER
if (t >= Dokument.Dokumentelement.Clienthöhe - 30) {
Intervall löschen(dieser.Timer)
if (confirm("SPIEL VORBEI, möchtest du noch einmal spielen?")) {
location.reload(); //Aktualisieren und erneut spielen}
}
// Oberkante des Etiketts nach der Vergrößerung festlegen
this.oSpan.style.top = t + "px"
}, 50)
}
setStyle(ele, styleObj) {
für (var attr in styleObj) {
ele.style[attr] = styleObj[attr]
}
}
$(tag, all = false) {
alles zurückgeben? document.querySelectorAll(tag) : document.querySelector(tag);
}
creEle(tag) {
returniere document.createElement(tag)
}
getRandom(a, b = 0) {
var max = Math.max(a, b);
var min = Math.min(a, b)
gibt Math.floor(Math.random() * (max - min)) + min zurück
}
}
neues Tippspiel;
</Skript>
</html>Demo-Screenshots
Bereiche mit Verbesserungsbedarf Sie können es selbst neu schreiben, Fehlermeldungen hinzufügen und die Höhe zufällig aktualisieren. Einige Geschwindigkeitsoptimierungen könnten vorgenommen werden. Durch Ändern der Animation in requestAnimationFrame() wird der Effekt realistischer. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04
>>: Vertikales und horizontales Aufteilen von MySQL-Tabellen
Artikel empfehlen
Lösung für die nicht wirksame Änderung des El-Popover-Stils von ElementUI
Bei der Verwendung von Element-UI gibt es eine hä...
CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)
1. Installieren Sie Abhängigkeitspakete [root@loc...
Lösen Sie das Problem beim Einrichten des chinesischen Sprachpakets für den Docker-Container
Wenn Sie Docker verwenden, suchen Sie in Docker n...
Beispiel für ein JavaScript-Meldungsfeld
In JavaScript können drei Arten von Meldungsfelde...
Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens
Linux-Befehl zum Ändern des Hostnamens 1. Wenn Si...
Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern
In diesem Artikel wird ein Nachrichtenfeld mit Sp...
Zusammenfassung zum horizontal scrollenden Website-Design
Horizontales Scrollen ist nicht in allen Situation...
So führen Sie JavaScript in Jupyter Notebook aus
Später habe ich auch hinzugefügt, wie man Jupyter...
Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden
Wie wir alle wissen, sind Binlog-Protokolle für M...
Beispiel für die gemeinsame Nutzung von Anker-Tags in HTML
Verwendung von Anker-Tags: Als Ankerlink wird ein ...
Lösung für das MySQL Master-Slave-Verzögerungsproblem
Heute werden wir uns ansehen, warum es zu Master-...
MySQL Installer 8.0.21 Installations-Tutorial mit Bildern und Text
1. Grund Ich musste MySQL nur auf einem neuen Sys...
Zusammenfassung gängiger MySQL-Befehle
Festlegen des MySQL-Root-Passworts Melden Sie sic...
Die v-for-Direktive in Vue vervollständigt die Listendarstellung
Inhaltsverzeichnis 1. Listendurchlauf 2. Die Roll...
Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux
Angenommen, es gibt zwei Linux-Server A und B, un...