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
Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL
1. Es gibt zwei Möglichkeiten, globale Variablen ...
So konfigurieren Sie Hexo und GitHub zum Binden eines benutzerdefinierten Domänennamens unter Windows 10
Hexo bindet einen benutzerdefinierten Domänenname...
JavaScript-Puzzlespiel
In diesem Artikelbeispiel wird der spezifische Ja...
7 nützliche neue TypeScript-Funktionen
Inhaltsverzeichnis 1. Optionale Verkettung 2. Nul...
Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen
Detaillierte Erklärung des Linux-Befehls vi Der v...
VMware Workstation ist nicht mit Device/Credential Guard kompatibel
Beim Installieren einer virtuellen Maschine wird ...
Einige weniger bekannte Sortiermethoden in MySQL
Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...
Vue + webrtc (Tencent Cloud) Praxis der Implementierung der Live-Broadcast-Funktion
Inhaltsverzeichnis 1. Live-Übertragungseffekt 2. ...
W3C Tutorial (16): Weitere W3C Aktivitäten
Dieser Abschnitt bietet einen Überblick über eini...
Reine JS-Methode zum Exportieren von Tabellen nach Excel
html <div > <button type="button&qu...
Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)
Code kopieren Der Code lautet wie folgt: @Zeichen...
MySQL fragt den aktuellsten Datensatz der SQL-Anweisung ab (Optimierung)
Die schlechteste Option besteht darin, die Ergebn...
Die detaillierteste Installation und Konfiguration von Redis in Docker (mit Bildern und Text)
1. Finden Sie eine geeignete Version von Redis fü...
js-Speicherleckszenarien, wie man sie im Detail überwacht und analysiert
Inhaltsverzeichnis Vorwort Welche Situationen kön...
Analyse und Lösung der Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden
Vorwort Es gibt die folgenden Möglichkeiten, gepl...