A fully interactive, browser-based implementation of the classic board game Checkers (also known as Draughts). This application brings the traditional tabletop experience to the web using modern web technologies.
Play the game online here: Checkers Web Game Live Demo
- Classic Rules: Full implementation of standard checkers rules, including turn-based movement, chain jumping, and kinging promotions.
- Single Player Mode: Challenge a built-in computer opponent (NPC) with intelligent move selection.
- Move Validation: The game engine strictly enforces valid moves, preventing illegal actions.
- King Promotion: Pieces reaching the opposite end of the board are automatically promoted to Kings, gaining multi-directional movement.
- Chain Jumps: Supports complex multi-jump sequences (double/triple jumps) in a single turn.
- Win Detection: Automatically detects victory conditions when a player captures all opponent pieces or blocks all moves.
- Responsive Design: A clean, centered board layout that adapts to various screen sizes, including mobile devices.
- Visual Feedback: Highlights for selected pieces and valid moves.
- Scoreboard: Tracks wins for both "Me" (Player) and the opponent ("Red" or "Black").
- Sound Effects: Synthesized audio cues for moves, captures, king promotions, and game wins using the Web Audio API.
- Particle Effects: A celebratory confetti animation upon winning a match.
- HTML5: Semantic markup for the game structure.
- CSS3: Advanced styling with CSS Variables, Grid/Flexbox layouts, and realistic textures (wood, felt).
- JavaScript (ES6+): Modular, class-based architecture handling game logic, AI, and DOM interaction.
- Web Audio API: For generating dynamic sound effects without external assets.
- Canvas API: For rendering high-performance visual effects like confetti.
This project is a static web application and requires no build steps or backend server.
- Clone the repository:
git clone https://github.com/jgarvey928/Checkers_WebApp.git
- Navigate to the project directory:
cd Checkers_WebApp - Launch the Game:
Simply open the
index.htmlfile in your preferred modern web browser (Chrome, Firefox, Edge, Safari).
- Start: The game begins in Single Player mode. You play as Red (bottom), and the computer plays as Black (top).
- Move: Click on a piece to select it (highlighted in yellow), then click a valid diagonal tan square to move.
- Capture: If an opponent's piece is diagonally adjacent and the square behind it is empty, you can jump over it to capture it.
- Win: The game ends when one player loses all their pieces or cannot make a valid move.
- Single Player (Default): The game starts with the NPC enabled. You play as Red (bottom) against the computer ("Me"), which plays as Black (top).
- Two Player: Click the "Disable NPC (Me)" button to switch to Two Player mode. In this mode, you can control both Red and Black pieces, allowing you to play against yourself or a friend on the same device. Click "Enable NPC (Me)" to return to Single Player mode.
John S. Garvey