Brokémon, an instant hood classic. A standalone Pokemon-style game built with React, TypeScript, and Vite.
- Overworld exploration with tile-based movement
- Turn-based battle system
- Intro sequence with Professor O-G
- Pixel art graphics
- Full keyboard controls
- Node.js >= 18.0.0
- npm >= 10.0.0
npm installnpm startThis will start the Vite dev server, typically at http://localhost:5173
npm run buildThe built files will be in the dist directory.
npm run previewThis project is configured for serverless deployment on Vercel:
- Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
- Import the project in Vercel
- Vercel will automatically detect the Vite framework and use the settings from
vercel.json - Deploy!
The vercel.json configuration includes:
- Build command:
npm run build - Output directory:
dist - Framework:
vite - SPA routing support (all routes redirect to
index.html)
- Arrow Keys or WASD: Move player
- M: Toggle minimap
- Space or Enter: Interact with NPCs
- Mouse: Click buttons in battle
brokemon/
├── src/
│ ├── components/
│ │ └── Brokemon/
│ │ ├── assets/ # Game sprites and images
│ │ ├── data/ # Game data (pokemon, maps)
│ │ ├── BattleScene.tsx # Battle system
│ │ ├── Overworld.tsx # Overworld exploration
│ │ ├── IntroSequence.tsx # Intro dialog
│ │ └── index.tsx # Main game component
│ ├── App.tsx # Root component
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── vercel.json # Vercel configuration
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- Tailwind CSS - Styling
- Canvas API - Game rendering
Private project - All rights reserved