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
Detaillierte Erläuterung der praktischen Anwendung der Centos7 ESXi6.7-Vorlage
1. Erstellen Sie ein Centos7.6-System und optimie...
Ausführliche Erläuterung des Fehlers beim Schreiben von SQL mit englischen einfachen Anführungszeichen "''"
Ich bin auf ein Problem gestoßen. Wenn beim Teste...
So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei
Nachfolgend finden Sie die Schnellbefehle zum Fre...
Führen Sie die Schritte zum Upgrade von Nginx http auf https aus.
Der Unterschied zwischen http und https ist Bei m...
Lösen Sie das Problem, dass VMWare nach der Installation des Mac-Systems nicht im Vollbildmodus angezeigt werden kann
System: VMTOOLs-Download: Verknüpfung: https://pa...
Detaillierte Erklärung und Zusammenfassung der Verwendung des Crontab-Befehls für geplante Linux-Aufgaben
Der Befehl crontab wird von Unix und Linux verwen...
RHEL7.5 MySQL 8.0.11 Installations-Tutorial
Dieser Artikel zeichnet das Installationstutorial...
Über das Wertübertragungsproblem zwischen Antd-Baum und übergeordneten und untergeordneten Komponenten (Reaktionszusammenfassung)
Projektanforderungen: Wenn Sie auf einen Produktb...
So packen Sie das Projekt per Idee in Docker
Viele Freunde wollten schon immer wissen, wie man...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...
Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes
Manche Leute sind vielleicht noch nicht auf dieses...
Detaillierte Hinweise zu React für Einsteiger
Inhaltsverzeichnis 1. Grundlegendes Verständnis v...
Analyse des Prinzips der MySQL-Indexlängenbeschränkung
Dieser Artikel stellt hauptsächlich die Analyse d...
Detaillierte Erklärung der Standort- und Umschreibenutzung in nginx
1. Zusammenfassung der Standortnutzung Der Stando...
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...