Vibe Knights is a fast-paced cyberpunk runner game where you control a knight navigating through a neon-lit dystopian world. Jump over bars, duck under flying dragons, and rack up your high score in this addictive endless runner!
Built live as a demonstration of AI-assisted development with Cline CLI.
- 🎨 Stunning Cyberpunk Aesthetic - Neon colors, grid floors, and atmospheric backgrounds
- 🎮 Simple but Challenging Gameplay - Easy to learn, hard to master
- 🐉 Multiple Obstacles - Jump over bars and duck under dragons
- 📈 Progressive Difficulty - Speed increases as you progress
- 🏆 High Score System - Compete against yourself with persistent high scores
- 🔊 Sound Effects - Immersive audio feedback (with mute option)
- 📱 Responsive Design - Works on desktop browsers
- 💾 LocalStorage Persistence - Your high score is saved locally
| Key | Action |
|---|---|
SPACE / ↑ |
Jump over bars |
↓ |
Duck under dragons |
SPACE |
Start game / Restart after game over |
- +10 points for passing a bar
- +15 points for passing a dragon
- Bonus sound effect every 100 points!
- Node.js 18.x or higher
- npm, yarn, or pnpm
-
Clone the repository
git clone https://github.com/frontiertower/VibeCodingKnights.git cd VibeCodingKnights -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000
- Framework: Next.js 14 - React framework with App Router
- Language: TypeScript - Type-safe JavaScript
- Styling: Tailwind CSS - Utility-first CSS framework
- Canvas API: HTML5 Canvas for game rendering
- Audio: Web Audio API for sound effects
VibeKnightsGame/
├── app/
│ ├── globals.css # Global styles and Tailwind config
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page
├── components/
│ └── Game.tsx # Main game component
├── lib/
│ ├── constants.ts # Game constants and configuration
│ ├── game-objects.ts # Knight, Bar, Dragon classes
│ └── sounds.ts # Sound effects management
├── demo/
│ └── VibeCodingKnights.mp4 # Game demo video
└── README.md
Want to modify the game? Here are some key files:
lib/constants.ts- Adjust game speed, obstacle gaps, colors, and dimensionslib/game-objects.ts- Modify Knight, Bar, and Dragon behaviorcomponents/Game.tsx- Change game mechanics and UIapp/globals.css- Customize cyberpunk theme colors
npm run build
npm startThis will create an optimized production build and start the production server.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
This project is open source and available under the MIT License.
Built with ❤️ using Next.js and Canvas API
🤖 Development: This game was created live as a demonstration using Cline CLI - an AI coding assistant that helps developers build faster.
Enjoy the game? Give it a ⭐️!