Go to file
Brian Fertig 5c184a6ab1 Add README, assets, UI enhancements, and audio support
- 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.
2026-02-14 08:45:51 -07:00
ReadMe.md Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
background.mp3 Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
background.png Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
flip.mp3 Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
index.html Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
match.mp3 Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
script.js Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00
style.css Add README, assets, UI enhancements, and audio support 2026-02-14 08:45:51 -07:00

ReadMe.md

Ultimatch Memory Match Project Overview

Purpose

This project implements a simple memorymatch (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 FisherYates 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 fullscreen 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 inplace FisherYates 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

  1. Page Load index.html loads the stylesheet and script.
  2. Styling style.css ensures the game looks polished, with a fullscreen background and a readable, glowing header.
  3. Game Setup In script.js, the card data array is shuffled using shuffle(). The shuffled array is then used to generate SVG card elements inside the #board section (implementation not shown).
  4. Gameplay Players click cards to reveal SVGs, trying to find matching pairs. Moves and elapsed time are displayed in the headers 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 memorymatch game.