Click here for free DL of the app version that can save data.

No:11007

←

Prev Next

→

Rock paper scissors
Developer User4715｜Date and time 23/8/6 15:34:12
Build time 17.025 sec｜Game capacity 2.584KB｜

Script

Rock Paper Scissors

Choose your move!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Rock Paper Scissors</title>
    <style>
        body{
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #message {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .pictograms {
            width: 50px;
            height: 50px;
        }
        .result {
            font-size: 22px;
            font-weight: bold;
            margin-top: 20px;
        }
        .choices {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        .choice {
            margin: 0 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Rock Paper Scissors</h1>
    
    <div id="message">Choose your move!</div>
    
    <div class="choices">
        <img src="rock.png" class="choice pictograms" id="rock" onclick="play('rock')">
        <img src="paper.png" class="choice pictograms" id="paper" onclick="play('paper')">
        <img src="scissors.png" class="choice pictograms" id="scissors" onclick="play('scissors')">
    </div>
    
    <div class="result" id="result"></div>
    
    <script>
        function play(playerChoice) {
            var choices = ["rock", "paper", "scissors"];
            var computerChoice = choices[Math.floor(Math.random() * 3)];
            
            var resultElement = document.getElementById("result");
            var messageElement = document.getElementById("message");
            
            var playerImage = document.getElementById(playerChoice);
            
            var computerImage = document.createElement("img");
            computerImage.classList.add("pictograms");
            computerImage.src = computerChoice + ".png";
            
            messageElement.innerHTML = "You chose: ";
            messageElement.appendChild(playerImage);
            
            resultElement.innerHTML = "";
            resultElement.appendChild(computerImage);
            
            if (playerChoice === computerChoice) {
                resultElement.innerHTML += "<br>It's a tie!";
            } else if (
                (playerChoice === "rock" && computerChoice === "scissors") ||
                (playerChoice === "paper" && computerChoice === "rock") ||
                (playerChoice === "scissors" && computerChoice === "paper")
            ) {
                resultElement.innerHTML += "<br>You win!";
            } else {
                resultElement.innerHTML += "<br>You lose!";
            }
        }
    </script>
</body>
</html>