Checkers Game

#game-container { display: flex; justify-content: center; align-items: center; background-color: #f0e68c; /* Light yellow background */ padding: 20px; border-radius: 10px; } #gameCanvas { border: 2px solid #a0522d; /* Dark brown border */ box-shadow: 5px 5px 15px rgba(0,0,0,0.3); } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const SQUARE_SIZE = 60; const BOARD_SIZE = 8; let board = []; let pieces = []; let currentPlayer = 'black'; // Black starts first, AI is red let selectedPiece = null; let possibleMoves = []; let forcedJumps = []; // Array to hold pieces that must jump let canMultiJump = false; // Flag to indicate if a multi-jump is in progress function initializeBoard() { board = Array.from({ length: BOARD_SIZE }, () => Array(BOARD_SIZE).fill(null)); pieces = []; // Clear existing pieces // Initialize pieces for (let row = 0; row < 3; row++) { for (let col = (row + 1) % 2; col < BOARD_SIZE; col += 2) { pieces.push(createPiece(row, col, 'red')); board[row][col] = pieces[pieces.length - 1]; } } for (let row = 5; row < 8; row++) { for (let col = (row + 1) % 2; col < BOARD_SIZE; col += 2) { pieces.push(createPiece(row, col, 'black')); board[row][col] = pieces[pieces.length - 1]; } } currentPlayer = 'black'; // Reset to black's turn selectedPiece = null; possibleMoves = []; forcedJumps = findForcedJumps(currentPlayer); canMultiJump = false; draw(); if (currentPlayer === 'red') { setTimeout(aiMove, 500); } } function createPiece(row, col, color) { return { row, col, color, isKing: false, }; } function drawBoard() { for (let row = 0; row < BOARD_SIZE; row++) { for (let col = 0; col < BOARD_SIZE; col++) { ctx.fillStyle = (row + col) % 2 === 0 ? '#f0d9b5' : '#b58863'; // Light and dark brown squares ctx.fillRect(col * SQUARE_SIZE, row * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE); } } } function drawPieces() { pieces.forEach(piece => { drawPiece(piece); }); } function drawPiece(piece) { const centerX = piece.col * SQUARE_SIZE + SQUARE_SIZE / 2; const centerY = piece.row * SQUARE_SIZE + SQUARE_SIZE / 2; const radius = SQUARE_SIZE / 2 - 10; // Create gradient for 3D effect const gradient = ctx.createRadialGradient(centerX, centerY, radius * 0.3, centerX, centerY, radius); gradient.addColorStop(0, piece.color === 'red' ? '#ff6666' : '#4d4d4d'); // Lighter color for top highlight gradient.addColorStop(1, piece.color); // Base color ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); ctx.strokeStyle = piece.color === 'red' ? '#800000' : '#000000'; // Darker stroke ctx.lineWidth = 3; ctx.stroke(); if (piece.isKing) { ctx.font = '24px serif'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('K', centerX, centerY); } } function getPieceAt(row, col) { if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE) return null; return board[row][col]; } function selectPiece(piece) { if (piece && piece.color === currentPlayer) { if (forcedJumps.length > 0 && !forcedJumps.includes(piece)) { return; // Must make a jump if available and piece cannot jump } selectedPiece = piece; possibleMoves = getPossibleMoves(piece, true); // true to indicate initial move selection draw(); } } function getPossibleMoves(piece, initialSelection = false) { let moves = []; const colorDir = piece.color === 'red' ? 1 : -1; const directions = piece.isKing ? [-1, 1] : [colorDir]; // King moves both directions let jumpMovesAvailable = false; for (const dir of directions) { const regularMoves = [ { row: piece.row + dir, col: piece.col - 1 }, { row: piece.row + dir, col: piece.col + 1 }, ]; for (const move of regularMoves) { if (isValidMove(move.row, move.col)) { if (!initialSelection || forcedJumps.length === 0) { // Only add regular moves if no forced jumps or not initial selection moves.push({ ...move, type: 'regular' }); } } } const jumpMoves = [ { row: piece.row + 2 * dir, col: piece.col - 2, jumpedRow: piece.row + dir, jumpedCol: piece.col - 1 }, { row: piece.row + 2 * dir, col: piece.col + 2, jumpedRow: piece.row + dir, jumpedCol: piece.col + 1 }, ]; for (const jump of jumpMoves) { const jumpedPiece = getPieceAt(jump.jumpedRow, jump.jumpedCol); if (isValidJump(piece, jump.row, jump.col, jumpedPiece)) { moves.push({ ...jump, type: 'jump' }); jumpMovesAvailable = true; } } } if (jumpMovesAvailable) { return moves.filter(move => move.type === 'jump'); // If jumps available, only return jump moves } else { return moves.filter(move => move.type === 'regular'); // Otherwise, return regular moves } } function isValidMove(row, col) { return row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE && !getPieceAt(row, col); } function isValidJump(piece, row, col, jumpedPiece) { return isValidMove(row, col) && jumpedPiece && jumpedPiece.color !== piece.color; } function movePiece(move) { if (!selectedPiece || !move) return; board[selectedPiece.row][selectedPiece.col] = null; if (move.type === 'jump') { const jumpedPiece = getPieceAt(move.jumpedRow, move.jumpedCol); if (jumpedPiece) { removePiece(jumpedPiece); canMultiJump = canJumpAgain(selectedPiece, move); // Check for immediate multi-jump } } else { canMultiJump = false; // No multi-jump after regular move } selectedPiece.row = move.row; selectedPiece.col = move.col; board[move.row][move.col] = selectedPiece; // King me? if (!selectedPiece.isKing && ((selectedPiece.color === 'red' && move.row === BOARD_SIZE - 1) || (selectedPiece.color === 'black' && move.row === 0))) { selectedPiece.isKing = true; } if (!canMultiJump) { selectedPiece = null; possibleMoves = []; currentPlayer = currentPlayer === 'black' ? 'red' : 'black'; forcedJumps = findForcedJumps(currentPlayer); checkWinCondition(); // Check win condition only when turn ends if (currentPlayer === 'red' && pieces.filter(p => p.color === 'red').length > 0 && pieces.filter(p => p.color === 'black').length > 0) { setTimeout(aiMove, 500); } } else { possibleMoves = getPossibleJumpMovesForMultiJump(selectedPiece); // Only possible jumps for multi-jump draw(); // Redraw to show possible multi-jumps } draw(); } function getPossibleJumpMovesForMultiJump(piece) { let moves = []; const colorDir = piece.color === 'red' ? 1 : -1; const directions = piece.isKing ? [-1, 1] : [colorDir]; for (const dir of directions) { const jumpMoves = [ { row: piece.row + 2 * dir, col: piece.col - 2, jumpedRow: piece.row + dir, jumpedCol: piece.col - 1 }, { row: piece.row + 2 * dir, col: piece.col + 2, jumpedRow: piece.row + dir, jumpedCol: piece.col + 1 }, ]; for (const jump of jumpMoves) { const jumpedPiece = getPieceAt(jump.jumpedRow, jump.jumpedCol); if (isValidJump(piece, jump.row, jump.col, jumpedPiece)) { moves.push({ ...jump, type: 'jump' }); } } } return moves; } function canJumpAgain(piece) { return getPossibleJumpMovesForMultiJump(piece).length > 0; } function removePiece(pieceToRemove) { pieces = pieces.filter(piece => piece !== pieceToRemove); board[pieceToRemove.row][pieceToRemove.col] = null; } function drawPossibleMoves() { if (selectedPiece) { ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; // Green highlight possibleMoves.forEach(move => { ctx.fillRect(move.col * SQUARE_SIZE, move.row * SQUARE_SIZE, SQUARE_SIZE, SQUARE_SIZE); }); } } function draw() { drawBoard(); drawPossibleMoves(); drawPieces(); } function handleCanvasClick(event) { if (currentPlayer === 'black' && !canMultiJump) { // Only allow human input for black player and not during multi-jump const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; const clickedRow = Math.floor(mouseY / SQUARE_SIZE); const clickedCol = Math.floor(mouseX / SQUARE_SIZE); const clickedPiece = getPieceAt(clickedRow, clickedCol); if (selectedPiece) { const move = possibleMoves.find(m => m.row === clickedRow && m.col === clickedCol); if (move) { movePiece(move); } else { selectPiece(clickedPiece); // Re-select if clicked elsewhere } } else { selectPiece(clickedPiece); } } else if (currentPlayer === 'black' && canMultiJump && selectedPiece) { // Handle multi-jump clicks const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; const clickedRow = Math.floor(mouseY / SQUARE_SIZE); const clickedCol = Math.floor(mouseX / SQUARE_SIZE); const move = possibleMoves.find(m => m.row === clickedRow && m.col === clickedCol); if (move) { movePiece(move); // Continue multi-jump } } } function findForcedJumps(playerColor) { let piecesForcedToJump = []; const playerPieces = pieces.filter(piece => piece.color === playerColor); for (const piece of playerPieces) { const jumpMoves = getPossibleMoves(piece, true).filter(move => move.type === 'jump'); if (jumpMoves.length > 0) { piecesForcedToJump.push(piece); } } return piecesForcedToJump; } function aiMove() { if (currentPlayer !== 'red') return; forcedJumps = findForcedJumps('red'); // Update forced jumps for AI turn let aiPossibleMoves = []; const aiPieces = pieces.filter(piece => piece.color === 'red'); for (const piece of aiPieces) { let moves = getPossibleMoves(piece, true); if (forcedJumps.length > 0 && !forcedJumps.includes(piece)) { moves = moves.filter(move => move.type !== 'regular'); // AI must jump if forced } for (const move of moves) { aiPossibleMoves.push({ piece, move }); } } if (aiPossibleMoves.length > 0) { // Basic AI: prioritize jumps, then random move let jumpMoves = aiPossibleMoves.filter(m => m.move.type === 'jump'); let chosenMove; if (jumpMoves.length > 0) { const randomJumpIndex = Math.floor(Math.random() * jumpMoves.length); chosenMove = jumpMoves[randomJumpIndex]; } else { const randomMoveIndex = Math.floor(Math.random() * aiPossibleMoves.length); chosenMove = aiPossibleMoves[randomMoveIndex]; } selectedPiece = chosenMove.piece; possibleMoves = getPossibleMoves(selectedPiece, true); // Need to recalculate for movePiece function const move = possibleMoves.find(m => m.row === chosenMove.move.row && m.col === chosenMove.move.col); // Find the exact move object if (move) { movePiece(move); } } else { console.log("Red player has no moves!"); currentPlayer = 'black'; // Switch turn even if no moves (game over or stalemate) checkWinCondition(); // Check if black wins because red has no moves } } function checkWinCondition() { const redPieces = pieces.filter(piece => piece.color === 'red'); const blackPieces = pieces.filter(piece => piece.color === 'black'); if (blackPieces.length === 0) { alert("Red wins!"); initializeBoard(); // Restart game return true; // Indicate game ended } else if (redPieces.length === 0) { alert("Black wins!"); initializeBoard(); // Restart game return true; // Indicate game ended } else if (findForcedJumps('black').length === 0 && getPossibleMovesForPlayer('black').length === 0) { alert("Red wins! Black has no moves."); // Black has no moves initializeBoard(); return true; // Indicate game ended } else if (findForcedJumps('red').length === 0 && getPossibleMovesForPlayer('red').length === 0) { alert("Black wins! Red has no moves."); // Red has no moves initializeBoard(); return true; // Indicate game ended } return false; // Game is not over } function getPossibleMovesForPlayer(playerColor) { let allMoves = []; const playerPieces = pieces.filter(piece => piece.color === playerColor); for (const piece of playerPieces) { allMoves = allMoves.concat(getPossibleMoves(piece, true)); } return allMoves; } // Initialize game on load initializeBoard(); canvas.addEventListener('click', handleCanvasClick);