Checkers

Checkers

Black's Turn

body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; font-family: Arial, sans-serif; } .game-container { text-align: center; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1); } h1 { color: #333; margin-bottom: 10px; } #turn-indicator { font-size: 1.2em; margin-bottom: 15px; font-weight: bold; } #checkersCanvas { border: 1px solid #333; border-radius: 5px; } const canvas = document.getElementById('checkersCanvas'); const ctx = canvas.getContext('2d'); const turnIndicator = document.getElementById('turn-indicator'); const tileSize = 60; const boardSize = 8; const pieceRadius = tileSize / 2 - 5; let board = []; let currentPlayer = 1; // 1: Black, 2: Red let selectedPiece = null; let validMoves = []; function initializeBoard() { board = Array(boardSize).fill().map(() => Array(boardSize).fill(0)); // Initialize black pieces (player 1) for (let row = 0; row < 3; row++) { for (let col = 0; col < boardSize; col++) { if ((row + col) % 2 === 0) { board[row][col] = 1; } } } // Initialize red pieces (player 2) for (let row = boardSize - 3; row < boardSize; row++) { for (let col = 0; col < boardSize; col++) { if ((row + col) % 2 === 0) { board[row][col] = 2; } } } } function drawBoard() { // Draw tiles for (let row = 0; row < boardSize; row++) { for (let col = 0; col < boardSize; col++) { ctx.fillStyle = (row + col) % 2 === 0 ? '#f0d9b5' : '#b58863'; ctx.fillRect(col * tileSize, row * tileSize, tileSize, tileSize); } } // Highlight selected piece and valid moves if (selectedPiece) { ctx.fillStyle = 'rgba(255, 255, 0, 0.3)'; ctx.fillRect( selectedPiece.col * tileSize, selectedPiece.row * tileSize, tileSize, tileSize ); validMoves.forEach(move => { ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'; ctx.fillRect( move.col * tileSize, move.row * tileSize, tileSize, tileSize ); }); } // Draw pieces for (let row = 0; row < boardSize; row++) { for (let col = 0; col < boardSize; col++) { const piece = board[row][col]; if (piece !== 0) { drawPiece(col, row, piece); } } } } function drawPiece(col, row, piece) { const x = col * tileSize + tileSize / 2; const y = row * tileSize + tileSize / 2; // Piece base ctx.beginPath(); ctx.arc(x, y, pieceRadius, 0, Math.PI * 2); ctx.fillStyle = piece === 1 ? '#222' : '#d40000'; ctx.fill(); // Piece highlight ctx.beginPath(); ctx.arc(x, y, pieceRadius * 0.7, 0, Math.PI * 2); ctx.fillStyle = piece === 1 ? '#444' : '#ff5252'; ctx.fill(); // Piece center ctx.beginPath(); ctx.arc(x, y, pieceRadius * 0.4, 0, Math.PI * 2); ctx.fillStyle = piece === 1 ? '#666' : '#ff7b7b'; ctx.fill(); } function getBoardPosition(x, y) { const col = Math.floor(x / tileSize); const row = Math.floor(y / tileSize); return { row, col }; } function handleMouseClick(event) { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; const pos = getBoardPosition(x, y); const clickedPiece = board[pos.row][pos.col]; if (clickedPiece === currentPlayer) { selectedPiece = pos; validMoves = calculateValidMoves(selectedPiece); drawBoard(); } else if (selectedPiece && isValidMove(selectedPiece, pos)) { movePiece(selectedPiece, pos); selectedPiece = null; validMoves = []; currentPlayer = currentPlayer === 1 ? 2 : 1; turnIndicator.textContent = currentPlayer === 1 ? "Black's Turn" : "Red's Turn"; drawBoard(); } } function calculateValidMoves(pos) { const moves = []; const piece = board[pos.row][pos.col]; const directions = piece === 1 ? [{row: 1, col: -1}, {row: 1, col: 1}] : [{row: -1, col: -1}, {row: -1, col: 1}]; directions.forEach(dir => { const newRow = pos.row + dir.row; const newCol = pos.col + dir.col; if (newRow >= 0 && newRow < boardSize && newCol >= 0 && newCol < boardSize) { if (board[newRow][newCol] === 0) { moves.push({row: newRow, col: newCol}); } else if (board[newRow][newCol] !== piece) { // Check for jump const jumpRow = newRow + dir.row; const jumpCol = newCol + dir.col; if (jumpRow >= 0 && jumpRow < boardSize && jumpCol >= 0 && jumpCol < boardSize) { if (board[jumpRow][jumpCol] === 0) { moves.push({row: jumpRow, col: jumpCol}); } } } } }); return moves; } function isValidMove(startPos, endPos) { return validMoves.some(move => move.row === endPos.row && move.col === endPos.col ); } function movePiece(startPos, endPos) { const piece = board[startPos.row][startPos.col]; board[startPos.row][startPos.col] = 0; board[endPos.row][endPos.col] = piece; // Check for jump and remove jumped piece if (Math.abs(endPos.row - startPos.row) === 2) { const jumpedRow = (startPos.row + endPos.row) / 2; const jumpedCol = (startPos.col + endPos.col) / 2; board[jumpedRow][jumpedCol] = 0; } } // Initialize game initializeBoard(); drawBoard(); canvas.addEventListener('click', handleMouseClick); The enhanced checkers game is ready with improved visuals and gameplay. Black moves first (downward), red moves second (upward). Click on a piece to see valid moves (highlighted in green), then click on a highlighted square to move. The game supports regular moves and jumps over opponent pieces, with a turn indicator showing whose turn it is.