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
Überlegungen zur Partitionierung von MySQL-Datenbanktabellen [empfohlen]
Die Tabellenpartitionierung unterscheidet sich vo...
Eine vollständige Liste gängiger Linux-Systembefehle für Anfänger
Das Erlernen von Linux-Befehlen stellt für die me...
JS implementiert ein zufälliges Namensaufrufsystem
Verwenden Sie JS, um ein zufälliges Namensaufrufs...
js zur Implementierung eines Web-Rechners
Wie erstelle ich mit HTML, CSS und JS einen einfa...
Beispielanalyse für MySQL-Transaktionen, Isolationsebenen und Sperrenverwendung
Dieser Artikel beschreibt anhand von Beispielen M...
Detaillierte Erklärung zur Verwendung selbstverschachtelter Vue-Baumkomponenten
In diesem Artikel erfahren Sie, wie Sie die selbs...
jQuery manipuliert Cookies
Code kopieren Der Code lautet wie folgt: jQuery.c...
Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode
Vorwort Dieser Artikel beschreibt eine allgemeine...
Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen
1. Zusammengesetzter Primärschlüssel Der sogenann...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...
Detaillierte Erklärung des Problems mit verstümmelten chinesischen Schriftzeichen in der MySQL-Datenbank
Beim insert into employee values(null,'張三'...
Eine vollständige Anleitung zu einigen ungewöhnlichen, aber nützlichen CSS-Attributoperationen
1. Benutzerdefinierte Textauswahl ::Auswahl { Hin...
Einführung in berechnete Eigenschaften in Vue
Inhaltsverzeichnis 1. Was ist eine berechnete Eig...
Detaillierte Erklärung der MySQL-Binlog-Verwendung
binlog ist eine binäre Protokolldatei, die alle D...
Samba-Serverkonfiguration unter Centos7 (tatsächlicher Kampf)
Samba Übersicht Samba ist eine kostenlose Softwar...