Skip to content

Commit fa6ec7e

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1137 from shaanrxx/RockPaperScissor-shaanrxx
Add Rock Paper Scissors Files
2 parents b48b879 + 0d2d470 commit fa6ec7e

File tree

7 files changed

+251
-0
lines changed

7 files changed

+251
-0
lines changed

‎RockPaperScissorsGame/shaanrxx/ReadMe.md

Whitespace-only changes.

‎RockPaperScissorsGame/shaanrxx/img/paper.png

117 KB
Loading

‎RockPaperScissorsGame/shaanrxx/img/rock.png

417 KB
Loading

‎RockPaperScissorsGame/shaanrxx/img/scissors.png

512 KB
Loading

‎RockPaperScissorsGame/shaanrxx/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<!-- Preconnect to Google Fonts for faster loading of the 'Orbitron' font -->
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<!-- Link to Google Font 'Orbitron' with specified weights -->
9+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
10+
<title>Rock-Paper-Scissors Game</title>
11+
<!-- Link to external CSS for styling the webpage -->
12+
<link rel="stylesheet" href="styles.css">
13+
</head>
14+
<body>
15+
<!-- Game title with interactive words that can potentially include animations -->
16+
<h1><span id="rock">Rock </span> - <span id="paper">Paper </span> - <span id="scissors">Scissors</span></h1>
17+
18+
<!-- Main game container -->
19+
<div id="game">
20+
<!-- Section where the player can choose their move -->
21+
<div id="player-choice">
22+
<h2>Choose Your Weapon:</h2>
23+
<!-- Buttons for selecting rock, paper, or scissors -->
24+
<button class="choice" id="rock">
25+
<img src="img/rock.png" alt="Rock"> <!-- Image representing rock -->
26+
<span>Rock</span> <!-- Label for the button -->
27+
</button>
28+
<button class="choice" id="paper">
29+
<img src="img/paper.png" alt="Paper"> <!-- Image representing paper -->
30+
<span>Paper</span> <!-- Label for the button -->
31+
</button>
32+
<button class="choice" id="scissors">
33+
<img src="img/scissors.png" alt="Scissors"> <!-- Image representing scissors -->
34+
<span>Scissors</span> <!-- Label for the button -->
35+
</button>
36+
</div>
37+
38+
<!-- Section to display results and scores -->
39+
<div id="result">
40+
<h2>Results:</h2>
41+
<p id="message"></p> <!-- Placeholder for result messages -->
42+
<p>Player Score: <span id="player-score">0</span></p> <!-- Display player's score -->
43+
<p>Computer Score: <span id="computer-score">0</span></p> <!-- Display computer's score -->
44+
</div>
45+
<!-- Button to reset the game -->
46+
<button id="reset">R E S E T</button>
47+
</div>
48+
<!-- Link to external JavaScript file containing game logic -->
49+
<script src="script.js"></script>
50+
</body>
51+
</html>

‎RockPaperScissorsGame/shaanrxx/script.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// Declaring the possible choices for the game and initial scores for both players
2+
const choices = ["rock", "paper", "scissors"];
3+
let playerScore = 0;
4+
let computerScore = 0;
5+
6+
// Adding event listeners to each game choice button
7+
document.querySelectorAll(".choice").forEach(button => {
8+
button.addEventListener("click", () => {
9+
playGame(button.id); // Triggers the playGame function on click
10+
});
11+
});
12+
13+
// Reset game button event listener
14+
document.getElementById("reset").addEventListener("click", resetGame);
15+
16+
// Function to handle the game logic
17+
function playGame(playerChoice) {
18+
// Computer selects a random choice from the choices array
19+
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
20+
// Determine the winner of the round
21+
const resultMessage = determineWinner(playerChoice, computerChoice);
22+
23+
// Update the DOM with the results and current scores
24+
document.getElementById("message").textContent = `You chose ${playerChoice}, computer chose ${computerChoice}. ${resultMessage}`;
25+
document.getElementById("player-score").textContent = playerScore;
26+
document.getElementById("computer-score").textContent = computerScore;
27+
}
28+
29+
// Function to determine the winner of each round
30+
function determineWinner(playerChoice, computerChoice) {
31+
// Check if it's a tie
32+
if (playerChoice === computerChoice) {
33+
return "It's a tie!";
34+
}
35+
36+
// Logic to determine if the player wins
37+
if (
38+
(playerChoice === "rock" && computerChoice === "scissors") ||
39+
(playerChoice === "paper" && computerChoice === "rock") ||
40+
(playerChoice === "scissors" && computerChoice === "paper")
41+
) {
42+
playerScore++; // Increment player score
43+
return "You win!";
44+
} else {
45+
computerScore++; // Increment computer score
46+
return "Computer wins!";
47+
}
48+
}
49+
50+
// Function to reset the game
51+
function resetGame() {
52+
// Reset scores to zero
53+
playerScore = 0;
54+
computerScore = 0;
55+
// Clear messages and score display on the game interface
56+
document.getElementById("message").textContent = "";
57+
document.getElementById("player-score").textContent = "0";
58+
document.getElementById("computer-score").textContent = "0";
59+
}
60+
61+
// Adding animation to cycle through words in the HTML
62+
document.addEventListener('DOMContentLoaded', function() {
63+
// Select all span elements within h1
64+
const words = document.querySelectorAll('h1 span');
65+
let current = 0; // Track the current word index
66+
67+
function animateWords() {
68+
// Remove the class from all words to reset the zoom effect
69+
words.forEach(word => {
70+
word.classList.remove('zoom-effect');
71+
});
72+
73+
// Add the zoom effect class to the current word
74+
words[current].classList.add('zoom-effect');
75+
76+
// Increment and wrap around the word index to start over when it reaches the end
77+
current = (current + 1) % words.length;
78+
}
79+
80+
// Start the animation loop, changing the word every 3000 milliseconds (3 seconds)
81+
setInterval(animateWords, 3000);
82+
});

‎RockPaperScissorsGame/shaanrxx/styles.css

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/* Base styles for the body to set font, alignment, and background */
2+
body {
3+
font-family: 'Orbitron', sans-serif;
4+
text-align: center;
5+
margin: 0;
6+
padding: 0;
7+
background: linear-gradient(165deg, #002c08, #000000); /* Dark green to black gradient */
8+
height: 100vh; /* Full viewport height */
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center; /* Center content vertically */
12+
align-items: center; /* Center content horizontally */
13+
}
14+
15+
/* Styling for the main title with specific margin, color, and a smooth scaling transition */
16+
h1 {
17+
text-align: center;
18+
margin-top: 30px; /* Fixed redundant margin-top */
19+
color: rgb(0, 210, 39); /* Neon green color */
20+
transition: transform 0.5s ease-in-out;
21+
}
22+
23+
/* Styling for images, ensuring they fill their container and are rounded */
24+
img {
25+
width: 100%; /* Full width of their container */
26+
height: 100%; /* Full height, adjusted to maintain aspect ratio */
27+
display: block; /* Block display to remove bottom space */
28+
border-radius: 10px; /* Rounded corners */
29+
}
30+
31+
/* Additional text color settings for headings and paragraphs */
32+
h2, p {
33+
color: rgb(0, 210, 39); /* Uniform neon green text color for consistency */
34+
}
35+
36+
/* Styling for the game container with gradients, shadows, and rounded borders */
37+
#game {
38+
margin: 20px auto;
39+
padding: 20px;
40+
width: 50%;
41+
height: 500px;
42+
background-color: linear-gradient(165deg, #001952, #000000); /* Gradient background */
43+
box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
44+
border-radius: 8px;
45+
}
46+
47+
/* Styling for choice buttons to ensure the image and label fit perfectly */
48+
.choice {
49+
padding: 0;
50+
width: 150px;
51+
height: 150px;
52+
margin: 10px;
53+
display: inline-block;
54+
border: none;
55+
cursor: pointer;
56+
box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
57+
position: relative;
58+
background: none;
59+
border-radius: 10px;
60+
}
61+
62+
/* Hidden span elements that show on hover, providing interactive feedback */
63+
.choice span {
64+
position: absolute;
65+
top: 0;
66+
left: 0;
67+
right: 0;
68+
bottom: 0;
69+
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
70+
color: green;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
opacity: 0; /* Hidden by default */
75+
transition: opacity 0.3s;
76+
font-size: 20px;
77+
border-radius: 10px;
78+
}
79+
80+
/* Hover effect to show the text within the choice button */
81+
.choice:hover span {
82+
opacity: 1;
83+
}
84+
85+
/* Reset button styling with transition effects on hover */
86+
#reset {
87+
padding: 10px 20px;
88+
margin-top: 20px;
89+
background-color: transparent;
90+
color: rgb(130, 204, 130);
91+
border: none;
92+
cursor: pointer;
93+
font-size: 15px;
94+
box-shadow: 0 4px 8px rgba(5, 158, 66, 0.6);
95+
border-radius: 5px;
96+
}
97+
98+
#reset:hover {
99+
background-color: green; /* Changes to solid green on hover */
100+
color: black;
101+
}
102+
103+
/* Animation for zoom effect used in the game title */
104+
@keyframes zoomInZoomOut {
105+
0%, 100% { transform: scale(1); }
106+
50% { transform: scale(1.5); }
107+
}
108+
109+
/* Apply transformation properties to the title spans */
110+
h1 span {
111+
display: inline-block; /* Allows transformation */
112+
transition: transform 1s ease-in-out;
113+
}
114+
115+
/* Class for animating title spans, called dynamically */
116+
.zoom-effect {
117+
animation: zoomInZoomOut 2s ease-in-out;
118+
}

0 commit comments

Comments
 (0)