Log inSign up
project logo

potluck

color-matching-game

Public
Remixed
Starter template with client-side React & Hono server
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

🎨 Color Matching Game

A fun, child-friendly drag-and-drop color matching game built with React + Hono on Val Town.

Features

  • 🖱️ Draggable color blobs — pick up a color chip and drop it onto its matching target
  • 🔊 Browser text-to-speech — colors are spoken aloud when you drag them and on correct/wrong matches
  • 🚀 Start button — intro screen before gameplay begins
  • 🎉 Confetti celebration — all 80 confetti pieces fall when every color is matched
  • 🏆 Win banner — animated congratulations screen with "Play Again" button
  • 🔀 Randomised each round — 6 of 8 colors are chosen and shuffled every game
  • 📱 Responsive — works on tablets and phones too

How to play

  1. Press Start!
  2. In the top panel you'll see mystery drop zones (each has a coloured underline hint)
  3. In the bottom tray you'll see colourful blobs — drag one to the matching zone
  4. The game speaks each color name and gives spoken feedback ("Great job!" or "Try again!")
  5. Match all 6 to win! 🌈

Architecture

Rendering mermaid diagram...

File structure

index.ts                         ← Hono backend (serves frontend)
frontend/
  index.html                     ← HTML shell (fonts, animations, Twind)
  index.tsx                      ← React entrypoint
  favicon.svg                    ← Colorful icon
  components/
    App.tsx                      ← Entire game: chips, drop zones, win screen, TTS