World's Hardest Game (TypeScript + HTML5 Canvas)

World's Hardest Game is a browser-based remake of the classic skill game, built with TypeScript and HTML5 Canvas. Guide the yellow player square through increasingly difficult levels, dodging moving enemies and reaching the green goal zone. This project is ideal for:

• Players: Looking for a challenging, fast-paced puzzle game in the browser.
• Developers: Interested in learning about TypeScript game development, canvas rendering, and modular code structure.
• Educators: Demonstrating game loops, collision detection, and interactive UI in a modern web stack.

---

Features

• Modular, well-documented TypeScript codebase
• Responsive HTML5 Canvas rendering
• Multiple challenging levels (easy to add your own)
• Main menu, how-to-play, and quit screens
• Keyboard and mouse controls
• Clean, modern UI overlays
• Play zone with visible barriers

How to Play

1. Clone or download this repository.
2. Install dependencies (see below).
3. Run the game in your browser (see below).
4. Use the keyboard or mouse to navigate menus and play.

---

Getting Started (for Developers)

Prerequisites

• Node.js (v16+ recommended)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/ConnorHardin/WorldsHardestGame.git
   cd WorldsHardestGame

2. Install dependencies:

   npm install

Running the Game (Development)

Start the Vite dev server:

npm run dev

Then open your browser and go to the local server URL (usually http://localhost:5173).

Building for Production

npm run build

The output will be in the dist/ folder. You can deploy this folder to any static web server.

Controls

• Move: Arrow keys or WASD
• Reset Position: R
• Menu Navigation: Arrow keys/WASD or mouse
• Select/Confirm: Enter, Space, or mouse click
• Back: Escape

Project Structure

WorldsHardestGame/
├── src/
│   ├── main.ts         # Entry point
│   ├── Game.ts         # Game loop, UI, state
│   ├── Player.ts       # Player logic
│   ├── Enemy.ts        # Enemy logic
│   ├── Level.ts        # Level data and rendering
│   ├── level2.ts       # Level 2 config
│   ├── level3.ts       # Level 3 config
│   └── ...
├── index.html          # Main HTML file
├── vite.config.ts      # Vite config
├── tsconfig.json       # TypeScript config
└── README.md           # This file

Customizing & Contributing

• Add your own levels: Create new files in src/ (e.g., level4.ts) following the structure in Level.ts and import them in main.ts.
• Improve gameplay or UI: Fork the repo, make your changes, and submit a pull request.
• Report issues: Use the GitHub Issues page for bugs or feature requests.

Credits

• Game design and code: ConnorHardin
• Inspired by the original World's Hardest Game

---

Enjoy playing or hacking on the World's Hardest Game!