I structured the HTML file to establish the foundation of the webpage.
Within it, I included a <canvas> element where I drew the game's graphics.
Additionally, I incorporated headings to display the game's title and controls, along with buttons for restarting or quitting the game, and an overlay for presenting the game over screen.
CSS played a vital role in enhancing the visual appeal of the elements on the page.
I configured the layout to center the game canvas both vertically and horizontally for better presentation.
Styling adjustments were made to buttons and text for consistency and visual appeal.
To improve the overall presentation, I utilized background colors, borders, and animations.
Javascript was responsible for controlling the game's behavior and logic.
I set up event listeners to respond to button clicks for starting, retrying, and quitting the game.
Functions were implemented to initialize the game, manage card clicks, validate matches, and determine game over conditions.
A timer function was incorporated to track the time taken to complete the game, enhancing the gameplay experience.
Additionally, a shuffle function was used to randomize the positions of symbols on the game board, adding variability to each playthrough.
In the Memory Game, players are tasked with matching pairs of cards with identical symbols.
By clicking on cards, players reveal their symbols, aiming to find matching pairs.
The game concludes when all pairs of cards have been successfully matched, and a modal displays the time taken to complete the game.
From the modal, players have the option to retry or quit the game, providing flexibility and encouraging further engagement.
Game Over!