ROCK

PAPER
SCISSORS
 INDEX
Sr No Topic Page No.

1. Acknowledgement 1

2. Introduction 2

3. Game Rules and Logic 3

4. Objective of the Game 4

5. Game Mechanics 5

6. Concepts Used 6

7. HTML Code 7

8. JavaScript Code 9

9. Output 11

10. Conclusion 13

11. References 14
 ACKNOWLEDGEMENT

We would like to thank our teachers and professors who gave us a

chance to work on this project. It has been a long and strenuous
project, but we have finally reached the finish line with our final
product. The project has helped us to increase our knowledge in this
area. We owe an immense amount of gratitude to all those who
contributed in one way or another; without their support and
guidance it wouldn’t have been possible.
We appreciate our Client Side Scripting professor Mr. Parvez Vaghela
for her guidance and supervision which has provided a lot of support
needed in completing our project. I would also like to extend my
gratitude to our Principal Mr. Naghnath Kavhale for providing us
with all the facility that was required.
Finally, I want to thank all group members to cooperate and finish
their work at given time. Thank you for your hard work and
dedication, which has made our success possible.

1
 INTRODUCTION

Overview of the Game Concept

The Rock Paper Scissors game is a simple yet
classic hand game played between two
participants. Each player forms one of three
shapes (rock, paper, or scissors) with their
hand simultaneously. The winner is determined
based on the relationship between the chosen
shapes: rock crushes scissors, scissors cut
paper, and paper covers rock. This project brings this age-old game into a
digital format where the player competes against a computer.

Why This Project Was Chosen

This project was chosen because it exemplifies the use of fundamental
JavaScript concepts like DOM manipulation, event handling, conditional
statements, and randomness in an engaging and easily understandable
application. Moreover, it introduces the concept of using cookies to store
persistent data, which adds an extra layer of complexity and practicality to
the game.

2
 GAME RULES AND LOGIC

Game Rules:
1. The player and the computer both choose between rock, paper, and
scissors.
2. Rock beats scissors, scissors beat paper, and paper beats rock.
3. If both the player and the computer choose the same option, the round is a
draw.
4. The first player to score 5 points wins the game.

Game Logic:
1. The game randomly generates the computer’s choice using JavaScript.
2. The user’s choice is taken from their interaction with the buttons (rock,
paper, or scissors).
3. Based on the comparison of the choices, the game determines the winner
of each round and updates the score.
4. Once a score of 5 is reached by either player, the game ends, and a
"Game Over" popup appears displaying the final score.

3
 OBJECTIVE OF THE GAME

Main Goal for the Players

The main goal for the player is to reach 5 points before the computer does.
Each round of the game presents the player with three choices—rock, paper,
or scissors—and they must strategically choose one to beat the computer’s
random selection. The game aims to provide a fun, simple, and competitive
experience while demonstrating logical reasoning and randomness.

1. Win Conditions:
The game checks if either the user or the computer reaches a score of 5.
If the user wins a round, they gain a point. If the computer wins, it gains a
point. A draw results in no points being awarded.
The first to reach 5 points wins, and the game ends, resetting the score to
zero for the next playthrough.

2. Scoring System:
The score is displayed in real time on the scoreboard.
Each time the user wins, the userScore increments by 1 and is updated on
the scoreboard.
Similarly, the computerScore increments by 1 whenever the computer wins.
Scores are stored using cookies, which ensures that users can resume their
game if they refresh the page.

4
 GAME MECHANICS

Explanation of User Interaction

The player interacts with the game through three buttons representing rock,
paper, and scissors. Each button has an icon, and when clicked, the game
compares the player’s choice with the computer’s randomly selected option.
The result is immediately displayed on the screen, along with an update to the
current scores.

Randomization of Computer Choices

The game uses JavaScript’s Math.random() function to randomly
select one of the three possible choices (rock, paper, or scissors) for
the computer. This ensures that the computer’s choice is
unpredictable, making the game more engaging for the player.

Fig 1. Randomization of Computer Choices

5
 JAVASCRIPT CONCEPTS
1. DOM Manipulation
USED
The Document Object Model (DOM) is extensively used in the project to
dynamically update the user interface based on game events (e.g., score
updates, game results). Key elements like the scoreboard, result display, and
popups are all modified using JavaScript’s DOM manipulation methods such
as getElementById() and innerHTML.

2. Event Handling
Event listeners are used to handle the player's interactions with the game
buttons. When a player clicks a button, it triggers the playGame() function,
which processes the player’s choice and runs the game logic.

3. Conditional Statements
The game’s logic relies heavily on conditional statements (if, else if, else) to
compare the player's choice with the computer's, decide the result, and
update the scores accordingly.

4. Cookie Management
Cookies are used to store and retrieve the user's and computer's scores.
Functions like setCookie() and getCookie() handle cookie creation, retrieval,
and expiration.

5. Animation and Styling

The game’s user interface includes animations such as glowing text and button
hover effects, achieved using CSS @keyframes and transition properties. These
enhance the user experience by providing visual feedback and engagement.

6
 HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0-beta3/css/all.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?
family=Orbitron:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Rock Paper Scissors</h1>
<div class="scoreboard">
User: <span id="user-score">0</span> | Computer:
<span id="computer-score">0</span>
</div>
<div class="choices">
<button class="button" onclick="playGame('rock')">
<i class="fas fa-hand-rock"></i>
</button>
<button class="button" onclick="playGame('paper')">
<i class="fas fa-hand-paper"></i>
</button>
<button class="button" onclick="playGame('scissors')">
<i class="fas fa-hand-scissors"></i>
</button>
</div>
<div id="result"></div>

<!-- Popup for Game Instructions -->

<div id="popup" class="hidden">
<div class="popup-content">
<h2>Game Instructions</h2>
<p>
Choose Rock, Paper, or Scissors to play against the computer. The
first to reach 5 points wins!
</p>
<button onclick="closePopup()">Close</button>
</div>
</div>

7
 HTML CODE
<!-- Custom Alert for Game Over -->
<div id="gameOverModal" class="modal hidden">
<div class="modal-content">
<h2>Game Over!</h2>
<p id="finalScore"></p>
<button onclick="closeGameOverModal()">Close</button>
</div>
</div>

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

8
 JAVASCRIPT CODE
let userScore = 0;
let computerScore = 0;

document.addEventListener("DOMContentLoaded", function () {
// Load scores from cookies when the page loads
userScore = getCookie("userScore") ? parseInt(getCookie("userScore")) : 0;
computerScore = getCookie("computerScore")
? parseInt(getCookie("computerScore"))
: 0;

document.getElementById("user-score").textContent = userScore;
document.getElementById("computer-score").textContent = computerScore;

document.getElementById("popup").classList.remove("hidden");
});

function playGame(playerChoice) {
const choices = ["rock", "paper", "scissors"];
const computerChoice = choices[Math.floor(Math.random() * 3)];
let result = "";

if (playerChoice === computerChoice) {

result = "It's a draw!";
} else if (
(playerChoice === "rock" && computerChoice === "scissors") ||
(playerChoice === "paper" && computerChoice === "rock") ||
(playerChoice === "scissors" && computerChoice === "paper")
) {
result = "You win!";
userScore++;
setCookie("userScore", userScore, 365);
} else {
result = "You lose!";
computerScore++;
setCookie("computerScore", computerScore, 365);
}

document.getElementById("user-score").textContent = userScore;
document.getElementById("computer-score").textContent = computerScore;
document.getElementById("result").innerHTML = `
<div class="icon"><i class="fas fa-hand-${playerChoice}"></i></div>
<div class="icon"><i class="fas fa-hand-${computerChoice}"></i></div>
<p>${result}</p>`;
checkGameEnd();
}

9
 JAVASCRIPT CODE
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
}
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
}

function checkGameEnd() {
if (userScore === 5 || computerScore === 5) {
document.getElementById(
"finalScore"
).textContent = `Final score - User: ${userScore}, Computer: ${computerScore}`;
document.getElementById("gameOverModal").classList.remove("hidden");
userScore = 0;
computerScore = 0;
document.getElementById("user-score").textContent = userScore;
document.getElementById("computer-score").textContent = computerScore;
setCookie("userScore", userScore, 365);
setCookie("computerScore", computerScore, 365);
}
}
function closePopup() {
document.getElementById("popup").classList.add("hidden");
}
function closeGameOverModal() {
document.getElementById("gameOverModal").classList.add("hidden");
}
// Show popup on page load
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("popup").classList.remove("hidden");
});

// Rollover effect for buttons

const buttons = document.querySelectorAll(".button");
buttons.forEach((button) => {
button.addEventListener("mouseover", function () {
this.style.transform = "scale(1.2)";
});
button.addEventListener("mouseout", function () {
this.style.transform = "scale(1)";
});
});

10
 OUTPUT

Fig 2. Landing page Popup

Fig 3. Landing page UI

11
 OUTPUT

Fig 4. Round Winning

Fig 5.Game over UI

12
 CONCLUSION

The Rock Paper Scissors game is a simple web project demonstrating key web
development concepts. It uses JavaScript for dynamic user interactions and
DOM manipulation to update scores in real time. The game also incorporates
cookies to store and persist scores across sessions, ensuring user data isn't
lost when the page refreshes.

The project provides a basic simulation of the classic game while introducing
fundamental concepts like randomness and conditionals. Future enhancements
could include adding difficulty levels, a multiplayer option, or improved
graphics to make the experience more engaging.

Overall, this project was a rewarding learning experience that covered

important web development techniques such as event handling, state
management, and user interaction. It provides a strong foundation to explore
more advanced concepts in web development and game design.

13
REFERENCES

canva.com
www.geeksforgeeks.com

chat.openai.com

14