A fully functional, web-based checkers game built with Next.js, TypeScript, and Tailwind CSS. Play against a friend locally or challenge an AI opponent with three distinct difficulty levels.

• ✅ Standard American Checkers Rules: Full implementation including mandatory captures
• ✅ King Promotion: Pieces become kings when reaching the opposite end
• ✅ Multi-Jump Captures: Support for consecutive jumps in a single turn
• ✅ Move Validation: Real-time validation ensuring legal moves only
• ✅ Win Detection: Automatic detection when a player runs out of pieces or valid moves

• 🎮 Player vs Player: Local multiplayer on the same device
• 🤖 Player vs AI: Three difficulty levels
  • Easy: Random move selection
  • Medium: Prioritizes captures and multi-jumps
  • Hard: Minimax algorithm with alpha-beta pruning (looks 4 moves ahead)

• 🎨 Beautiful Design: Clean, modern interface with smooth animations
• 🖱️ Drag & Drop: Native HTML5 drag-and-drop for intuitive piece movement
• 👆 Click to Move: Alternative click-based controls
• 👀 Visual Hints: Toggle to show/hide valid moves
• ↩️ Undo Function: Revert moves (undoes both player and AI moves in AI mode)
• 📱 Responsive: Works on desktop, tablet, and mobile devices

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: React hooks (useReducer, useState, useCallback)
• Drag & Drop: Native HTML5 Drag and Drop API

• Node.js 18.0 or later
• npm, yarn, or pnpm

1. Clone the repository:

git clone <repository-url>
cd checkers

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

3. Run the development server:

4. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

npm run build
npm start

1. Board Setup: 8x8 board with 12 pieces per player on dark squares
2. Movement:
   • Regular pieces (men) move diagonally forward one square
   • Kings can move diagonally forward or backward one square
3. Capturing:
   • Jump over opponent's piece to capture it
   • Multiple jumps are allowed in one turn
   • Mandatory captures: If you can capture, you must
4. Winning: Eliminate all opponent pieces or block them so they have no legal moves

• Drag & Drop: Click and drag your piece to a valid square
• Click Mode: Click a piece to select it, then click the destination square
• Valid Moves: Enable "Show Valid Moves" to highlight available moves
• Undo: Click "Undo Move" to revert the last move
• New Game: Start a fresh game with Player vs Player or Player vs AI

checkers/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main game page with state management
│   └── globals.css         # Global styles
├── components/
│   ├── GameBoard.tsx       # 8x8 board grid component
│   ├── Square.tsx          # Individual square component
│   ├── Piece.tsx           # Draggable piece component
│   ├── GameControls.tsx    # Game controls panel
│   └── NotificationPanel.tsx # Game status display
├── types/
│   └── game.ts             # TypeScript type definitions
├── utils/
│   ├── gameLogic.ts        # Core game rules and validation
│   └── ai.ts               # AI opponent logic
└── public/                 # Static assets

The game uses React's useReducer hook for centralized state management with the following structure:

type GameState = {
  boardState: BoardState;           // 8x8 array of pieces
  currentPlayer: 'red' | 'black';   // Current turn
  winner: 'red' | 'black' | null;   // Game result
  history: GameState[];             // For undo functionality
  showValidMoves: boolean;          // Toggle for hints
  gameMode: 'pvp' | 'pve';          // Game mode
  aiDifficulty: AIDifficulty;       // AI level
  selectedPiece: Position | null;   // Currently selected piece
  validMoves: Position[];           // Available destinations
  message: string;                  // Status message
}

• initializeBoard(): Sets up the starting position
• getValidMovesForPiece(): Calculates legal moves (respects mandatory capture rule)
• validateAndExecuteMove(): Validates and executes a move
• getMultiJumpCaptures(): Recursively finds all multi-jump sequences
• checkWinner(): Determines if the game has ended

• Selects random valid moves

• Prioritizes captures over regular moves
• Chooses the capture with the most pieces if multiple captures available
• Falls back to random moves when no captures exist

• Implements Minimax algorithm with alpha-beta pruning
• Looks ahead 4 moves
• Evaluation function: (AI pieces - opponent pieces) + (AI kings × 1.5 - opponent kings × 1.5)
• Provides challenging gameplay for experienced players

The game uses Tailwind CSS for styling. Key colors can be modified in the components:

• Red pieces: bg-red-600
• Black pieces: bg-gray-800
• Board colors: bg-amber-800 (dark) and bg-amber-100 (light)
• Valid moves: bg-green-400

Adjust AI lookahead depth in utils/ai.ts:

const depth = 4; // Increase for harder AI (warning: slower)

The game currently supports standard 8x8 boards. Modifying board size would require changes to:

• initializeBoard() in utils/gameLogic.ts
• Board dimensions in components/GameBoard.tsx

Potential features for future versions:

• Online multiplayer
• Game statistics and history
• Custom themes
• Sound effects
• Animation for piece movements
• Timer for turns
• International Checkers rules variant
• Save/load game state
• Move history notation

Contributions are welcome! Please feel free to submit a Pull Request.

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

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

• Built with Next.js
• Styled with Tailwind CSS
• Type safety with TypeScript

Enjoy playing Checkers! 🎮