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:

JS implementiert das Schere-Stein-Papier-Spiel
JavaScript basierend auf objektorientierter Implementierung des Schere-Stein-Papier-Spiels
js implementiert das Schere-Stein-Papier-Spiel
JavaScript-Implementierung des Quellcode-Sharings für das Schere-Stein-Papier-Spiel
HTML+JS zur Implementierung des Beispielcodes des Schere-Stein-Papier-Spiels

<<: 30 Tipps zum Schreiben von HTML-Code

>>: Lösen Sie den Konflikt zwischen Docker und VMware