A modern, high-fidelity web implementation of the classic Snake & Ladder board game. Experience professional-grade animations, dynamic board layouts, and a premium paper-style aesthetic.
- 🎮 Local Multiplayer: Supports 1 to 6 players in a pass-and-play format.
- 🎲 Classic Dice Rules:
- Roll a 6 to unlock your token and start moving.
- Rolling a 6 grants an additional turn.
- 🏃 Step-by-Step Movement: Tokens advance cell-by-cell for a realistic gameplay feel.
- 🔊 Immersive Audio: Custom sound effects for climbing ladders and sliding down snakes.
- 🎆 Winner Celebration: Full-screen firework effects and color-coded winner announcements.
- 🖥️ Responsive Design: Scalable board that fits any screen size with a dedicated dice interaction zone.
- ⌨️ Keyboard Shortcuts:
Space: Roll the diceN: Start a new gameS: Start game from home screenF: Toggle fullscreen
- Frontend: HTML5 Canvas, Vanilla JavaScript (ES Modules), CSS3.
- Audio: Web Audio API for low-latency sound effects.
- Server/Runtime: Bun for lightweight static serving and fast development.
You will need Bun installed on your machine.
-
Clone the repository:
git clone <repository-url> cd "Snake & Ladder"
-
Start the server:
bun server.js
-
Open the game: Navigate to
http://localhost:5173in your web browser.
- The Goal: Be the first player to reach square 100.
- Start: Every player starts off-board. You must roll a 6 to move your token to square 1.
- Ladders: Landing on the base of a ladder automatically boosts you to the top.
- Snakes: Landing on a snake's head will cause you to slide down to its tail.
- Exact Landing: You must roll the exact number needed to land on square 100 to win.
index.html: Main application entry point.game.js: Core rendering engine and animation logic.game-core.js: Game rules, state management, and board configuration.styles.css: Visual styling and layout.server.js: Static file server using Bun.public/: Assets including the board image and SVGs.
Enjoy the game and watch out for the snakes! 🐍✨