JavaScript :: Aufgabe #7

4 Lösungen Lösungen öffentlich
#7

Schere Stein Papier als Browsergame in Javascript

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
Votes: 0 Admin: 0

Lösungen:

#1
vote_ok
von Tobi187 (60 Punkte) - 04.02.2020 um 05:33 Uhr
Quellcode ausblenden 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>

Quellcode ausblenden 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
})
Bitte melden Sie sich an um eine Kommentar zu schreiben.
Kommentar schreiben
Admin: 0
#2
vote_ok
von m4rtin (50 Punkte) - 11.04.2021 um 14:37 Uhr
Quellcode ausblenden HTML-Code
<!DOCTYPE html>
<html>

<body>

    <input type="text" id="yourText" value="">

    <p>Geben Sie Schere, Stein, Papier oder Brunnen ein</p>

    <button onclick="myFunction()">Los</button>

    <p id="demo"></p>

    <script>
        function myFunction() {
            result = "initial";
            yourText = document.getElementById("yourText").value;

            function getRandomIntInclusive(min, max) {
                var d = new Date();
                var n = d.getMilliseconds();
                return Math.round((n / 1000) * (max - min)) + min;
            }

            myText = getRandomIntInclusive(0, 3)

            // ========= Umwandlung =========

            switch (myText) {
                case 0: myText = "Schere"; break;
                case 1: myText = "Stein"; break;
                case 2: myText = "Papier"; break;
                case 3: myText = "Brunnen"; break;
            }

            // ========= Abfrage 1 =========

            if (myText === "Schere") {
                switch (yourText) {
                    case "Schere": result = 0; break;
                    case "Stein": result = 1; break;
                    case "Papier": result = 2; break;
                    case "Brunnen": result = 1; break;
                }
            }

            // ========= Abfrage 2 =========

            if (myText === "Stein") {
                switch (yourText) {
                    case "Schere": result = 2; break;
                    case "Stein": result = 0; break;
                    case "Papier": result = 2; break;
                    case "Brunnen": result = 1; break;
                }
            }

            // ========= Abfrage 3 =========

            if (myText === "Papier") {
                switch (yourText) {
                    case "Schere": result = 1; break;
                    case "Stein": result = 1; break;
                    case "Papier": result = 0; break;
                    case "Brunnen": result = 2; break;
                }
            }

            // ========= Abfrage 4 =========

            if (myText === "Brunnen") {
                switch (yourText) {
                    case "Schere": result = 2; break;
                    case "Stein": result = 2; break;
                    case "Papier": result = 1; break;
                    case "Brunnen": result = 0; break;
                }
            }

            // ========= Umwandlung =========

            switch (result) {
                case 0: result = "Computer hat " + myText + ": Patt"; break;
                case 1: result = "Computer hat " + myText + ": Spieler hat gewonnen!"; break;
                case 2: result = "Computer hat " + myText + ": Computer hat gewonnen!"; break;
            }


            document.getElementById("demo").innerHTML = result;
        }

    </script>

</body>

</html>
Bitte melden Sie sich an um eine Kommentar zu schreiben.
Kommentar schreiben
Admin: 0
#4
vote_ok
von Aliex (60 Punkte) - 23.04.2021 um 03:12 Uhr
[CODE]
Quellcode ausblenden HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
</head>
<body>
    <script src="index.js"></script>
    <h1 id="WinMSG">Wins: 0</h1>
    <h1 id="LoseMSG">Lose: 0</h1>
    <p id="ChatMSG">welcome to scissors stone paper</p>
    <button onclick="clickscissors()">scissors</button>
    <button onclick="clickstone()">stone</button>
    <button onclick="clickpaper()">paper</button>
</body>
</html>


Quellcode ausblenden JavaScript-Code
let WinMSG;
let ChatMSG;
let LoseMSG;

onload = (event) => {
    WinMSG = document.getElementById("WinMSG");
    ChatMSG = document.getElementById("ChatMSG");
    LoseMSG = document.getElementById("LoseMSG");
};

let wincount = 0;
let losecount = 0;
let message = "";
let winmsg = "";
let losemsg = "";

function clickscissors() {
    let random = Math.floor(Math.random() * 4);
    let Player = 0;
    let Bot = random;
    if(Bot === Player){
        message = "Draw!   Dein Gegner hat auch Schere!";
        ChatMSG.innerText = message;
    }else if(Bot > 0 && Bot < 2){
        message = "Lose!   Dein Gegner hat Stein!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else if(Bot > 1 && Bot < 3){
        message = "Win!   Dein Gegner hat Papier!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else{
        message = "Lose!   Dein Gegner hat Stein!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};

function clickstone() {
    let random = Math.floor(Math.random() * 4);
    let Player = 1;
    let Bot = random;
    if(Bot === Player){
        message = "Draw!   Dein Gegner hat auch Stein!";
        ChatMSG.innerText = message;
    }else if(Bot < 1){
        message = "Win!   Dein Gegner hat Schere!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else if(Bot > 1 && Bot < 3){
        message = "Lose!   Dein Gegner hat Papier!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else{
        message = "Lose!   Dein Gegner hat Papier!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};

function clickpaper() {
    let random = Math.floor(Math.random() * 4);
    let Player = 2;
    let Bot = random;
    if(Bot === Player){
        message = "Draw!   Dein Gegner hat auch Papier!";
        ChatMSG.innerText = message;
    }else if(Bot < 2 && Bot > 0){
        message = "Win!   Dein Gegner hat Stein!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else if(Bot < 1){
        message = "Lose!   Dein Gegner hat Schere!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else{
        message = "Lose!   Dein Gegner hat Schere!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};


[/CODE]
Bitte melden Sie sich an um eine Kommentar zu schreiben.
Kommentar schreiben
Admin: 0
#3
vote_ok
von Aliex (60 Punkte) - 23.04.2021 um 07:00 Uhr
Quellcode ausblenden HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
</head>
<body>
    <script src="index.js"></script>
    <h1><a id="WinMSG">Wins: 0</a> |-| <a id="LoseMSG">Lose: 0</a></h1>
    <p id="ChatMSG">Willkommen zu schere stein papier</p>
    <button onclick="clickscissors()">scissors</button>
    <button onclick="clickstone()">stone</button>
    <button onclick="clickpaper()">paper</button>
    <p>-------------------------------------------------</p>
    <button onclick="clickreset()">RESET</button>
</body>
</html>

Quellcode ausblenden JavaScript-Code
let WinMSG;
let ChatMSG;
let LoseMSG;

onload = (event) => {
    WinMSG = document.getElementById("WinMSG");
    ChatMSG = document.getElementById("ChatMSG");
    LoseMSG = document.getElementById("LoseMSG");
    ChatMSG.style.color = "pink";
};

let wincount = 0;
let losecount = 0;
let message = "";
let winmsg = "";
let losemsg = "";

function clickscissors() {
    let random = Math.floor(Math.random() * 4);
    let Player = 0;
    let Bot = random;
    if(Bot === Player){
        ChatMSG.style.color = "orange";
        message = "Draw!   Dein Gegner hat auch Schere!";
        ChatMSG.innerText = message;
    }else if(Bot > 0 && Bot < 2){
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Stein!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else if(Bot > 1 && Bot < 3){
        ChatMSG.style.color = "green";
        message = "Win!   Dein Gegner hat Papier!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else{
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Stein!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};

function clickstone() {
    let random = Math.floor(Math.random() * 4);
    let Player = 1;
    let Bot = random;
    if(Bot === Player){
        ChatMSG.style.color = "orange";
        message = "Draw!   Dein Gegner hat auch Stein!";
        ChatMSG.innerText = message;
    }else if(Bot < 1){
        ChatMSG.style.color = "green";
        message = "Win!   Dein Gegner hat Schere!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else if(Bot > 1 && Bot < 3){
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Papier!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else{
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Papier!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};

function clickpaper() {
    let random = Math.floor(Math.random() * 4);
    let Player = 2;
    let Bot = random;
    if(Bot === Player){
        ChatMSG.style.color = "orange";
        message = "Draw!   Dein Gegner hat auch Papier!";
        ChatMSG.innerText = message;
    }else if(Bot < 2 && Bot > 0){
        ChatMSG.style.color = "green";
        message = "Win!   Dein Gegner hat Stein!";
        winmsg = "Wins: " + ++wincount;
        ChatMSG.innerText = message;
        WinMSG.innerText = winmsg;
    }else if(Bot < 1){
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Schere!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }else{
        ChatMSG.style.color = "red";
        message = "Lose!   Dein Gegner hat Schere!";
        losemsg = "Lose: " + ++losecount;
        ChatMSG.innerText = message;
        LoseMSG.innerText = losemsg;
    }
};

function clickreset(){
    message = "Willkommen zu schere stein papier";
    losecount = 0;
    wincount = 0;
    losemsg = "Lose: 0";
    winmsg = "Wins: 0";
    ChatMSG.innerText = message;
    LoseMSG.innerText = losemsg;
    WinMSG.innerText = winmsg;
    ChatMSG.style.color = "pink";
};
Bitte melden Sie sich an um eine Kommentar zu schreiben.
Kommentar schreiben
Admin: 0