Scribd
Upload
57 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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
57 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
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