Rock Paper Scissors Game
About this app
Play Rock Paper Scissors game online.
Rock Paper Scissors Game Rock Paper Scissors Player: 0 Computer: 0 Make your choice! Rock Paper Scissors
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Rock Paper Scissors Game</title>
<meta name="description" content="Play Rock Paper Scissors game online.">
<meta name="keywords" content="rock paper scissors, game, online, play">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Variables to keep track of scores
let playerScore = 0;
let computerScore = 0;
// Function to generate computer's choice
function getComputerChoice() {
const choices = ["rock", "paper", "scissors"];
const randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}
// Function to determine the winner
function determineWinner(playerChoice, computerChoice) {
if (playerChoice === computerChoice) {
return "draw";
} else if (
(playerChoice === "rock" && computerChoice === "scissors") ||
(playerChoice === "paper" && computerChoice === "rock") ||
(playerChoice === "scissors" && computerChoice === "paper")
) {
return "player";
} else {
return "computer";
}
}
// Function to update the score
function updateScore(winner) {
if (winner === "player") {
playerScore++;
} else if (winner === "computer") {
computerScore++;
}
}
// Function to display the result
function displayResult(playerChoice, computerChoice, winner) {
const resultText = document.getElementById("result-text");
resultText.innerHTML = `You chose <strong>${playerChoice}</strong>. The computer chose <strong>${computerChoice}</strong>.`;
const winnerText = document.getElementById("winner-text");
if (winner === "player") {
winnerText.innerHTML = "You win!";
} else if (winner === "computer") {
winnerText.innerHTML = "Computer wins!";
} else {
winnerText.innerHTML = "It's a draw!";
}
const playerScoreText = document.getElementById("player-score");
playerScoreText.innerHTML = `Player: ${playerScore}`;
const computerScoreText = document.getElementById("computer-score");
computerScoreText.innerHTML = `Computer: ${computerScore}`;
}
// Function to play the game
function playGame(playerChoice) {
const computerChoice = getComputerChoice();
const winner = determineWinner(playerChoice, computerChoice);
updateScore(winner);
displayResult(playerChoice, computerChoice, winner);
}
// Event listeners for player's choice buttons
const rockButton = document.getElementById("rock-button");
rockButton.addEventListener("click", function() {
playGame("rock");
});
const paperButton = document.getElementById("paper-button");
paperButton.addEventListener("click", function() {
playGame("paper");
});
const scissorsButton = document.getElementById("scissors-button");
scissorsButton.addEventListener("click", function() {
playGame("scissors");
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f2f2f2;
font-family: 'Roboto', sans-serif;
}
h1 {
text-align: center;
margin-top: 30px;
color: #333;
}
.score {
text-align: center;
margin-top: 20px;
font-size: 18px;
color: #555;
}
.result {
text-align: center;
margin-top: 20px;
font-size: 24px;
color: #555;
}
.choice-buttons {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 20px;
}
.choice-button {
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
}
.choice-button:hover {
background-color: #555;
}
.choice-button i {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Rock Paper Scissors</h1>
<div class="score">
<span id="player-score">Player: 0</span>
<span id="computer-score">Computer: 0</span>
</div>
<div class="result">
<p id="result-text">Make your choice!</p>
<p id="winner-text"></p>
</div>
<div class="choice-buttons">
<button id="rock-button" class="choice-button"><i class="fa fa-hand-rock-o"></i> Rock</button>
<button id="paper-button" class="choice-button"><i class="fa fa-hand-paper-o"></i> Paper</button>
<button id="scissors-button" class="choice-button"><i class="fa fa-hand-scissors-o"></i> Scissors</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!