Frontend Machine Coding #1: Build a Mini Snakes and Ladders Game with React

Problem Statement

Build a simplified version of Snakes and Ladders using React. This is a classic board game where players roll dice to move their token across a 10x10 board (numbered 1–100). Landing on ladders moves you up, while landing on snakes moves you down.

Requirements

Must-Have Features:

• A 10x10 board numbered from 1 to 100
• A dice roller that generates random numbers from 1 to 6
• A player token that moves based on dice rolls
• Snakes and ladders that move the player up or down when landed on
• A "Play" button to move the player based on the current dice roll

Nice-to-Have Features:

• Visual indicators (arrows) for snakes and ladders
• Win message when player reaches position 100
• Clean component structure and state management
• Responsive and user-friendly UI

---

Understanding the Problem

What is Snakes and Ladders?

Snakes and Ladders is a classic board game where:

• Players start at position 1
• They roll a dice (1–6) to move forward
• Landing on a ladder moves them up to a higher position
• Landing on a snake moves them down to a lower position
• First player to reach exactly 100 wins

Key Concepts to Implement

1. Board Layout: 10x10 grid with numbers 1–100 arranged in a snake pattern
2. Game State: Track current player position and dice value
3. Movement Logic: Handle dice rolls, position updates, and snake/ladder effects
4. Component Structure: Separate concerns into logical components

---

Solution Architecture

Component Structure