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 Aliex (60 Punkte) - 23.04.2021 um 07:00 Uhr

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>

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";
};