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
MySQL-Batch löschen großer Datenmengen
MySQL-Batch löschen großer Datenmengen Angenommen...
JS erhält Fünf-Sterne-Lob
In diesem Artikel wird der spezifische Code von J...
Empfohlene Tipps für Web-Frontend-Ingenieure
Lassen Sie uns zunächst über den Wert von Web-Fro...
Lösen Sie das Problem, dass der Container nach dem Docker-Lauf „Beendet (0)“ anzeigt.
Ich habe ein Dockerfile für OpenResty auf CentOS7...
Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung
Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...
Detaillierte Erklärung zur Verwendung von Bussen in Vue
Vue-Busmechanismus (Bus) Zusätzlich zur Verwendun...
Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs
Wie unten dargestellt: Ersetzen Sie es einfach, w...
JavaScript-Tippspiel
In diesem Artikel wird der spezifische JavaScript...
JavaScript implementiert eine verschiebbare Modalbox
In diesem Artikel wird der spezifische JavaScript...
Verwendung des LRU-Algorithmus in der in Vue integrierten Komponente „Keep-Alive“
Inhaltsverzeichnis Auch die Verwendung der integr...
JavaScript Canvas implementiert die Bewegung des Balls entlang der Maus
In diesem Artikelbeispiel wird der spezifische Co...
JS-Implementierung des Apple-Rechners
In diesem Artikelbeispiel wird der spezifische JS...
Sortierung und Paginierung von MySQL-Abfragen
Überblick Da wir die Daten normalerweise nicht di...
Vue implementiert Drag-Fortschrittsbalken
In diesem Artikelbeispiel wird der spezifische Co...
JS implementiert die Append-Funktion von jQuery
Inhaltsverzeichnis Zeig mir den Code Testen Sie d...