Spaces:

Raven7
/

HuggingChess

Running

File size: 9,415 Bytes

073c4dc
52b4b86
073c4dc

<!DOCTYPE html>
<html>
<head>
  <style>
    .board {
      width: 480px;
      height: 480px;
      border: 2px solid #333;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
    }

    .square {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      cursor: pointer;
      position: relative;
    }

    .white {
      background: #fff;
    }

    .black {
      background: #999;
    }

    .highlight {
      background: rgba(255, 255, 0, 0.5);
    }

    .possible-move::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: rgba(0, 255, 0, 0.3);
      border-radius: 50%;
    }

    .captured {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .captured-piece {
      font-size: 24px;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="board" id="board"></div>
  <div class="captured">
    <div>
      White captured: <span id="whiteCaptured"></span>
    </div>
    <div>
      Black captured: <span id="blackCaptured"></span>
    </div>
  </div>

  <script>
    const board = document.getElementById('board');
    const whiteCaptured = document.getElementById('whiteCaptured');
    const blackCaptured = document.getElementById('blackCaptured');
    let selectedPiece = null;
    let currentTurn = 'white';
    let whiteCapturedPieces = [];
    let blackCapturedPieces = [];

    const initialBoard = [
      ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
      ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
      ['', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', ''],
      ['', '', '', '', '', '', '', ''],
      ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
      ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖']
    ];

    let gameBoard = JSON.parse(JSON.stringify(initialBoard));

    function createBoard() {
      board.innerHTML = '';
      for (let i = 0; i < 8; i++) {
        for (let j = 0; j < 8; j++) {
          const square = document.createElement('div');
          square.className = `square ${(i + j) % 2 === 0 ? 'white' : 'black'}`;
          square.dataset.row = i;
          square.dataset.col = j;
          square.textContent = gameBoard[i][j];
          square.addEventListener('click', handleClick);
          board.appendChild(square);
        }
      }
    }

    function isWhitePiece(piece) {
      return '♔♕♖♗♘♙'.includes(piece);
    }

    function isBlackPiece(piece) {
      return '♚♛♜♝♞♟'.includes(piece);
    }

    function clearHighlights() {
      document.querySelectorAll('.square').forEach(square => {
        square.classList.remove('highlight', 'possible-move');
      });
    }

    function getPossibleMoves(row, col) {
      const piece = gameBoard[row][col];
      const moves = [];

      switch (piece) {
        case '♔':
        case '♚':
          // King moves
          for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
              if (i === 0 && j === 0) continue;
              const newRow = row + i;
              const newCol = col + j;
              if (isValidMove(newRow, newCol, piece)) {
                moves.push([newRow, newCol]);
              }
            }
          }
          break;

        case '♕':
        case '♛':
          // Queen moves (combination of rook and bishop)
          moves.push(...getRookMoves(row, col));
          moves.push(...getBishopMoves(row, col));
          break;

        case '♖':
        case '♜':
          // Rook moves
          moves.push(...getRookMoves(row, col));
          break;

        case '♗':
        case '♝':
          // Bishop moves
          moves.push(...getBishopMoves(row, col));
          break;

        case '♘':
        case '♞':
          // Knight moves
          const knightMoves = [
            [-2, -1], [-2, 1], [-1, -2], [-1, 2],
            [1, -2], [1, 2], [2, -1], [2, 1]
          ];
          for (const [dRow, dCol] of knightMoves) {
            const newRow = row + dRow;
            const newCol = col + dCol;
            if (isValidMove(newRow, newCol, piece)) {
              moves.push([newRow, newCol]);
            }
          }
          break;

        case '♙':
          // White pawn moves
          if (row > 0 && !gameBoard[row - 1][col]) {
            moves.push([row - 1, col]);
            if (row === 6 && !gameBoard[row - 2][col]) {
              moves.push([row - 2, col]);
            }
          }
          // Capture diagonally
          if (row > 0 && col > 0 && isBlackPiece(gameBoard[row - 1][col - 1])) {
            moves.push([row - 1, col - 1]);
          }
          if (row > 0 && col < 7 && isBlackPiece(gameBoard[row - 1][col + 1])) {
            moves.push([row - 1, col + 1]);
          }
          break;

        case '♟':
          // Black pawn moves
          if (row < 7 && !gameBoard[row + 1][col]) {
            moves.push([row + 1, col]);
            if (row === 1 && !gameBoard[row + 2][col]) {
              moves.push([row + 2, col]);
            }
          }
          // Capture diagonally
          if (row < 7 && col > 0 && isWhitePiece(gameBoard[row + 1][col - 1])) {
            moves.push([row + 1, col - 1]);
          }
          if (row < 7 && col < 7 && isWhitePiece(gameBoard[row + 1][col + 1])) {
            moves.push([row + 1, col + 1]);
          }
          break;
      }

      return moves;
    }

    function getRookMoves(row, col) {
      const moves = [];
      const directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
      for (const [dRow, dCol] of directions) {
        let newRow = row + dRow;
        let newCol = col + dCol;
        while (isValidMove(newRow, newCol, gameBoard[row][col])) {
          moves.push([newRow, newCol]);
          if (gameBoard[newRow][newCol]) break;
          newRow += dRow;
          newCol += dCol;
        }
      }
      return moves;
    }

    function getBishopMoves(row, col) {
      const moves = [];
      const directions = [[1, 1], [1, -1], [-1, 1], [-1, -1]];
      for (const [dRow, dCol] of directions) {
        let newRow = row + dRow;
        let newCol = col + dCol;
        while (isValidMove(newRow, newCol, gameBoard[row][col])) {
          moves.push([newRow, newCol]);
          if (gameBoard[newRow][newCol]) break;
          newRow += dRow;
          newCol += dCol;
        }
      }
      return moves;
    }

    function isValidMove(row, col, piece) {
      if (row < 0 || row > 7 || col < 0 || col > 7) return false;
      const targetPiece = gameBoard[row][col];
      if (!targetPiece) return true;
      return isWhitePiece(piece) ? isBlackPiece(targetPiece) : isWhitePiece(targetPiece);
    }

    function handleClick(event) {
      const row = parseInt(event.target.dataset.row);
      const col = parseInt(event.target.dataset.col);
      const piece = gameBoard[row][col];

      if (selectedPiece) {
        const selectedRow = parseInt(selectedPiece.dataset.row);
        const selectedCol = parseInt(selectedPiece.dataset.col);
        const possibleMoves = getPossibleMoves(selectedRow, selectedCol);
        
        const isValidMove = possibleMoves.some(([r, c]) => r === row && c === col);
        
        if (isValidMove) {
          const capturedPiece = gameBoard[row][col];
          if (capturedPiece) {
            if (isWhitePiece(gameBoard[selectedRow][selectedCol])) {
              whiteCapturedPieces.push(capturedPiece);
            } else {
              blackCapturedPieces.push(capturedPiece);
            }
            updateCapturedPieces();
            
            if (capturedPiece === '♚' || capturedPiece === '♔') {
              alert('Game Over! ' + (isWhitePiece(gameBoard[selectedRow][selectedCol]) ? 'White' : 'Black') + ' wins!');
              resetGame();
              return;
            }
          }
          
          gameBoard[row][col] = gameBoard[selectedRow][selectedCol];
          gameBoard[selectedRow][selectedCol] = '';
          currentTurn = currentTurn === 'white' ? 'black' : 'white';
        }
        
        selectedPiece = null;
        clearHighlights();
        createBoard();
        return;
      }

      if (!piece) return;
      
      const isWhiteTurn = currentTurn === 'white';
      if ((isWhiteTurn && !isWhitePiece(piece)) || (!isWhiteTurn && !isBlackPiece(piece))) {
        return;
      }

      selectedPiece = event.target;
      clearHighlights();
      event.target.classList.add('highlight');

      const possibleMoves = getPossibleMoves(row, col);
      possibleMoves.forEach(([r, c]) => {
        const square = document.querySelector(`[data-row="${r}"][data-col="${c}"]`);
        square.classList.add('possible-move');
      });
    }

    function updateCapturedPieces() {
      whiteCaptured.textContent = whiteCapturedPieces.join(' ');
      blackCaptured.textContent = blackCapturedPieces.join(' ');
    }

    function resetGame() {
      gameBoard = JSON.parse(JSON.stringify(initialBoard));
      currentTurn = 'white';
      whiteCapturedPieces = [];
      blackCapturedPieces = [];
      selectedPiece = null;
      updateCapturedPieces();
      createBoard();
    }

    createBoard();
  </script>
</body>
</html>