Skip to main content
Prompts HTML5 Memory Matching Card Game Builder

developer coding user risk: low

HTML5 Memory Matching Card Game Builder

Develop a memory matching card game using HTML5, CSS3, and JavaScript with visually appealing card designs, flip animations, difficulty levels, timer, move counter, sound effects,…

PROMPT 

Develop a memory matching card game using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects for card flips and matches. Implement leaderboard with score persistence. Add theme selection with different card designs. Include multiplayer mode for competitive play. Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation. Implement progressive difficulty increase during gameplay.

EXPECTED OUTPUT

Format
html

SUCCESS CRITERIA

  • Develop a memory matching card game using HTML5, CSS3, and JavaScript.
  • Create visually appealing card designs with flip animations.
  • Implement difficulty levels with varying grid sizes and card counts.
  • Add timer and move counter for scoring.
  • Include sound effects for card flips and matches.
  • Implement leaderboard with score persistence.
  • Add theme selection with different card designs.
  • Include multiplayer mode for competitive play.
  • Create responsive layout that adapts to screen size.
  • Add accessibility features for keyboard navigation.
  • Implement progressive difficulty increase during gameplay.

FAILURE MODES

  • Feature list is extensive without prioritization, risking incomplete implementations.
  • Lack of implementation details for complex features like multiplayer and persistence may lead to oversimplifications or errors.
  • No specifications for assets like sound files or themes may result in placeholders or omissions.

CAVEATS

Missing context
  • Desired output format (e.g., single HTML file, separate files, or deployable demo).
  • Allowed external libraries or strictly vanilla JS/CSS/HTML.
  • Specific themes or card designs for theme selection.
  • Scoring formula details (e.g., how moves and time combine into score).
  • Target browsers or devices for responsiveness and accessibility.
Ambiguities
  • Does not specify exact grid sizes or card counts for difficulty levels.
  • Unclear if multiplayer mode is local (turn-based) or online (real-time).
  • No details on how progressive difficulty increases during gameplay.
  • Vague on leaderboard persistence method (e.g., localStorage vs. server).
  • Unspecified sources or implementation for sound effects.

QUALITY

OVERALL
0.60
CLARITY
0.85
SPECIFICITY
0.65
REUSABILITY
0.15
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add explicit definitions for difficulty levels, e.g., 'Easy: 4x4 grid (8 pairs), Medium: 6x6 (18 pairs), Hard: 8x8 (32 pairs)'.
  • Clarify multiplayer as 'local two-player turn-based mode alternating turns'.
  • Specify output format: 'Provide a single self-contained HTML file with embedded CSS and JS'.
  • List example themes: 'e.g., animals, fruits, space objects with corresponding images or SVGs'.
  • Define persistence: 'Use localStorage for leaderboard and game progress'.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER