Skip to content

halfguru/typing-maniac-clone

Repository files navigation

⌨️ Typing Maniac

A web-based recreation of the classic Facebook game

Type fast. Score high.

TypeScript Phaser License

Lint Test Build Deploy

Typing Maniac Screenshot

🎮 How to Play

Words fall from the top of the screen. Type them letter-by-letter to destroy them before they reach the danger zone. Wrong submissions speed up the target word, so type carefully!

Power-Ups

Collect power words to activate special abilities:

Power Effect
🔥 Fire Burns all words on screen (+50 pts each)
❄️ Ice Freezes all words for 5 seconds
⏱️ Slow Slows falling speed for 5 seconds
💨 Wind Resets the danger (LIMIT) bar to 0%

Themes

The game features multiple visual themes:

  • Alchemist (default): Mystical wizard's study with animated wizard character, magical effects, and alchemical atmosphere
  • Cyberpunk: Neon cyberpunk aesthetic with grid floor and city skyline

Features

  • 🏆 Global Leaderboard - Compete with players worldwide (optional Supabase)
  • 🔐 OAuth Authentication - Sign in with Google, Facebook, or play as guest
  • 📊 Error Tracking - Production monitoring with Sentry (optional)
  • 🔊 Dynamic Audio - Typing sounds, power-up effects, ambient music
  • 🎨 Multiple Themes - Switch between visual styles

🚀 Quick Start

npm install
npm run dev

Open http://localhost:3000 in your browser.


⚙️ Configuration

Create a .env file in the project root (optional):

# Optional: Supabase (for global leaderboard)
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Optional: Sentry (for error tracking)
VITE_SENTRY_DSN=your_sentry_dsn
VITE_APP_VERSION=1.0.0

# Optional: PostHog (for analytics)
VITE_POSTHOG_KEY=your_posthog_key
VITE_POSTHOG_HOST=https://us.i.posthog.com

Without configuration:

  • Game works fully with local leaderboard only
  • Errors are logged to console instead of Sentry
  • Analytics events are logged to console instead of PostHog
  • No authentication required

🛠️ Tech Stack

Component Technology
Language TypeScript
Game Engine Phaser 3
Bundler Vite
Auth & Database Supabase (optional)
Error Tracking Sentry (optional)
Analytics PostHog (optional)

🏗️ Project Structure

.
├── src/
│   ├── main.ts              # Entry point, scene registration
│   ├── scenes/              # Phaser scenes (Auth, Menu, Game, UI, Countdown, Settings)
│   ├── config/              # Game constants, colors
│   ├── data/                # Word lists (JSON)
│   ├── services/            # Game services (Audio, Auth, Storage, Theme, Observability)
│   ├── themes/              # Theme definitions and styling
│   ├── ui/                  # UI components (buttons, progress bars)
│   ├── managers/            # Effect managers
│   └── types/               # TypeScript types
├── docs/                    # Documentation
├── index.html
├── package.json
└── vite.config.ts

📝 Changelog

See CHANGELOG.md for version history and updates.


📜 License

CC BY-NC 4.0 - Free for personal and educational use. Commercial use prohibited.


Inspired by the original Typing Maniac by MetroGames

About

A modern TypeScript recreation of the classic Typing Maniac browser game built with Phaser 3

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages