Verwenden von js zum Implementieren eines Zahlenratespiels
|
Letzte Woche gab mir der Lehrer eine kleine Hausaufgabe, bei der ich ein Zahlenratespiel spielen sollte. Ich fand es ziemlich interessant, also schrieb ich es einfach so nebenbei auf. Die Logik ist an manchen Stellen nicht sehr vernünftig (bitte kritisieren Sie mich nicht, wenn Sie ein Neuling sind). Der Hauptinhalt besteht darin, zufällig positive Ganzzahlen von 0 bis 100 zu generieren. Raten Sie sechsmal und jedes Mal, wenn Sie raten, ob Sie zu hoch oder zu niedrig geraten haben. Wenn Sie einen Fehler machen, wird das Herz schwarz. Nachdem das Ergebnis abgeschlossen ist, wird ein Eingabeaufforderungsfeld angezeigt, in dem Sie gefragt werden, ob Sie fortfahren möchten. Wenn Sie fortfahren, aktualisieren Sie die Seite (das Prinzip und der Inhalt sind sehr einfach, nur zur Erinnerung). Das Beispieldiagramm und der Code sind beigefügt (die richtige Antwort wird vorab in der Konsole ausgedruckt)
Das Prinzip und der Inhalt sind sehr einfach, daher werde ich nicht ins Detail gehen (das Bild wird von Iconfont heruntergeladen, Sie können es selbst herunterladen).
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>Dokument</title>
</Kopf>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.ran {
Rand: 100px automatisch;
Polsterung links: 40 %;
}
ul {
Listenstil: keiner;
}
ul img {
Breite: 20px;
Höhe: 20px;
schweben: links;
}
</Stil>
<Text>
<div Klasse="ran">
<h1>Rate die Zahl</h1>
<h3>Bitte geben Sie eine positive Ganzzahl zwischen 0 und 100 ein</h3>
<Eingabetyp="Text" onchange="handlenum()">
<button class="aber" click="li()">OK</button>
<ul>
<li><img src="./x1.png" alt=""></li>
<li><img src="./x1.png" alt=""></li>
<li><img src="./x1.png" alt=""></li>
<li><img src="./x1.png" alt=""></li>
<li><img src="./x1.png" alt=""></li>
<li><img src="./x1.png" alt=""></li>
</ul>
</div>
<Skript>
// lass aber = document.querySelector('aber')
let inp = document.querySelector('Eingabe')
let img = document.querySelectorAll('img')
lass num = Math.round(Math.random()*100)
sei i = 0
konsole.log(num);
Funktion handlenum() {}
Funktion li () {
ich++
wenn (i<6) {
lass guess = parseInt(inp.value)
0<Schätzung<100? Schätzung :alert('Bitte geben Sie eine positive Ganzzahl zwischen 0 und 100 ein')
wenn (Schätzung === Zahl) {
if (confirm('Herzlichen Glückwunsch, Sie haben richtig geraten, möchten Sie das Spiel fortsetzen?')) {
fenster.standort.neuladen();
}
} anders {
rate>Anzahl? alert("größer"):alert('kleiner')
img[6-i].src = './x2.png'
}
} anders {
if (confirm('Die Anzahl der Male ist aufgebraucht, möchten Sie neu starten?')) {
fenster.standort.neuladen();
}
}
}
</Skript>
</body>
</html>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
Artikel empfehlen
Detaillierte Erklärung der JS-Homologiestrategie und CSRF
Inhaltsverzeichnis Überblick Same-Origin-Policy (...
Vergleich der Verwendung von EXISTS und IN in MySQL
1. Verwendung: (1) EXISTS-Nutzung Wählen Sie a.ba...
Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen
Inhaltsverzeichnis Problemumgehung Warum kann ich...
Implementierung der Validierungsregel für Vue Element-ui-Formulare
Inhaltsverzeichnis 1. Einleitung 2. Eingabemodus ...
Python 3.7-Installationstutorial für MacBook
Der detaillierte Prozess der Installation von Pyt...
Vorteile von MySQL-Abdeckungsindizes
Ein allgemeiner Vorschlag besteht darin, Indizes ...
Natives JS zur Implementierung eines Bildkarussells. JS zur Implementierung eines kleinen Werbe-Plugins.
Vor kurzem wollte ich natives JS verwenden, um ei...
MYSQL Eine Frage zur Verwendung von Zeichenfunktionen zum Filtern von Daten
Problembeschreibung: Struktur: test hat zwei Feld...
So filtern Sie doppelte Daten heraus, wenn Sie große Datenmengen in MySQL einfügen
Inhaltsverzeichnis 1. Entdecken Sie das Problem 2...
Vue3 (III) Website Homepage Layout Entwicklung
Inhaltsverzeichnis 1. Einleitung 2. Tatsächliche ...
Beispiel für die Verwendung von UserMap in IMG
usemap ist ein Attribut des <img>-Tags, das ...
So verhindern Sie das Flashen von Vue in kleinen Projekten
Zusammenfassung HTML: Element plus V-Umhang CSS: ...
Mit CSS3 implementierte Schaltfläche zum Hovern von Bildern
Ergebnis:Implementierungscode html <ul Klasse=...
Beispiel für den automatischen Start eines Anwendungsdienstes in einem Docker-Container
Wenn Sie möchten, dass der Anwendungsdienst im Do...
Native JS-Implementierung der Lupenkomponente
In diesem Artikelbeispiel wird der spezifische Co...