Serpent & Staircase

A polished, modern reimagining of the classic Snake and Ladders board game. Built with React, TypeScript, and Framer Motion, this version features immersive visuals, smooth animations, and a challenging AI opponent.

🌟 Features

• Modern Visuals: A dark-themed, sleek UI with neon accents and high-quality SVG graphics.
• Realistic Board Elements: Custom-designed wooden ladders and detailed snakes with scale patterns and slithering tongues.
• Immersive Animations:
  • Smooth Movement: Tokens glide step-by-step between cells.
  • Climbing Effect: Distinct upward "jump" animation when landing on a ladder.
  • Slithering Effect: Side-to-side wiggle and rotation when sliding down a snake.
  • Turn Indicator: Pulsating glow and scale animation for the active player.
• Customization:
  • Player Names: Input your own name and customize the AI's name.
  • Token Colors: Choose from a vibrant palette of neon colors.
  • Token Icons: Select unique icons (Star, Crown, Diamond, etc.) to represent you on the board.
• Smart AI: A computer opponent that plays strategically and responds in real-time.
• Procedural Audio: Dynamic sound effects generated via the Web Audio API for dice rolls, movement, and special board events.
• Responsive Design: Fully playable on both desktop and mobile devices.

🎮 How to Play

1. Start Screen: Choose "Start Game" to challenge the Computer.
2. Customization: Enter your name, pick your favorite color, and select a token icon.
3. Gameplay:
   • Click the Dice to roll (1-6).
   • Your token will move automatically.
   • Ladders: Land on the bottom of a ladder to climb to a higher square.
   • Snakes: Land on a snake's head to slide down to a lower square.
   • Winning: The first player to reach square 100 exactly wins the game!
4. Restart: Use the refresh icon at the top right to start a new game at any time.

🛠️ Tech Stack

• Frontend: React 19, TypeScript
• Styling: Tailwind CSS 4
• Animations: Framer Motion (motion/react)
• Icons: Lucide React
• Audio: Web Audio API (Procedural Generation)
• Build Tool: Vite

🚀 Getting Started

1. Clone the repository.
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to http://localhost:3000.

📜 License

This project is licensed under the Apache-2.0 License.