Scribd
Upload
58 views

Create A Game Using HTML

The document describes a rock paper scissors game with JavaScript code. It includes the game logic and functions to randomly generate computer choices and compare them to player selections to determine a winner. It also tracks and displays the scores for both the player and computer.

Uploaded by

deevyagada57
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
58 views

Create A Game Using HTML

The document describes a rock paper scissors game with JavaScript code. It includes the game logic and functions to randomly generate computer choices and compare them to player selections to determine a winner. It also tracks and displays the scores for both the player and computer.

Uploaded by

deevyagada57
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Pinned by Bro Code

@BroCodez
2 weeks ago
// ROCK PAPER SCISSORS

const choices = ["rock", "paper", "scissors"];


const playerDisplay = document.getElementById("playerDisplay");
const computerDisplay = document.getElementById("computerDisplay");
const resultDisplay = document.getElementById("resultDisplay");
const playerScoreDisplay = document.getElementById("playerScoreDisplay");
const computerScoreDisplay = document.getElementById("computerScoreDisplay");
let playerScore = 0;
let computerScore = 0;

function playGame(playerChoice){

const computerChoice = choices[Math.floor(Math.random() * 3)];


let result = "";

if(playerChoice === computerChoice){


result = "IT'S A TIE!";
}
else{
switch(playerChoice){
case "rock":
result = (computerChoice === "scissors") ? "YOU WIN!" : "YOU
LOSE!";
break;
case "paper":
result = (computerChoice === "rock") ? "YOU WIN!" : "YOU LOSE!";
break;
case "scissors":
result = (computerChoice === "paper") ? "YOU WIN!" : "YOU LOSE!";
break;
}
}

playerDisplay.textContent = `PLAYER: ${playerChoice}`;


computerDisplay.textContent = `Computer: ${computerChoice}`;
resultDisplay.textContent = result;

resultDisplay.classList.remove("greenText", "redText");

switch(result){
case "YOU WIN!":
resultDisplay.classList.add("greenText");
playerScore++;
playerScoreDisplay.textContent = playerScore;
break;
case "YOU LOSE!":
resultDisplay.classList.add("redText");
computerScore++;
computerScoreDisplay.textContent = computerScore;
break;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Rock - Paper - Scissors</h1>

<div class="choices">
<button onclick="playGame('rock')">??</button>
<button onclick="playGame('paper')">?</button>
<button onclick="playGame('scissors')">?</button>
</div>

<div id="playerDisplay">PLAYER: </div>


<div id="computerDisplay">COMPUTER: </div>
<div id="resultDisplay"></div>

<div class="scoreDisplay">Player Score:


<span id="playerScoreDisplay">0</span>
</div>

<div class="scoreDisplay">Computer Score:


<span id="computerScoreDisplay">0</span>
</div>

<script src="index.js"></script>
</body>
</html>

body{
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1{
font-size: 3.5rem;
color: hsl(0, 0%, 20%);
}
.choices{
margin-bottom: 30px;
}
.choices button{
font-size: 7.5rem;
min-width: 160px;
margin: 0 10px;
border-radius: 250px;
background-color: hsl(200, 100%, 50%);
cursor: pointer;
transition: background-color 0.5s ease;
}
.choices button:hover{
background-color: hsl(200, 100%, 70%);
}
#playerDisplay, #computerDisplay{
font-size: 2.5rem;
}
#resultDisplay{
font-size: 5rem;
margin: 30px 0;
}
.scoreDisplay{
font-size: 2rem;
}
.greenText, #playerScoreDisplay{
color: hsl(130, 84%, 54%);
}
.redText, #computerScoreDisplay{
color: hsl(0, 84%, 60%);
}

You might also like