Hey, welcome to my Rock Paper Scissors project. I decided to build this to practice some vanilla JS and CSS, but I got a bit carried away and added a bunch of extra features to make it more fun than the standard boring version.
What it does :-
It's rock paper scissors, obviously, but here is what makes this one better:
- Game Modes: You can play normal endless mode, or do a "Best of 3" / "Best of 5" series.
- Two AI Difficulties: "Normal" just picks random moves. "Hard" mode actually tries to predict your next move by looking at the last 5 things you played. So if you keep spamming Rock, it'll figure it out and start throwing Paper.
- History Tracker: There's a live table showing the results of your recent rounds so you can spot patterns.
- Lifetime Stats: I used localStorage so your overall win/loss/draw record stays even if you close the browser window.
- UI & Animations: Added some glassmorphism effects and a confetti burst when you win a series.
You don't need npm or node or anything complicated. Just open "index.html" in your browser and you're good to go.
Files included:
- index.html - the main page layout
- style.css - all the styling (using the Outfit font)
- script.js - handles the game logic, the AI brain, and the local storage stuff
Feel free to mess around with the code, especially the hard mode logic if you think you can make the AI even smarter!
Pressing the Reset button will clear your current match score and history, and it will also revert your game mode to "Endless Play" and AI difficulty to "Normal". It does NOT reset your lifetime stats (use the "Clear Data" button at the bottom for that).