Rock paper scissors with a score counter's game

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

No:17631

109

←

Prev Next

→

Rock paper scissors with a score counter
Developer User7745｜Date and time 23/9/24 4:23:59
Build time 23.289 sec｜Game capacity 2.649KB｜

Script

Sure! Here's an example of a simple Rock Paper Scissors game implemented as a single HTML file using JavaScript and enclosed in `` tags: <br><br> <br> <style> #loadedGame { text-align: center; } img { width: 100px; height: 100px; margin: 10px; cursor: pointer; } #score { font-size: 24px; margin-top: 20px; } </style> <h1>Rock Paper Scissors</h1> <p>Click on a pictogram to make your choice:</p> <div id="game"> <img id="rock" src="emozi_all/rock.png" alt="Rock"> <img id="paper" src="emozi_himawari.png" alt="Paper"> <img id="scissors" src="emozi_all/scissors.png" alt="Scissors"> </div> <h2 id="result"></h2> <p id="score">Score: 0</p>

In this game, you have three clickable pictograms representing "Rock," "Paper," and "Scissors." Every time you click on one of the pictograms, the game compares your choice with the computer's choice and displays the result (win, lose, or tie). The score keeps track of your wins and losses, updating dynamically.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple Rock Paper Scissors game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Rock Paper Scissors</title>
    <style>
      body {
        text-align: center;
      }
      
      img {
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
      }

#score {
        font-size: 24px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Rock Paper Scissors</h1>
    <p>Click on a pictogram to make your choice:</p>

<h2 id="result"></h2>
    <p id="score">Score: 0</p>

function getComputerChoice() {
        const choices = ['rock', 'paper', 'scissors'];
        const randomIndex = Math.floor(Math.random() * choices.length);
        return choices[randomIndex];
      }

function getUserChoice(userChoice) {
        const computerChoice = getComputerChoice();
        document.getElementById("result").innerText = `User: ${userChoice} - Computer: ${computerChoice}`;

if (userChoice === computerChoice) {
          document.getElementById("result").innerText = "It's a tie!";
        } else if (
          (userChoice === 'rock' && computerChoice === 'scissors') ||
          (userChoice === 'paper' && computerChoice === 'rock') ||
          (userChoice === 'scissors' && computerChoice === 'paper')
        ) {
          document.getElementById("result").innerText = "You win!";
          score++;
        } else {
          document.getElementById("result").innerText = "You lose!";
          score--;
        }

document.getElementById("score").innerText = `Score: ${score}`;
      }

document.getElementById("rock").addEventListener("click", function() {
        getUserChoice("rock");
      });

document.getElementById("paper").addEventListener("click", function() {
        getUserChoice("paper");
      });

document.getElementById("scissors").addEventListener("click", function() {
        getUserChoice("scissors");
      });
    </script>
  </body>
</html>
```

In this game, you have three clickable pictograms representing "Rock," "Paper," and "Scissors." Every time you click on one of the pictograms, the game compares your choice with the computer's choice and displays the result (win, lose, or tie). The score keeps track of your wins and losses, updating dynamically.