A fun platformer game with real-time keyboard input visualization!
MCP Leap is an interactive platformer game built with React and TypeScript that showcases real-time keyboard input visualization. Control the character as it jumps through procedurally generated platforms while your keyboard inputs are beautifully displayed on screen.
- 🎯 Real-time Keyboard Visualization - See your keystrokes come to life
- 🎮 Smooth Platformer Gameplay - Responsive controls with physics-based movement
- 🎨 Beautiful Gradients - Vibrant gradient backgrounds for visual appeal
- 📱 Mobile Responsive - Optimized for both desktop and mobile devices
- � ️ Procedural Platform Generation - Infinite gameplay with dynamically generated platforms
- ⚡ High Performance - Built with modern React hooks and optimized rendering
- ← Left Arrow - Move left
- → Right Arrow - Move right
- Enter/Space - Restart game (when game over)
- Use the arrow keys to move your character left and right
- Jump on platforms to climb higher and increase your score
- Avoid falling off the bottom of the screen
- Try to achieve the highest score possible!
- Your score increases as you climb higher
- Each platform level gives you points
- Challenge yourself to beat your high score!
- Node.js (v16 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/yourusername/mcp-leap.git cd mcp-leap -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to start playing!
| Script | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build the project for production |
npm run preview |
Preview the production build locally |
npm run lint |
Run ESLint to check code quality |
src/
├── components/ # React components
│ ├── GameCanvas.tsx # Main game rendering component
│ ├── GameUI.tsx # Game interface and overlays
│ └── LoadingScreen.tsx # Loading screen component
├── hooks/ # Custom React hooks
│ ├── useGameEngine.ts # Core game logic hook
│ └── useImageLoader.ts # Image loading hook
├── utils/ # Game utilities
│ ├── input.ts # Keyboard input handling
│ ├── physics.ts # Physics engine
│ ├── renderer.ts # Canvas rendering
│ └── platformGenerator.ts # Platform generation
├── types/ # TypeScript type definitions
│ └── game.ts # Game-related types
├── constants/ # Game configuration
│ └── game.ts # Game constants and settings
└── assets/ # Static assets
└── load.gif # Loading animation
- Custom Hooks - Modular game logic with
useGameEngineanduseImageLoader - TypeScript - Full type safety throughout the application
- Performance Optimized - Efficient rendering with canvas-to-image conversion
- Physics System - Gravity, collision detection, and smooth movement
- Input Handling - Real-time keyboard input processing
- Camera System - Dynamic camera following the player
- Platform Generation - Procedural platform creation for infinite gameplay
- Responsive Design - Mobile-first approach with adaptive canvas sizing
- Smooth Animations - 60fps gameplay with requestAnimationFrame
The game is highly configurable through src/constants/game.ts:
export const GAME_CONFIG = {
// Physics
GRAVITY: 0.5,
JUMP_FORCE: -15,
MOVE_SPEED: 5,
FRICTION: 0.8,
// Visual - Brand Colors
BRAND_COLORS: {
YELLOW: "#FFD800",
ORANGE_LIGHT: "#FFAF00",
ORANGE: "#FF8205",
ORANGE_DARK: "#FA500F",
RED: "#E10500",
},
// Platform settings
PLATFORM_WIDTH: 120,
PLATFORM_HEIGHT: 20,
PLATFORM_SPACING: 120,
// Player settings
PLAYER_WIDTH: 90,
PLAYER_HEIGHT: 90,
};- React Team - For the incredible React framework
- Vite - For the lightning-fast build tool
- TypeScript - For making JavaScript development a joy