🐍 Snakes & Ladders Game 🪜

A modern, interactive web-based version of the classic Snakes and Ladders board game with a beautiful graphical interface.

---

📋 Table of Contents

• Features
• How to Play
• Installation
• File Structure
• Game Rules
• Board Layout
• Technologies Used
• Browser Compatibility
• Project Contents
• Future Enhancements
• License

---

✨ Features

• Beautiful GUI - Modern, responsive design with gradient backgrounds and smooth animations
• Interactive Board - 10x10 grid displaying all 100 positions with visual indicators
• Animated Dice - Rolling animation with random results (1-6)
• Real-time Updates - Instant position updates for both players
• Smart Game Logic - Automatic detection of snakes and ladders
• Player Status Panel - Shows current positions and game status
• Game Log - Tracks all moves and events during the game
• Winner Announcement - Celebratory modal with confetti effect
• Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• Intuitive Controls - Simple one-click gameplay

---

🎮 How to Play

Quick Start

1. Open the Game

   • Double-click index.html to open in your browser
   • Or use a local server (see Installation)

2. Start Playing

   • Player A goes first
   • Click the "ROLL DICE" button to roll
   • Your piece moves forward by the number rolled

3. Navigate the Board

   • Move your token from position 1 to 100
   • Land on a ladder 🪜 → climb up automatically
   • Land on a snake 🐍 → slide down automatically

4. Win the Game

   • First player to reach exactly position 100 wins
   • You'll see a celebration animation and modal
   • Click "PLAY AGAIN" to start a new game

Controls

Button	Action
Roll Dice	Roll the dice and move your piece
New Game	Reset the game and start fresh

---

📥 Installation

Method 1: Direct File Opening (Easiest)

# 1. Save the HTML file as index.html
# 2. Double-click the file
# 3. Game opens in your default browser

Method 2: Using Python (Local Server)

Windows:

python -m http.server 8000
# Open: http://localhost:8000

Mac/Linux:

python3 -m http.server 8000
# Open: http://localhost:8000

Method 3: Using Node.js (http-server)

npm install -g http-server
http-server
# Open: http://localhost:8080

Method 4: VS Code Live Server

1. Install "Live Server" extension in VS Code
2. Right-click index.html
3. Select "Open with Live Server"
4. Browser opens automatically

---

📁 File Structure

snakes-and-ladders/
│
├── index.html              # Main game file (HTML, CSS, JavaScript)
├── original_code.c         # Original C backend code (reference)
├── README.md              # This file
└── .gitignore             # Git ignore file

File Descriptions

File	Purpose	Size
index.html	Complete game (single file, no dependencies)	~15 KB
original_code.c	Original terminal-based C implementation	~3 KB
README.md	Documentation and guide	-

---

🎲 Game Rules

Basic Rules

1. Objective: Reach position 100 first
2. Players: 2 players (A and B)
3. Turn Order: Players take turns rolling the dice
4. Movement: Move forward by the number shown on the dice

Special Rules

Scenario	Rule
Ladder	Land on a ladder position → automatically climb up
Snake	Land on a snake position → automatically slide down
Overshoot	If roll moves you past 100 → stay at current position
Exact 100	Must land exactly on 100 to win

Ladder Positions

Start	End
1	38
4	14
8	10
21	42
28	76
50	67
71	92
80	99

Snake Positions

Start	End
36	6
32	10
62	18
88	24
48	26
95	56
97	78

---

📊 Board Layout

The game board is a 10×10 grid with 100 squares numbered from 1 to 100.

100  99  98  97  96  95  94  93  92  91
 81  82  83  84  85  86  87  88  89  90
 80  79  78  77  76  75  74  73  72  71
 61  62  63  64  65  66  67  68  69  70
 60  59  58  57  56  55  54  53  52  51
 41  42  43  44  45  46  47  48  49  50
 40  39  38  37  36  35  34  33  32  31
 21  22  23  24  25  26  27  28  29  30
 20  19  18  17  16  15  14  13  12  11
  1   2   3   4   5   6   7   8   9  10

Board Legend

• 🟢 Green cells = Ladder positions (climb up)
• 🔴 Red cells = Snake positions (slide down)
• ⚪ White cells = Normal positions
• 🔵 Blue circle = Player A
• 🟣 Purple circle = Player B

---

🛠 Technologies Used

Frontend

• HTML5 - Structure and semantic markup
• CSS3 - Modern styling with:
  • Flexbox and CSS Grid
  • Gradient backgrounds
  • Animations and transitions
  • Media queries for responsiveness
• Vanilla JavaScript - Game logic without frameworks:
  • DOM manipulation
  • Event handling
  • Game state management

Key Features

• No external dependencies
• No server required
• No database needed
• Pure client-side implementation

---

🌐 Browser Compatibility

Browser	Support	Version
Chrome	✅ Full	Latest
Firefox	✅ Full	Latest
Safari	✅ Full	Latest
Edge	✅ Full	Latest
Opera	✅ Full	Latest
IE 11	⚠️ Partial	Not recommended

Recommended

Use the latest version of Chrome, Firefox, Safari, or Edge for the best experience.

---

📦 Project Contents

index.html Includes

1. HTML Structure

   • Game board container
   • Control panel with status display
   • Dice rolling interface
   • Player position tracker
   • Game log display
   • Win modal

2. CSS Styling

   • Responsive layout
   • Beautiful color scheme
   • Smooth animations
   • Mobile optimization

3. JavaScript Logic

   • Dice rolling (random 1-6)
   • Player movement
   • Snake/ladder detection
   • Game state management
   • Event handling
   • Winner detection
   • Confetti animation

original_code.c Includes

• Terminal-based implementation
• Console-based board display
• File I/O for game history
• Reference implementation

---

🚀 Future Enhancements

Potential features to add:

• Multiplayer Online - Play with players worldwide
• Difficulty Levels - Custom snake/ladder positions
• AI Opponent - Play against computer
• Sound Effects - Dice roll sounds, win celebration
• Leaderboard - Track high scores
• Themes - Dark mode, custom color schemes
• Settings Panel - Adjust game rules
• Undo Move - Rewind gameplay
• Analytics - Game statistics and history

---

💡 Tips for Playing

1. Plan Ahead - Try to land on ladders and avoid snakes
2. Risk vs. Reward - High rolls are good but can lead to snakes
3. Watch the Board - Keep track of opponent's position
4. Be Strategic - Sometimes a small roll is safer than a large one

---

🐛 Troubleshooting

Game not loading?

• Clear browser cache (Ctrl+Shift+Delete)
• Try a different browser
• Check internet connection

Dice not rolling?

• Make sure JavaScript is enabled
• Refresh the page
• Try a different browser

Board not displaying?

• Check browser compatibility
• Update your browser
• Disable browser extensions

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

You are free to:

• Use this project for personal or commercial purposes
• Modify and adapt the code
• Distribute and share the code
• Use with proper attribution

---

👤 Author

Akshita Maheshwari Created as an IC Project - Modern Frontend for Classic Game

---

🔗 Links

• Live Demo - Open in Browser
• GitHub Repository - View on GitHub
• Report Issues - GitHub Issues

---

🎯 Getting Started

First time playing?

1. Open index.html
2. Click "Roll Dice"
3. Enjoy the game!

Have fun! 🎉

---