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
So verwenden Sie den SS-Befehl anstelle von Netstat im Linux-Betrieb und bei der Wartung
Vorwort Beim Betrieb und der Verwaltung von Linux...
So installieren Sie Docker mit YUM
Wie in der folgenden Abbildung dargestellt: Wenn ...
Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS
Inhaltsverzeichnis falten (reduzieren) Verwenden ...
Detaillierte Erklärung der Anzeigemodi in CSS-Tags
Beschriftungsanzeigemodus (wichtig) Div- und Span...
Sie müssen wirklich die Verwendung von CSS-Variablen var() verstehen
Wenn ein Webprojekt immer größer wird, werden sei...
Detaillierte Erklärung zur Implementierung der Anmeldefunktion durch Kombination von React mit der Formularkomponente von Antd
Inhaltsverzeichnis 1. React kombiniert mit Antd, ...
Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten
vue+element UI kapselt eine öffentliche Funktion ...
So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird
1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...
Was sind die Verwendungszwecke von Limits in MySQL (empfohlen)
SELECT * FROM Tabellenname Limit m,n; SELECT * FR...
Detaillierte Erklärung der Linux-CPU-Last und CPU-Auslastung
CPU-Last und CPU-Auslastung Beides kann bis zu ei...
Detaillierte Erklärung des Mindestbreitenwerts von Inline-Blöcken in CSS
Vorwort Vor kurzem habe ich mir abends etwas Zeit...
Detaillierte Erklärung der Verwendung des MySQL-Paradigmas
1. Paradigma Der englische Name des Paradigmas la...
Häufige Browserkompatibilitätsprobleme (Zusammenfassung)
Browserkompatibilität ist nichts anderes als Stil...
Analyse von SQL-Integritätsbeschränkungsanweisungen in der Datenbank
Integritätsbeschränkungen Integritätsbedingungen ...
Probleme bei der Verwendung von Azure Container Registry zum Speichern von Bildern
Azure Container Registry ist ein verwalteter, ded...