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 Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten
Inhaltsverzeichnis 1. Die übergeordnete Komponent...
Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen
Inhaltsverzeichnis Problemumgehung Warum kann ich...
Ubuntu 18.04 Touchpad per Befehl deaktivieren/aktivieren
Unter Ubuntu kommt es häufig vor, dass sich das T...
WebWorker kapselt JavaScript-Sandbox-Details
Inhaltsverzeichnis 1. Szenario 2. Implementieren ...
So exportieren und importieren Sie SQL-Dateien unter einem Linux-Befehl
Dieser Artikel beschreibt, wie Sie SQL-Dateien mi...
JavaScript verwendet setTimeout, um einen Countdown-Effekt zu erzielen
Um die Fähigkeit zum Schreiben von nativem JavaSc...
Welche Funktion ist !-- -- im HTML-Seitenstil?
Hauptsächlich für Browser mit niedriger Version &l...
Beispielanalyse der Suchfunktion von MySQL-regulären Ausdrücken (regexp und rlike)
Dieser Artikel veranschaulicht anhand von Beispie...
Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.17 winx64.zip
Vorwort: Ich habe Win10 neu installiert und gleic...
Welche Möglichkeiten gibt es, CSS zu importieren? Was ist der Unterschied zwischen Link und @import? Wie wählt man
Ich habe gesehen, dass die Taobao-Webseite Import ...
Zusammenfassung der Wissenspunkte zur SQL-Abfrageoptimierung für MySQL-Big Data im zweistelligen Millionenbereich
1. Um die Abfrage zu optimieren, sollten Sie voll...
Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?
Frage Wie können wir bei einer bestimmten MySQL-V...
Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung
Vor Kurzem musste ich das Projekt für die Mitglie...
ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse
Inhaltsverzeichnis 1. So führen Sie stapelweise U...
So vermeiden Sie die URL-Zeitzonenfalle in MySQL
Vorwort Wenn Sie MySQL 6.0.x oder höher (JAR) ver...