🐍 Ultra Snakes & Ladders

A modern, fully responsive, browser-based implementation of the classic board game. Built entirely with Vanilla JavaScript, this project leverages an object-oriented architecture, dynamic SVG rendering, and the Web Animations API for a polished, seamless experience.

🏔️ Why This Version is "Peak"

Sure, it's Snakes and Ladders, but the architecture and UI/UX details are what make this build stand out:

• Math-Powered Dynamic SVGs: There is no static background image. The game dynamically calculates the exact hypotenuse and angles between grid centers to draw beautifully curved snakes and perfectly sloped ladders on the fly. If the board scales, the SVGs adapt instantly.
• Built-in Theming: Includes a fully functional Settings Modal with a slick Dark Mode toggle, dynamically updating the CSS variables without jarring page reloads.
• Hardware-Accelerated Physics: Uses the native Web Animations API (.animate()) instead of clunky CSS transitions or heavy libraries. The dice tosses and pawn slides are buttery smooth and hardware-accelerated.
• Async Kill-Switches: Ever restart a browser game mid-turn and have the old bots keep playing like ghosts? Not here. A custom gameSessionId acts as a kill-switch, instantly destroying orphaned async tasks and timeouts if a user hits restart.
• "Thinking" Bots: The bot logic is choreographed with async/await delays. Instead of pieces teleporting instantly, bots take a realistic amount of time to "roll" and "move," making the automated gameplay incredibly satisfying to watch.

✨ Core Features

• Object-Oriented Design: Clean separation of logic across Player, Board, Game, and AppUI classes.
• Asynchronous Turn Sequencing: Game loop relies on modern async/await patterns to choreograph dice rolls, piece movements, and turn transitions without messy nested callback hell.
• Flexible Multiplayer: Play with up to several players, configuring the exact mix of human and automated bot opponents.
• Fully Responsive: The CSS Grid board scales perfectly across desktop and mobile screens.

🚀 Quick Start

Since this project uses pure Vanilla HTML/CSS/JS with no build steps or dependencies, running it is incredibly simple.

1. Clone the repository:

   git clone [https://github.com/TheFool-27/Ultra-Snake-and-Ladders.git](https://github.com/TheFool-27/Ultra-Snake-and-Ladders.git)
   

2. **Navigate to the directory:**
```bash
cd Ultra-Snake-and-Ladders

3. Run the game: Simply open index.html in any modern web browser. You can also use an extension like VS Code Live Server for hot reloading during development.

🧠 Architecture Overview

The codebase is split into modular classes to keep the logic clean and maintainable:

• Game: The main controller. Handles the game loop, turn logic, checking win conditions, and managing the active session state.
• Board: Responsible for rendering the 10x10 grid and calculating the start/end coordinates for the SVG overlays.
• Player: Manages individual player state, including current position, player type (Human/Bot), and UI pawn elements.
• AppUI: Manages all DOM interactions, screen transitions (Start -> Setup -> Game -> Winner), and the settings modal.

🎮 How to Play

1. Select the total number of players.
2. Choose how many of those players should be Bots.
3. Take turns rolling the dice.
4. Land on a ladder to climb up; land on a snake to slide down.
5. First player to exactly reach tile 100 wins!

🛠️ Future Roadmap (Ideas for contribution)

• Add asynchronous sound effects (dice rolling, snake hisses).
• Implement a "bounce back" rule if a player rolls higher than the final tile.
• Add an adjustable game speed slider for bot turns.
• Responsive UI refinements for extreme mobile screen sizes.

📄 License

This project is open-source and available under the MIT License.

This project is open-source and available under the MIT License.