Create an Example Solution for a Rock Paper Scissors Game #323 by suryaprakash0010 · Pull Request #333 · sumn2u/learn-javascript

suryaprakash0010 · 2025-10-05T13:04:59Z

Rock-Paper-Scissors Game Example (#323)

Description

Added a complete Rock-Paper-Scissors game example in the examples/ folder demonstrating DOM manipulation, event handling, animations, and game logic with score tracking.

Features

✊🖐️✌️ Buttons for Rock, Paper, and Scissors
🤖 Random computer moves
🧮 Real-time score tracking (User vs Computer)
⚡ Winner determination per round
🎞️ Smooth animations and visual feedback
🔊 Optional sound effects for actions
🔁 Reset button to restart the game
🕹️ Round history showing past moves and results

Files Added

index.html — Game UI structure with buttons and score display
styles.css — Responsive, animated design for better UX
script.js — Core game logic with event handling, animations, and scoring
README.md — Game overview and setup instructions

Concepts Demonstrated

DOM Manipulation • Event Handling • Conditional Logic • Randomization • State Management • Animations • Responsive Design

**Ready for review! **

vercel · 2025-10-05T13:05:03Z

@suryaprakash0010 is attempting to deploy a commit to the Suman Kunwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-10-05T23:41:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
learn-javascript	Ready	Preview	Comment	Oct 5, 2025 11:43pm

Copilot

Pull Request Overview

Adds a complete Rock-Paper-Scissors example demonstrating DOM manipulation, event handling, animations, and score tracking.

New example app with HTML UI, responsive CSS, and JavaScript game logic
Includes round history, keyboard shortcuts, and reset functionality

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 8 comments.

File	Description
examples/Rock-Paper-Scissors/index.html	Game markup, controls, and containers for scores, results, and history
examples/Rock-Paper-Scissors/styles.css	Visual design, animations, responsiveness
examples/Rock-Paper-Scissors/script.js	Core game class, event wiring, scoring, history, and rendering
examples/Rock-Paper-Scissors/README.md	Documentation for features, concepts, and usage

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-05T23:44:43Z

examples/Rock-Paper-Scissors/script.js

+// Initialize the game when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const game = new RockPaperScissorsGame();
+
+    // Add keyboard support for accessibility
+    document.addEventListener('keydown', (e) => {
+        if (e.key.toLowerCase() === 'r') {
+            game.playRound('rock');
+        } else if (e.key.toLowerCase() === 'p') {
+            game.playRound('paper');
+        } else if (e.key.toLowerCase() === 's') {
+            game.playRound('scissors');
+        }
+    });
+
+    // Add sound effects (optional)
+    const playSound = (type) => {
+        // You can add sound files in the same directory and uncomment this
+        // const audio = new Audio(`${type}.mp3`);
+        // audio.volume = 0.3;
+        // audio.play().catch(e => console.log('Audio play failed:', e));
+    };
+
+    // Export for potential testing
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = RockPaperScissorsGame;
+    }
+});


module.exports is placed inside the DOMContentLoaded handler, so it never runs in a Node/test environment where the DOM is not present. Move the export outside the event listener to make the class importable in tests: place if (typeof module !== 'undefined' && module.exports) { module.exports = RockPaperScissorsGame; } right after the class definition; keep DOM initialization inside the listener.

Copilot · 2025-10-05T23:44:43Z

examples/Rock-Paper-Scissors/index.html

+                    <h3 id="playerChoiceText">Make your move!</h3>
+                </div>
+
+                <div class="result-display" id="gameResult">


The result area updates dynamically but lacks an ARIA live region, so screen readers may not announce round outcomes. Add role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" to the container to announce result changes: <div class=\"result-display\" id=\"gameResult\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">.

Suggested change

<div class="result-display" id="gameResult">

<div class="result-display" id="gameResult" role="status" aria-live="polite" aria-atomic="true">

Copilot · 2025-10-05T23:44:44Z

examples/Rock-Paper-Scissors/index.html

+                <button class="choice-btn rock" id="rockBtn" data-choice="rock">
+                    <span class="emoji">🪨</span>
+                    <span class="label">Rock</span>
+                </button>
+                <button class="choice-btn paper" id="paperBtn" data-choice="paper">
+                    <span class="emoji">📄</span>
+                    <span class="label">Paper</span>
+                </button>
+                <button class="choice-btn scissors" id="scissorsBtn" data-choice="scissors">
+                    <span class="emoji">✂️</span>
+                    <span class="label">Scissors</span>
+                </button>
+            </div>
+
+            <button class="reset-btn" id="resetBtn">


Buttons default to type="submit" in some contexts; explicitly set type=\"button\" to avoid unintended form submissions and add discoverability for shortcuts with aria-keyshortcuts on choice buttons. Example: <button type=\"button\" class=\"choice-btn rock\" id=\"rockBtn\" data-choice=\"rock\" aria-keyshortcuts=\"R\">...; apply similarly for Paper (P), Scissors (S), and the Reset button.

Suggested change

<button class="choice-btn rock" id="rockBtn" data-choice="rock">

<span class="emoji">🪨</span>

<span class="label">Rock</span>

</button>

<button class="choice-btn paper" id="paperBtn" data-choice="paper">

<span class="emoji">📄</span>

<span class="label">Paper</span>

</button>

<button class="choice-btn scissors" id="scissorsBtn" data-choice="scissors">

<span class="emoji">✂️</span>

<span class="label">Scissors</span>

</button>

</div>

<button class="reset-btn" id="resetBtn">

<button type="button" class="choice-btn rock" id="rockBtn" data-choice="rock" aria-keyshortcuts="R">

<span class="emoji">🪨</span>

<span class="label">Rock</span>

</button>

<button type="button" class="choice-btn paper" id="paperBtn" data-choice="paper" aria-keyshortcuts="P">

<span class="emoji">📄</span>

<span class="label">Paper</span>

</button>

<button type="button" class="choice-btn scissors" id="scissorsBtn" data-choice="scissors" aria-keyshortcuts="S">

<span class="emoji">✂️</span>

<span class="label">Scissors</span>

</button>

</div>

<button type="button" class="reset-btn" id="resetBtn" aria-keyshortcuts="X">

Copilot · 2025-10-05T23:44:44Z

examples/Rock-Paper-Scissors/styles.css

+.game-container {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255, 0.2);


Safari requires the -webkit-backdrop-filter prefix; add it alongside backdrop-filter for broader support: -webkit-backdrop-filter: blur(20px);.

Copilot · 2025-10-05T23:44:44Z

examples/Rock-Paper-Scissors/script.js

+        this.rockBtn.classList.remove('selected');
+        this.paperBtn.classList.remove('selected');
+        this.scissorsBtn.classList.remove('selected');
+
+        const playerBtn = document.querySelector(`[data-choice="${playerChoice}"]`);
+        if (playerBtn) {
+            playerBtn.classList.add('selected');
+        }


Avoid hard-coding individual button references; remove the selected class generically to simplify maintenance: document.querySelectorAll('.choice-btn.selected').forEach(el => el.classList.remove('selected')); then add the class to the chosen button.

Copilot · 2025-10-05T23:44:44Z

examples/Rock-Paper-Scissors/script.js

+            result: result
+        };
+
+        this.gameHistory.unshift(historyItem);


gameHistory grows unbounded even though only the last 10 entries are displayed. Cap the array to 10 entries after unshifting to avoid unnecessary memory growth: this.gameHistory.unshift(historyItem); if (this.gameHistory.length > 10) this.gameHistory.length = 10;.

Suggested change

this.gameHistory.unshift(historyItem);

this.gameHistory.unshift(historyItem);

if (this.gameHistory.length > 10) this.gameHistory.length = 10;

Copilot · 2025-10-05T23:44:44Z

examples/Rock-Paper-Scissors/styles.css

+/* Animations */
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-5px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(5px);
+    }
+}
+
+.shake {
+    animation: shake 0.5s ease-in-out;
+}


Respect users' reduced motion preferences by disabling or minimizing animations. Add a prefers-reduced-motion query (e.g., @media (prefers-reduced-motion: reduce) { .choice-btn.selected, .shake { animation: none !important; } .score { transition: none !important; } }).

Copilot · 2025-10-05T23:44:45Z

examples/Rock-Paper-Scissors/README.md

+
+**CSS Concepts:**
+- **Responsive Design** - Mobile-first approach with media queries
+- **CSS Grid & Flexbox** - Layout management


The styles use Flexbox but not CSS Grid; update this bullet to avoid confusion (e.g., change to 'Flexbox' only) or add a Grid example to align with the claim.

Suggested change

- **CSS Grid & Flexbox** - Layout management

- **Flexbox** - Layout management

sumn2u · 2025-10-05T23:46:32Z

@suryaprakash0010 Great job. When you have time can you look into above suggestions?

sumn2u

Nice work. Love the design.

…ors-Game

Create an Example Solution for a Rock Paper Scissors Game sumn2u#323

06074fd

sumn2u requested a review from Copilot October 5, 2025 23:41

vercel bot deployed to Preview October 5, 2025 23:43 View deployment

Copilot AI reviewed Oct 5, 2025

View reviewed changes

suryaprakash0010 added 4 commits October 6, 2025 08:44

Update README.md

cf7c938

Update index.html

b0122ab

Update script.js

774ce49

Update styles.css

656ef5f

sumn2u self-requested a review October 6, 2025 11:03

sumn2u approved these changes Oct 6, 2025

View reviewed changes

Merge branch 'main' into Create-Example-Solution-for-Rock-Paper-Sciss…

8451820

…ors-Game

sumn2u merged commit 25526d8 into sumn2u:main Oct 6, 2025
1 of 2 checks passed

sumn2u added the hacktoberfest-accepted label Oct 6, 2025

	<div class="result-display" id="gameResult">
	<div class="result-display" id="gameResult" role="status" aria-live="polite" aria-atomic="true">

	this.gameHistory.unshift(historyItem);
	this.gameHistory.unshift(historyItem);
	if (this.gameHistory.length > 10) this.gameHistory.length = 10;

	- CSS Grid & Flexbox - Layout management
	- Flexbox - Layout management

Conversation

suryaprakash0010 commented Oct 5, 2025

Rock-Paper-Scissors Game Example (#323)

Description

Features

Files Added

Concepts Demonstrated

Uh oh!

vercel bot commented Oct 5, 2025

Uh oh!

vercel bot commented Oct 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 5, 2025

Choose a reason for hiding this comment

Uh oh!

sumn2u commented Oct 5, 2025

Uh oh!

sumn2u left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Oct 5, 2025 •

edited

Loading