Simon-Says – Color Memory Game
Classic color memory game using vanilla JavaScript. Includes animated sequences, level progression, and auditory feedback for engagement across devices.
Problem Statement
Before learning React or Node.js, I needed to deeply understand browser fundamentals: the DOM, event loop, CSS animations, and JavaScript state machines without any library abstractions. Simon Says was the project to test these fundamentals end-to-end.
Solution
Fully browser-native Simon Says in vanilla HTML/CSS/JS. Random sequence generation growing by one step each level, input validation with immediate feedback, CSS keyframe animations, Web Audio API tones per color, under 10ms input lag, and ~40% longer average session duration vs no-audio baseline.
Code Structure
simon-says/ index.html style.css script.js (~120 lines). Deliberately single file: understand what you are abstracting before you abstract it.
Key Strategies
Pure Vanilla JS
Every DOM operation, event listener, and state transition written by hand to build deep browser fundamentals.
CSS Keyframe Animations
Button flash uses CSS class toggling for smooth 60fps animations with zero JS in the animation loop.
Web Audio API Tones
Distinct sine-wave tones via AudioContext for each color — no audio file dependencies, works instantly across devices.
Technical Challenges
Performance Decisions
Input event processing <10ms latency (no VDOM overhead). CSS-only animations at 60fps on all modern browsers. Zero external dependencies. Works offline after first load.
Trade-offs Made
No framework: right choice for a learning project. For production with complex state, XState would be more maintainable. No persistent high scores: localStorage would be a simple and valuable improvement.
Lessons Learned
The event loop is tangible: timing bugs directly demonstrated JS single-threaded execution. CSS animations belong in CSS: moving flash logic from JS style manipulation to class toggles halved the JS needed.
Future Improvements
localStorage high score persistence, difficulty modes (Easy/Normal/Hard), multiplayer on same device, PWA offline support, ARIA live regions for screen reader accessibility.
Security Considerations
Static HTML/CSS/JS — no server, no user data, no attack surface. Netlify serves over HTTPS with auto-renewed certificate.
Explore Simon-Says – Color Memory Game
Check out the source code or see it live.