Christophe Grädel

A fully functional, two-player Memory game built entirely from scratch. This was one of my early deep dives into JavaScript, focusing on DOM manipulation, game loops, and most importantly, Object-Oriented Programming (OOP) without the use of external libraries or frameworks.

Instead of writing spaghetti code, I structured the game using strict ES6 Classes to ensure a clean separation of concerns. The Player class manages individual scores and currently held cards, while the Board class handles the 4x4 grid generation, shuffling algorithms, and match verification. To keep the interface logic isolated, a dedicated UI class takes care of all DOM updates and event listeners. Finally, the GameControl class acts as the central brain, seamlessly connecting the players, the board, and the user interface.

• Encapsulation: Heavy use of JavaScript private class fields (e.g., #score, #board) to prevent unauthorized data manipulation from outside the class.
• Dynamic Rendering: The game board is not hardcoded in HTML but dynamically generated via JavaScript document.createElement.
• Asynchronous UI: Implemented setTimeout and setInterval for the turn countdowns and covering animations.
• Responsive Layout: Styled with CSS Flexbox to ensure the 4x4 grid always stays perfectly aligned.

Looking back at this project today, I can clearly see my growth as a developer. While I would perhaps approach state management differently now (especially after learning React), building this in Vanilla JS gave me a rock-solid foundation in how the DOM works and how to structure complex logic across multiple classes.