Schreiben eines Schere-Stein-Papier-Spiels in JavaScript
|
In diesem Artikel finden Sie den spezifischen Code zum Schreiben eines Schere-Stein-Papier-Spiels in JavaScript zu Ihrer Information. Der spezifische Inhalt ist wie folgt HTML Quelltext:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<Titel>JS</Titel>
<script rel="script" src="js1.js"></script>
<Stil>
#Div {
Breite: 1000px;
Höhe: 700px;
Position: relativ;
Rahmenstil: Rille;
Rahmenbreite: 2px;
}
/*Ratespielbereich*/
#Bereich {
Breite: 300px;
Höhe: 200px;
Hintergrundfarbe: #011bfd;
Position: absolut;
oben: 20 %;
links: 50%;
transformieren: übersetzen(-50 %, -50 %);
}
/*Anzeigebereich*/
#Ergebnisse {
Breite: 400px;
Höhe: 50px;
Hintergrundfarbe: #f7f8fd;
Textausrichtung: zentriert;
Schriftgröße: 30px;
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %, -50 %);
}
/*Kartenstein*/
#Stein
Breite: 100px;
Höhe: 150px;
Hintergrundfarbe: #011bfd;
Position: absolut;
oben: 80%;
links: 30%;
transformieren: übersetzen(-50 %, -50 %);
}
/*Kartenschere*/
#Schere {
Breite: 100px;
Höhe: 150px;
Hintergrundfarbe: #011bfd;
Position: absolut;
oben: 80%;
links: 50%;
transformieren: übersetzen(-50 %, -50 %);
}
/*Kartontuch*/
#Tuch {
Breite: 100px;
Höhe: 150px;
Hintergrundfarbe: #011bfd;
Position: absolut;
oben: 80%;
links: 70%;
transformieren: übersetzen(-50 %, -50 %);
}
</Stil>
</Kopf>
<Text>
<div id="Div">
<div id="Bereich"></div>
<div id="Ergebnisse"></div>
<div id="Stein" draggable="true"></div>
<div id="Schere" draggable="true"></div>
<div id="Stoff" draggable="true"></div>
</div>
<Skript rel="Skript">
zeigen();
</Skript>
</body>
</html>JavaScript-Code:
/***
Fläche Fläche Stein = Stein > Fels < Papier Schere Schere < Fels = Schere > Stoff > Fels < Papier Schere = Stoff ***/
/***
Datentyp anzeigen: Object.prototype.toString.call(variable)
Teil aktualisieren: window.location.reload('#area');
***/
Funktion Init () {
//HTML-ID abrufen und binden, HTML-Format zurückgeben (HTMLDivElement)
const Bereich = document.querySelector("#Bereich");
const Ergebnisse = document.querySelector("#Ergebnisse");
const stone = document.querySelector("#stone");
const Schere = document.querySelector("#Schere");
const cloth = document.querySelector("#cloth");
//Definieren Sie die gezogene Karte let ondragstart_ID = null
//Der Schere-Stein-Papier-Typ wird als Array geschrieben const random_Action = ['stone', 'scissors', 'cloth'];
//Den Schlüssel eines Arrays zufällig in einem Array abrufen const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
//Holen Sie sich den Schlüsselwert im Array, z. B. „stone“ im Array „random_Action“ (random_Action[0])
const Zufallswert = Zufallsaktion[Zufallsdigitalwert-1];
//Schreiben Sie eine Methode vom Typ „Schere-Stein-Papier“ Funktionsattribut (Parameter) {
//Wenn die Maus hineinfährt (die Schere-Stein-Papier-Karte wird größer)
Parameter.onmouseover = Funktion () {
dieser.Stil.Höhe = "200px";
diese.Stil.Breite = "150px";
}
//Wenn die Maus herausbewegt wird (die Schere-Stein-Papier-Karte kehrt in ihren Ausgangszustand zurück)
Parameter.onmouseleave = Funktion () {
dieser.Stil.Höhe = "150px";
diese.Stil.Breite = "100px";
}
//Wenn das Element anfängt zu ziehen (die Schere-Stein-Papier-Karte wird transparent)
Parameter.ondragstart = Funktion () {
dieser.Stil.Deckkraft = "0,3";
ondragstart_ID = Parameter.ID
}
}
//Erstellen Sie ein Objekt vom Typ Schere-Stein-Papier und weisen Sie den Attributen des Schere-Stein-Papier-Objekts Werte zu this.show_attribute = function () {
Attribut (Stein)
Attribut (Schere)
Attribut (Stoff)
}
//Schreibe das Karten-Drag-Ereignis this.overout = function () {
//Wenn die Karte in den Bereich (Schere-Stein-Papier-Bereich) gezogen wird area.ondragenter = function () {
// Beurteile die Zufallszahl random_Digital, die nicht gleich null sein kann
wenn (random_Digital !== null) {
// Bestimmen Sie die gezogene Karte, wenn (ondragstart_ID === 'stone') {
//Beurteilen, welche Zufallszahl gleich switch (random_Value) { ist.
Fall stone.id:
results.innerHTML = ‚stone = Stein, zeichne! ';
brechen;
Fallschere.id:
results.innerHTML = 'Stein > Schere, du gewinnst! ';
brechen;
casecloth.id:
results.innerHTML = 'Stein < Stoff, du verlierst! ';
brechen;
Standard:
//Fenster aktualisieren.Standort.neu laden();
}
//Das Ziehen des Elements wird beendet (die Schere-Stein-Papier-Karte kehrt in ihren Ausgangszustand zurück)
stone.ondragend = Funktion () {
dieser.Stil.Deckkraft = "1";
}
//Aktualisieren nach 1 Sekunde Verzögerung setTimeout(function (){
fenster.standort.neuladen();
}, 1000);
//Bestimmen Sie die gezogene Karte}else if (ondragstart_ID === 'scissors') {
//Beurteilen, welche Zufallszahl gleich switch (random_Value) { ist.
Fall stone.id:
results.innerHTML = ,,Schere < Stein, du verlierst! ';
brechen;
Fallschere.id:
results.innerHTML = ‚scissors = Schere, zeichne! ';
brechen;
casecloth.id:
results.innerHTML = 'Schere > Stoff, du gewinnst! ';
brechen;
Standard:
//Fenster aktualisieren.Standort.neu laden();
}
//Das Ziehen des Elements wird beendet (die Schere-Stein-Papier-Karte kehrt in ihren Ausgangszustand zurück)
schere.ondragend = Funktion () {
dieser.Stil.Deckkraft = "1";
}
//Aktualisieren nach 1 Sekunde Verzögerung setTimeout(function (){
fenster.standort.neuladen();
}, 1000);
//Beurteile die gezogene Karte}else if (ondragstart_ID === 'cloth') {
//Beurteilen, welche Zufallszahl gleich switch (random_Value) { ist.
Fall stone.id:
results.innerHTML = 'Stoff > Stein, du gewinnst! ';
brechen;
Fallschere.id:
results.innerHTML = 'Stoff < Schere, du verlierst! ';
brechen;
casecloth.id:
results.innerHTML = 'cloth = Stoff, zeichne! ';
brechen;
Standard:
//Fenster aktualisieren.Standort.neu laden();
}
//Das Ziehen des Elements wird beendet (die Schere-Stein-Papier-Karte kehrt in ihren Ausgangszustand zurück)
tuch.ondragend = funktion () {
dieser.Stil.Deckkraft = "1";
}
//Aktualisieren nach 1 Sekunde Verzögerung setTimeout(function (){
fenster.standort.neuladen();
}, 1000);
}
}
}
}
}
//Funktion aufrufen function show() {
const show_html = neue Init();
show_html.show_attribute()
show_html.overout()
}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:
|
<<: 30 Tipps zum Schreiben von HTML-Code
>>: Lösen Sie den Konflikt zwischen Docker und VMware
Artikel empfehlen
Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering
Inhaltsverzeichnis Vorwort 1.1 Funktion 1.2 So st...
Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:
Es gibt kein Problem mit der Dockerfile-Konfigura...
Der Unterschied zwischen KEY, PRIMARY KEY, UNIQUE KEY und INDEX in MySQL
Das im Titel angesprochene Problem lässt sich sch...
Installations-Tutorial zur neuesten MySQL-Version 8.0.17 mit Dekomprimierung
Ich persönlich denke, dass die dekomprimierte Ver...
Hinweise zur Groß-/Kleinschreibung bei MySQL
Inhaltsverzeichnis Die Groß-/Kleinschreibung von ...
Detaillierte Erklärung der Firewall-Regeleinstellungen und Befehle (Whitelist-Einstellungen)
1. Firewall-Regeln festlegen Beispiel 1: Port 808...
Zusammenfassung der wichtigsten Attribute des Body-Tags
bgcolor="Textfarbe" background="Hin...
Beispiel für die Einrichtung eines mehrspaltigen Layouts gleicher Höhe mit CSS
Mehrere Spalten haben zunächst unterschiedliche I...
So lösen Sie das Problem, dass die Scroll-Ansicht des WeChat-Applets nicht nach links und rechts verschoben werden kann
Ich arbeite derzeit an einem eigenen kleinen Prog...
Was tun, wenn Sie Ihr MySQL-Passwort vergessen?
Lösung zum Vergessen des MySQL-Passworts: [root@l...
Detaillierte Erläuterung des Funktionsprinzips und der Verwendung des Docker-Image-Submission-Befehls Commit
Nachdem Sie einen Container lokal erstellt haben,...
Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where
Ausführungsproblem zwischen MySQL Max und Where S...
Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung
Gründe, warum die 1px-Linie dicker wird Wenn wir ...
Analyse des Framework-Prinzips des Linux-Eingabesubsystems
Eingabe-Subsystem-Framework Das Linux-Eingabesubs...
Details zum MySQL-Index-Pushdown
Inhaltsverzeichnis 1. Prinzip des ganz linken Prä...