Log inSign up
project logo

vallabhatech

hangman

Public
Remixed
Hangman word-guessing game with difficulty, scoring & stats
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

🎯 Hangman

Classic Hangman word-guessing game built with React + Hono on Val Town.

Play

Visit the live URL and start guessing words!

Features

  • 4 Difficulty levels — Easy, Medium, Hard, Expert (each with different word pools, guess limits, and score multipliers)
  • Scoring system — Base points × difficulty multiplier + time bonus − hint/wrong penalties
  • Hint system — Reveal a letter at the cost of score points
  • Statistics — Tracks wins, losses, streaks, best score, and per-difficulty breakdown
  • Settings — Default difficulty, hint toggle, keyboard input toggle (persisted via localStorage)
  • Physical keyboard — Type letters directly (A–Z) or use the on-screen keyboard
  • Mobile friendly — Responsive layout with touch-friendly buttons
  • Accessible — ARIA labels, keyboard navigation, screen reader support

Architecture

Rendering mermaid diagram...

File Structure

index.ts                     ← Hono server (serves HTML + static assets)
frontend/
  root.tsx                   ← HTML shell
  index.tsx                  ← React entrypoint
  favicon.svg                ← App icon
  game/
    types.ts                 ← TypeScript interfaces (shared contracts)
    constants.ts             ← Difficulty configs, scoring, defaults
    words.ts                 ← Word lists by difficulty (100+ words)
    engine.ts                ← Pure game logic (guess, win/lose, score, hint)
  components/
    App.tsx                  ← Main app (useReducer state machine)
    Home.tsx                 ← Menu / difficulty selection
    GameScreen.tsx           ← Active gameplay (hangman + word + keyboard)
    HangmanDrawing.tsx       ← Progressive SVG hangman figure
    WordDisplay.tsx          ← Letter slots (revealed / hidden)
    Keyboard.tsx             ← A–Z on-screen keyboard
    Victory.tsx              ← Win screen with score breakdown
    GameOver.tsx             ← Loss screen with word reveal
    SettingsScreen.tsx       ← Settings (difficulty, toggles)
    StatsScreen.tsx          ← Statistics dashboard

Game Logic

The engine (frontend/game/engine.ts) is 100% pure functions — no React dependency, fully testable:

  • selectWord() — Picks a random word by difficulty, avoiding recent repeats
  • isValidGuess() — Validates single A-Z letter, not already guessed
  • checkWin() — All unique letters guessed?
  • checkLose() — Wrong guesses ≥ max?
  • calculateScore() — Base × multiplier + time bonus − penalties
  • generateHint() — Reveals one unrevealed letter, returns penalty
  • updateStats() — Aggregates game result into statistics