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
So fragen Sie Daten aus mehreren unabhängigen Tabellen und Paging in MySQL ab
Mysql mehrere unabhängige Tabellen Abfragedaten u...
Schritte zur Installation von MySQL 5.7 im Binärmodus und zur Optimierung des Systems unter Linux
Dieser Artikel stellt hauptsächlich den Installati...
So verwenden Sie den Linux-Befehl tr
01. Befehlsübersicht Der Befehl tr kann Zeichen a...
So optimieren Sie die MySQL-Leistung durch langsame MySQL-Abfragen
Mit zunehmender Anzahl von Besuchen steigt der Dr...
10 sehr gute CSS-Fähigkeiten sammeln und teilen
Hier können Sie durch geschickten Einsatz von CSS-...
jQuery Treeview-Baumstrukturanwendung
In diesem Artikelbeispiel wird der Anwendungscode...
Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten
Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...
Beispiel für die Anpassung von rem an mobile Geräte
Vorwort Überprüfung und Zusammenfassung von REM-A...
Studieren Sie die Verwendung von Zeichen anstelle von Bildern, um abgerundete oder scharfe Ecken zu erzielen
Bitte sehen Sie sich den folgenden Screenshot an,...
Grafisches Tutorial zur Installation der MySQL 8.0.12 Winx64-Dekomprimierungsversion
Die Installation der Dekomprimierungsversion von ...
So erstellen Sie eine Baidu-Totlink-Datei
Baidu definiert zwei Arten von toten Linkformaten:...
Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten
Jetzt unterstützt der 2016-Server den Multi-Site-...
So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen
Ich habe MySQL auf meinem Computer längere Zeit n...
Zusammenfassung der MySQL-Datenmigration
Inhaltsverzeichnis Vorwort: 1. Über die Datenmigr...
Wie lang ist eine Funktion in js?
Inhaltsverzeichnis Vorwort Warum Wie viel kostet ...