Schere Stein Papier als Browsergame in Javascript

4 Lösungen

Fortgeschrittener - JavaScript von Programmer21 - 05.05.2019 um 21:42 Uhr

Die Aufgabe ist ein Schere Stein Papier Spiel in Javascript zu Programmieren.
Man soll gegen einen Computer-Gegner spielen.

Bitte melden Sie sich an um zur Aufgabenbeschreibung eine Frage zu stellen.

Frage stellen

Bitte melden Sie sich an um eine Lösung einzureichen.

Lösung einreichen

von Tobi187 (60 Punkte) - 04.02.2020 um 05:33 Uhr

HTML-Code

<!DOCTYPE html>
<html>
    <head>
        <title>Website name</title>
        <meta charset="uft-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
            <h1>Schere Stein Papier</h1>
            <!--input placeholder="What needs to be done?" autofocus id="input-box"-->
            <div class="mitte">
                <input class="toggle" type="checkbox" id="Schere">
                <label>Schere</label>
                <input class="toggle" type="checkbox" id="Stein">
                <label for="input">Stein</label>
                <input class="toggle" type="checkbox" id="Papier">
                <label for="toggle">Papier</label> <br> <br>
                <button id="playbutton">Play</button>
                <br>
                <br>
                <p>Wins <span id="wincounter">0</span></p>
                <p>Loses <span id="losecounter">0</span></p><br><br>
                <button id="newgame">Start a new game</button>
            </div>
            <script lang="javascript" src="scheresteinpapier.js"></script>

            
    </body>
    </html>

JavaScript-Code

const schere=document.getElementById("Schere")
const stein=document.getElementById("Stein")
const papier=document.getElementById("Papier")
const game2=[schere, stein, papier]

//zufallsprinizp implantieren
const min= 1
const max= 4
//const zufall = Math.floor( Math.random() * (max - min +1 )) +min

schere.addEventListener("click",() => {
    stein.checked=false
    papier.checked=false
})

stein.addEventListener("click",() => {
    schere.checked=false
    papier.checked=false
})

papier.addEventListener("click",() => {
    stein.checked=false
    schere.checked=false
}) 

const playbutton= document.getElementById("playbutton")
let wincounter = 0
let losecounter = 0
const wins = document.getElementById("wincounter")
const loses = document.getElementById("losecounter")
playbutton.addEventListener("click", ()  => {
    //if(schere.checked=true || stein.checked=true || papier.checked=true){
    const zufall = Math.floor( Math.random() * (max - min +1 )) +min
    for( const signs of game2){
        if(zufall<=2){
            wincounter++
            wins.innerText = wincounter
            return alert("Win")
        }
        if(zufall>3){
            losecounter++
            loses.innerText = losecounter
            return alert("Lost")
        }
        if(zufall<=3 && zufall>2){
            /*counter++
            thecounter.innerText = counter*/
            return alert("Draw")
        }
    }
//}
})

const newgame = document.getElementById("newgame")
newgame.addEventListener("click", () => {
    wincounter = 0
    losecounter = 0
    wins.innerText = wincounter
    loses.innerText = losecounter
})