const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 50; const boardSize = 8; const board = createBoard(); let selectedPiece = null; let selectedPiecePosition = null; canvas.width = tileSize * boardSize; canvas.height = tileSize * boardSize; canvas.addEventListener('click', handleMouseClick); function createBoard() { const board = []; for (let row = 0; row < boardSize; row++) { board[row] = []; for (let col = 0; col < boardSize; col++) { board[row][col] = null; } } // Place initial chess pieces board[0][0] = '♜'; board[0][1] = '♞'; board[0][2] = '♝'; board[0][3] = '♛'; board[0][4] = '♚'; board[0][5] = '♝'; board[0][6] = '♞'; board[0][7] = '♜'; board[1][0] = '♟'; board[1][1] = '♟'; board[1][2] = '♟'; board[1][3] = '♟'; board[1][4] = '♟'; board[1][5] = '♟'; board[1][6] = '♟'; board[1][7] = '♟'; board[7][0] = '♖'; board[7][1] = '♘'; board[7][2] = '♗'; board[7][3] = '♕'; board[7][4] = '♔'; board[7][5] = '♗'; board[7][6] = '♘'; board[7][7] = '♖'; board[6][0] = '♙'; board[6][1] = '♙'; board[6][2] = '♙'; board[6][3] = '♙'; board[6][4] = '♙'; board[6][5] = '♙'; board[6][6] = '♙'; board[6][7] = '♙'; return board; } function drawBoard() { for (let row = 0; row < boardSize; row++) { for (let col = 0; col < boardSize; col++) { const x = col * tileSize; const y = row * tileSize; ctx.fillStyle = (row + col) % 2 === 0 ? '#fff' : '#ccc'; ctx.fillRect(x, y, tileSize, tileSize); ctx.fillStyle = '#000'; ctx.font = '32px Arial'; ctx.fillText(board[row][col], x + tileSize / 2 - 12, y + tileSize / 2 + 12); } } } function handleMouseClick(event) { const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; const col = Math.floor(mouseX / tileSize); const row = Math.floor(mouseY / tileSize); if (selectedPiece) { if (isValidMove(selectedPiecePosition, [row, col])) { movePiece(selectedPiecePosition, [row, col]); } selectedPiece = null; selectedPiecePosition = null; } else { const piece = board[row][col]; if (piece) { selectedPiece = piece; selectedPiecePosition = [row, col]; } } } function isValidMove(from, to) { const [fromRow, fromCol] = from; const [toRow, toCol] = to; const piece = board[fromRow][fromCol]; if (piece === '♟') { // Pawn if (fromCol === toCol && fromRow - toRow === 1 && !board[toRow][toCol]) { return true; } else if (fromCol === toCol && fromRow - toRow === 2 && fromRow === 6 && !board[toRow][toCol] && !board[toRow + 1][toCol]) { return true; } else if (Math.abs(fromCol - toCol) === 1 && fromRow - toRow === 1 && board[toRow][toCol]) { return true; } } else if (piece === '♙') { // Pawn if (fromCol === toCol && toRow - fromRow === 1 && !board[toRow][toCol]) { return true; } else if (fromCol === toCol && toRow - fromRow === 2 && fromRow === 1 && !board[toRow][toCol] && !board[toRow - 1][toCol]) { return true; } else if (Math.abs(fromCol - toCol) === 1 && toRow - fromRow === 1 && board[toRow][toCol]) { return true; } } else if (piece === '♜' || piece === '♖') { // Rook if (fromRow === toRow || fromCol === toCol) { if (fromRow === toRow) { const start = Math.min(fromCol, toCol) + 1; const end = Math.max(fromCol, toCol); for (let col = start; col < end; col++) { if (board[fromRow][col]) { return false; } } } else { const start = Math.min(fromRow, toRow) + 1; const end = Math.max(fromRow, toRow); for (let row = start; row < end; row++) { if (board[row][fromCol]) { return false; } } } return true; } } else if (piece === '♞' || piece === '♘') { // Knight if ((Math.abs(fromRow - toRow) === 2 && Math.abs(fromCol - toCol) === 1) || (Math.abs(fromRow - toRow) === 1 && Math.abs(fromCol - toCol) === 2)) { return true; } } else if (piece === '♝' || piece === '♗') { // Bishop if (Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) { const startRow = Math.min(fromRow, toRow) + 1; const startCol = Math.min(fromCol, toCol) + 1; const endRow = Math.max(fromRow, toRow); const endCol = Math.max(fromCol, toCol); for (let i = startRow, j = startCol; i < endRow; i++, j++) { if (board[i][j]) { return false; } } return true; } } else if (piece === '♛' || piece === '♕') { // Queen if (fromRow === toRow || fromCol === toCol) { if (fromRow === toRow) { const start = Math.min(fromCol, toCol) + 1; const end = Math.max(fromCol, toCol); for (let col = start; col < end; col++) { if (board[fromRow][col]) { return false; } } } else { const start = Math.min(fromRow, toRow) + 1; const end = Math.max(fromRow, toRow); for (let row = start; row < end; row++) { if (board[row][fromCol]) { return false; } } } return true; } else if (Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) { const startRow = Math.min(fromRow, toRow) + 1; const startCol = Math.min(fromCol, toCol) + 1; const endRow = Math.max(fromRow, toRow); const endCol = Math.max(fromCol, toCol); for (let i = startRow, j = startCol; i < endRow; i++, j++) { if (board[i][j]) { return false; } } return true; } } else if (piece === '♚' || piece === '♔') { // King if (Math.abs(fromRow - toRow) <= 1 && Math.abs(fromCol - toCol) <= 1) { return true; } } return false; } function movePiece(from, to) { const [fromRow, fromCol] = from; const [toRow, toCol] = to; board[toRow][toCol] = board[fromRow][fromCol]; board[fromRow][fromCol] = null; } function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); requestAnimationFrame(gameLoop); } gameLoop();

GPTgame

Sign up for free tokens!

chess with movable figures

GPTgame