Natives JS zur Implementierung eines Klickzahlenspiels
|
Native JS implementiert das Klickzahlenspiel zu Ihrer Information. Der spezifische Inhalt ist wie folgt Kürzlich hat das Unternehmen im Quartalstest eine sehr interessante Testfrage gestellt, die die Verwendung unserer eigenen schwarzen Technologie IVX zur Implementierung erfordert. Interessierte Freunde können sich darüber informieren. Es handelt sich wirklich um schwarze Technologie. Hier werde ich weiterhin natives JS zur Implementierung verwenden. Die Frage lautet wie folgt: Implementieren Sie ein kleines Zahlenklickspiel: Klicken Sie nacheinander auf die zufällig generierten digitalen Elemente im Container. Die generierten digitalen Elemente verschwinden nach 5 Sekunden. Sie müssen Ihr Gedächtnis einsetzen, um die generierten Zahlen in aufsteigender Reihenfolge anzuklicken und so das Levelspiel abzuschließen. Schauen wir uns ohne weitere Umschweife das Laufeffektdiagramm an:
Oben genannter Code:
<!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>Klicken Sie auf das Zahlenspiel</title>
<Stil>
#cointainer {
Rand: automatisch;
Höhe: 600px;
Breite: 400px;
Hintergrundfarbe: rgb(37, 37, 37);
Position: relativ;
}
.header {
Breite: automatisch;
Textausrichtung: zentriert;
Rand: automatisch;
}
.parm {
Höhe: 60px;
Breite: 60px;
Rahmenradius: 30px;
Position: absolut;
Textausrichtung: zentriert;
Zeilenhöhe: 60px;
}
.parm:hover {
Cursor: Zeiger;
}
.todo {
Textausrichtung: zentriert;
Rand oben: 16px;
}
Taste {
Breite: 100px;
Höhe: 30px;
Hintergrundfarbe: Koralle;
Rand: keiner;
Gliederung: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Header">
<h1>Klicken Sie auf das Zahlenspiel</h1>
<p>
Der digitale Inhalt verschwindet nach 5 Sekunden. Sie können das Level bestehen, indem Sie die digitalen Punkte in aufsteigender Reihenfolge entsprechend Ihrem Gedächtnis anklicken.</p>
</div>
<div id="cointainer"></div>
<div Klasse="todo">
<button onclick="restart(6)">Neustart</button>
<button style="margin-left: 20px" onclick="nextPass()">Nächste Ebene</button>
<Schaltfläche
Stil="Rand links: 20px"
beim Klicken = "window.clearInterval(timmer2);window.clearTimeout(timmer1)"
>
Timer stoppen</button>
<p>Zeit</p>
</div>
</body>
<Skript>
lass Kreisliste = [];
//Kreiskonstruktorfunktion getPosition() {
let parm = { x: "", y: "" };
parm.x = Math.round(Math.random() * 340);
parm.y = Math.round(Math.random() * 540);
Rückgabewert;
}
//Erstellen Sie nicht überlappende Kreise
Funktion erstelleKreis(gesamt) {
wenn (KreisListe.Länge === 0) {
circleList.push(getPosition());
}
//Begrenzen Sie die Anzahl der Kreationen auf 200
für (sei i = 0; i < 200; i++) {
wenn (KreisListe.Länge < Gesamt) {
lass Kreis = getPosition();
sei distan = [];
für (lass n = 0; n < KreisListe.Länge; n++) {
sei dis =
Math.abs(Kreis.x - Kreisliste[n].x) ** 2 +
Math.abs(Kreis.y - Kreisliste[n].y) ** 2;
distan.push(dis);
}
wenn (Math.min(...distan) > 3600) {
KreisList.push(Kreis);
}
} anders {
brechen;
}
}
}
//Erstelle 8 Kreise
erstelleKreis(8);
//Zufällige Farbauswahlfunktion selectColor() {
sei r = 100 + Math.round(Math.random() * 155);
sei g = 100 + Math.round(Math.random() * 155);
sei b = 100 + Math.round(Math.random() * 155);
gibt `rgb(${r},${g},${b})` zurück;
}
//Erstelle einen Kreis im DOM
let containner = document.getElementById("cointainer");
//Levelfunktion konstruieren creatGame(num) {
KreisListe = [];
Kreis erstellen(Zahl);
für (lass i = 0; i < KreisListe.Länge; i++) {
let node = document.createElement("span");
containner.appendChild(Knoten);
node.klassenName = "parm";
node.innerText = i + 1;
node.style.left = Kreisliste[i].x + "px";
node.style.top = Kreisliste[i].y + "px";
node.style.backgroundColor = wähleFarbe();
}
}
//Klicken Sie auf die Antwort let asw = [];
//Einstellen, damit das Spiel nach 5 Sekunden gestartet wird let start = function () {
let list = document.querySelectorAll("span");
rechts lassen = "";
für (lass i = 0; i < Listenlänge; i++) {
Liste[i].innerText = "";
Liste[i].Zahl = i + 1;
rechts = rechts + (i + 1);
Liste[i].addEventListener(
"klicken",
Funktion () {
asw.push(Liste[i].Zahl);
wenn (asw.length === pass && asw.join("") === rechts) {
Fenster.ClearInterval(timmer2);
alert("Herzlichen Glückwunsch! Ihre Zeit ist: " + time.toFixed(2) + "s");
asw = [];
} sonst wenn (asw.length === pass && asw.join("") !== rechts) {
asw = [];
Fenster.ClearInterval(timmer2);
alert("Entschuldigung, ich habe es nicht geschafft");
}
},
FALSCH
);
}
};
lass Zeit = 0;
lass SummeZeit = Funktion () {
Zeit = Zeit + 0,01;
document.querySelectorAll("p")[1].innerText = time.toFixed(2) + "s";
};
//Anfangslevel let pass = 6;
Spiel erstellen(Passwort);
let timmer1 = setTimeout(start, 5000);
let timmer2 = setInterval(sumTime, 10);
//Funktion neu starten restart(nowerPass) {
während (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
pass = neuerPass;
erstelleSpiel(jetztPass);
Zeitüberschreitung löschen (timmer1);
Intervall löschen(timmer2);
Zeit = 0;
timmer1 = setTimeout(start, 5000);
timmer2 = setzeInterval(sumTime, 10);
}
//Nächste Ebene Funktion nextPass() {
wenn (Pass < 20) {
bestehen++;
Neustart (Pass);
}
}
</Skript>
</html>Damit schließen wir den Beitrag zu einem sehr interessanten kleinen Spiel ab, das die Logik Ihres Gehirns trainiert. 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:
|
<<: So bereinigen Sie den MySQL-Speicherplatz in der Alibaba Cloud
>>: Detailliertes Beispiel zum Beheben der Tablespace-Fragmentierung in MySQL
Artikel empfehlen
Implementierung einer Lösung für adaptive Textbereichshöhe in Vue
Inhaltsverzeichnis Versteckte Probleme Lösung zur...
Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren
1. MySQL entfernen a. sudo apt-get autoremove --p...
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
Detaillierte Erläuterung der Grundkonfiguration des automatisierten Testens von Vue-Jest
Inhaltsverzeichnis Installieren Konfiguration Häu...
Regeln für die Gestaltung des Anmeldeformulars
Ich habe „Patterns for Sign Up & Ramp Up“ vor ...
Serielle und parallele Operationen in JavaScript
Inhaltsverzeichnis 1. Einleitung 2. es5-Methode 3...
3 Methoden zum Wiederherstellen der Tabellenstruktur aus einer FRM-Datei in MySQL [empfohlen]
Wenn MySQL normal ausgeführt wird, ist es nicht s...
Mehrere Möglichkeiten, Python-Programme im Linux-Hintergrund auszuführen
1. Die erste Methode besteht darin, den Befehl un...
Detaillierte Erklärung zum Erstellen einer aktualisierbaren Ansicht in MySQL
Dieser Artikel beschreibt anhand eines Beispiels,...
So implementieren Sie eine Maskenebene in HTML So verwenden Sie eine Maskenebene in HTML
Die Verwendung von Maskenebenen in Webseiten kann...
Lösung zur Codeaufteilung im Vue-Projekt
Inhaltsverzeichnis Hintergrund Zweck Vor der Spal...
SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)
[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...
Ein Beispiel für die Verwendung von CSS-Methoden zur Erzielung von Modularität
1. Was sind CSS-Methoden? CSS methodologies könne...
JavaScript-Entwurfsmuster, Lernadaptermuster
Inhaltsverzeichnis Überblick Code-Implementierung...
Ausführliche Erklärung des Maximalwerts von int in MySQL
Einführung Ich werde ausführlich über das Problem...