Create a Rock–Paper–Scissors game with an enhanced UI/UX experience.
This is not a simple button-click game: the challenge focuses on animations, game-flow design, responsive layouts, and interaction quality.
Players should be able to play vs. the computer, track their score, view animated results, and navigate a polished, game-like interface.
This is a UI/UX-heavy hard task, requiring thoughtful transitions, component design, and multi-state UI handling.
📋 Requirements
Functional Requirements
-Rock, Paper, Scissors choices with interactive states.
-Computer randomly selects a move.
-A “Versus” animation sequence (e.g., reveal delay).
Result screen with:
-Winner announcement
-Animated winning move
-“Play again” button
-Scoreboard tracking wins/losses/draws.
UI/UX Requirements
-Smooth animations:
-Choice selection
-Results reveal
-Score increment animation
-Hover, press, and focus states for all buttons.
Non-Functional Requirements
-Clean, modern, game-inspired interface.
-Semantic HTML and accessible interactions.
-Transition timings under 500ms for responsiveness.
🧩 Tasks / Checklist
🎨 Layout & Base UI
-Create home screen (title, instructions).
-Build choice selection screen (Rock/Paper/Scissors UI).
-Style interactive buttons with hover & focus states.
-Set up responsive layout for all screens.
🎞 Animations
-Add choice selection animation (e.g., glowing, scaling).
-Add “versus” animation sequence.
-Add result reveal animation (e.g., fade in/slide).
-Add score update animation.
🧭 Game Flow
-Implement computer’s random choice.
-Create results screen showing both moves.
-Add logic to determine win/loss/draw.
-Add “Play again” button to reset state.
📊 Scoreboard
-Build scoreboard UI.
-Display wins, losses, and draws.
🧪 Testing
-Confirm animations play smoothly.
-Verify scoreboard updates correctly.
🟩 Acceptance Criteria
✔ Functional
-Player can choose between rock, paper, and scissors.
-Computer choice is generated on each round.
-Result is displayed with correct game logic.
-Scoreboard updates accurately.
-“Play again” resets to the choice screen.
✔ UI/UX
-Animations run smoothly without lag.
-Results reveal is visually satisfying (slide, scale, fade, etc.).
-Layout looks clean on mobile and desktop.
-Hover/focus/press states are consistent.
✔ Advanced UX
-Versus animation or reveal delay implemented.
-Score increments with animation.
-Optional: History panel or theme toggle improves depth.
-Optional: Persistent score maintained.
✔ Accessibility
-Focus visible on all clickable elements.
-Color contrast appropriate.
Mockup:
Create a Rock–Paper–Scissors game with an enhanced UI/UX experience.
This is not a simple button-click game: the challenge focuses on animations, game-flow design, responsive layouts, and interaction quality.
Players should be able to play vs. the computer, track their score, view animated results, and navigate a polished, game-like interface.
This is a UI/UX-heavy hard task, requiring thoughtful transitions, component design, and multi-state UI handling.
📋 Requirements
Functional Requirements
-Rock, Paper, Scissors choices with interactive states.
-Computer randomly selects a move.
-A “Versus” animation sequence (e.g., reveal delay).
Result screen with:
-Winner announcement
-Animated winning move
-“Play again” button
-Scoreboard tracking wins/losses/draws.
UI/UX Requirements
-Smooth animations:
-Choice selection
-Results reveal
-Score increment animation
-Hover, press, and focus states for all buttons.
Non-Functional Requirements
-Clean, modern, game-inspired interface.
-Semantic HTML and accessible interactions.
-Transition timings under 500ms for responsiveness.
🧩 Tasks / Checklist
🎨 Layout & Base UI
-Create home screen (title, instructions).
-Build choice selection screen (Rock/Paper/Scissors UI).
-Style interactive buttons with hover & focus states.
-Set up responsive layout for all screens.
🎞 Animations
-Add choice selection animation (e.g., glowing, scaling).
-Add “versus” animation sequence.
-Add result reveal animation (e.g., fade in/slide).
-Add score update animation.
🧭 Game Flow
-Implement computer’s random choice.
-Create results screen showing both moves.
-Add logic to determine win/loss/draw.
-Add “Play again” button to reset state.
📊 Scoreboard
-Build scoreboard UI.
-Display wins, losses, and draws.
🧪 Testing
-Confirm animations play smoothly.
-Verify scoreboard updates correctly.
🟩 Acceptance Criteria
✔ Functional
-Player can choose between rock, paper, and scissors.
-Computer choice is generated on each round.
-Result is displayed with correct game logic.
-Scoreboard updates accurately.
-“Play again” resets to the choice screen.
✔ UI/UX
-Animations run smoothly without lag.
-Results reveal is visually satisfying (slide, scale, fade, etc.).
-Layout looks clean on mobile and desktop.
-Hover/focus/press states are consistent.
✔ Advanced UX
-Versus animation or reveal delay implemented.
-Score increments with animation.
-Optional: History panel or theme toggle improves depth.
-Optional: Persistent score maintained.
✔ Accessibility
-Focus visible on all clickable elements.
-Color contrast appropriate.
Mockup: