An exciting HTML5 Canvas browser game inspired by Kerala's legendary Vallam Kali (Snake Boat Race) — race traditional chundan vallams through the backwaters of Alleppey in this fast-paced arcade experience.
| Feature | Description |
|---|---|
| Authentic Boats | Race iconic Chundan Vallam (snake boats) and Iruttukuthi Vallam with unique handling |
| Kerala Backwaters | Beautiful procedurally generated backwater environment with palm trees and houseboats |
| Water Physics | Realistic water simulation with sine-wave animations, drag, and current effects |
| Dynamic Weather | Experience rain and sunshine that affect race conditions |
| Power-Ups | Collect Speed Boosts, Shields, and Rower Stamina pickups on the water |
| Obstacles | Dodge floating logs, rocks, and lily pads along the racecourse |
| Sound Effects | Immersive Web Audio API-driven sounds — water splashing, rhythmic rowing, crowd cheering |
| Leaderboard | Local high score tracking with persistent localStorage |
| Touch Support | Full keyboard and touch controls for desktop and mobile play |
| Malayalam UI | Authentic Malayalam title "വള്ളംകളി" on the start screen |
- Node.js (v18 or higher)
- npm or yarn
git clone https://github.com/razinahmed/vallam-kali-browser-game.git
cd vallam-kali-browser-game
npm install
npm run devOpen http://localhost:5173 in your browser.
npm run build
npm run preview| Control | Keyboard | Touch |
|---|---|---|
| Accelerate | W / Arrow Up |
Tap upper screen |
| Brake / Reverse | S / Arrow Down |
Tap lower screen |
| Steer Left | A / Arrow Left |
Swipe left |
| Steer Right | D / Arrow Right |
Swipe right |
| Pause | Escape / P |
Tap pause button |
- Select your boat on the start screen — Chundan Vallam (fast but less agile) or Iruttukuthi Vallam (agile but slower).
- Race through the Alleppey backwaters, avoiding obstacles and collecting power-ups.
- Reach the finish line in the fastest time to earn a spot on the leaderboard.
- Watch your stamina bar — rowers tire over time, reducing top speed.
| Boat | Length | Rowers | Top Speed | Agility | Special |
|---|---|---|---|---|---|
| Chundan Vallam | 100 ft | 100 | High | Low | Raw power, dominates straights |
| Iruttukuthi Vallam | 60 ft | 40 | Medium | High | Quick turns, nimble in tight spaces |
- Water Drag — Boats experience drag proportional to velocity squared
- Wave Interaction — Sine-wave water surface affects boat pitch and speed
- Current — Backwater currents push boats; use them to your advantage
- Stamina — Rower stamina depletes over time, reducing acceleration
| Power-Up | Effect | Duration |
|---|---|---|
| Speed Boost | +50% top speed | 5 seconds |
| Shield | Absorb one obstacle hit | Until hit |
| Rower Stamina | Restore 30% stamina | Instant |
| Obstacle | Effect |
|---|---|
| Floating Log | Slows boat by 40%, minor damage |
| Rock | Full stop, significant damage |
| Lily Pad | Slight drag, no damage |
- TypeScript — Type-safe game logic
- HTML5 Canvas — Hardware-accelerated 2D rendering
- Web Audio API — Low-latency game audio
- Vite — Lightning-fast dev server and build tool
vallam-kali-browser-game/
├── public/
│ ├── index.html
│ ├── styles.css
│ └── assets/
├── src/
│ ├── main.ts
│ ├── game/
│ ├── entities/
│ ├── environment/
│ ├── ui/
│ ├── audio/
│ ├── utils/
│ └── types/
├── package.json
├── tsconfig.json
└── vite.config.ts
This project is licensed under the MIT License — see the LICENSE file for details.
Razin Ahmed — @razinahmed
Keywords: Vallam Kali, Snake Boat Race, Kerala Game, HTML5 Game, Nehru Trophy, Chundan Vallam, Alleppey, Backwater Race, Browser Game, Canvas Game, TypeScript Game
Inspired by the grand tradition of Vallam Kali — the Snake Boat Race of Kerala, India.