- Introduce ReadMe.md describing the Ultimatch Memory Match project. - Add background image and sound files (background.mp3, flip.mp3, match.mp3). - Update index.html to include a full‑screen background div and rename the game title. - Refactor board dimensions to a 7 × 4 grid (BOARD_WIDTH = 7, BOARD_HEIGHT = 4) and expand SVG icon set to 14 cards. - Pre‑load and play background, flip, and match audio cues; start background music on first move and stop on win. - Adjust win‑condition logic to use new board size. - Enhance styling: fixed background image, dark translucent header overlay, glowing title and stats, and refined card layout. |
||
|---|---|---|
| ReadMe.md | ||
| background.mp3 | ||
| background.png | ||
| flip.mp3 | ||
| index.html | ||
| match.mp3 | ||
| script.js | ||
| style.css | ||
ReadMe.md
Ultimatch Memory Match – Project Overview
Purpose
This project implements a simple memory‑match (concentration) game that uses SVG graphics as cards.
The HTML page creates the game layout, the CSS styles the visual appearance (including a dark translucent header overlay and glowing text), and the JavaScript provides the core game logic—starting with a Fisher‑Yates shuffle to randomize the cards.
File Summary
| File | Role |
|---|---|
index.html |
Sets up the page structure: a background image, a header with the game title and live stats (moves & timer), and a <section id="board"> where the SVG cards will be rendered. It also loads style.css and script.js. |
style.css |
Provides a clean reset, centers the layout, adds a full‑screen background image, and styles the header with a dark translucent overlay, large glowing title, and highlighted stats. |
script.js |
Contains the JavaScript foundation for the game. The only function shown is shuffle(array), which implements an in‑place Fisher‑Yates shuffle to randomize the order of the card data before they are placed on the board. Additional game logic (card creation, click handling, move counting, timer, win detection, etc.) would be built on top of this utility. |
How It Works
- Page Load –
index.htmlloads the stylesheet and script. - Styling –
style.cssensures the game looks polished, with a full‑screen background and a readable, glowing header. - Game Setup – In
script.js, the card data array is shuffled usingshuffle(). The shuffled array is then used to generate SVG card elements inside the#boardsection (implementation not shown). - Gameplay – Players click cards to reveal SVGs, trying to find matching pairs. Moves and elapsed time are displayed in the header’s stats area.
Extending the Project
- Add SVG assets and a function to render them as clickable cards.
- Implement click handling, match checking, move counting, and a timer.
- Provide a reset/restart button and optional difficulty levels.
This README snippet gives a concise overview of the current codebase and its intended use for a memory‑match game.