Create a chess game with pieces and moves to play a real game's game

Click here for free DL of the app version that can save data.

No:11897

←

Prev Next

→

Create a chess game with pieces and moves to play ..ALL
Developer User4976｜Date and time 23/8/13 2:50:12
Build time 35.707 sec｜Game capacity 6.077KB｜

Script

Sure! Here's an example of a simplified Chess game implemented as a single HTML file using JavaScript. This implementation allows you to make moves by clicking on the pieces and their destination squares. For simplicity, it doesn't include features like castling, en passant, or checkmate detection. You can copy the code below and save it as an HTML file to play the game:

Please note that this is a basic implementation and it is up to you to implement the full logic for valid moves and additional game features.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

You can copy the code below and save it as an HTML file to play the game:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .board {
        display: grid;
        grid-template-columns: repeat(8, 60px);
        grid-template-rows: repeat(8, 60px);
      }

.square {
        width: 60px;
        height: 60px;
        border: 1px solid black;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
      }

.piece {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="board"></div>

// Initialize the chess board
      const board = document.querySelector(".board");

// Helper function to create a square element
      function createSquare(x, y) {
        const square = document.createElement("div");
        square.className = "square";
        square.id = `sq_${x}_${y}`;
        square.dataset.x = x;
        square.dataset.y = y;
        board.appendChild(square);
        return square;
      }

// Helper function to create a piece element
      function createPiece(color, type) {
        const piece = document.createElement("span");
        piece.className = "piece";
        piece.textContent = pieces[color][type];
        return piece;
      }

// Initialize the chess pieces on the board
      function initializePieces() {
        for (let x = 0; x < 8; x++) {
          for (let y = 0; y < 8; y++) {
            let piece = null;
            if (y === 0) {
              // Black pieces
              if (x === 0 || x === 7) {
                piece = createPiece("black", "rook");
              } else if (x === 1 || x === 6) {
                piece = createPiece("black", "knight");
              } else if (x === 2 || x === 5) {
                piece = createPiece("black", "bishop");
              } else if (x === 3) {
                piece = createPiece("black", "queen");
              } else if (x === 4) {
                piece = createPiece("black", "king");
              }
            } else if (y === 7) {
              // White pieces
              if (x === 0 || x === 7) {
                piece = createPiece("white", "rook");
              } else if (x === 1 || x === 6) {
                piece = createPiece("white", "knight");
              } else if (x === 2 || x === 5) {
                piece = createPiece("white", "bishop");
              } else if (x === 3) {
                piece = createPiece("white", "queen");
              } else if (x === 4) {
                piece = createPiece("white", "king");
              }
            } else if (y === 1 || y === 6) {
              piece = createPiece(y === 1 ? "black" : "white", "pawn");
            }

if (piece) {
              const square = document.getElementById(`sq_${x}_${y}`);
              square.appendChild(piece);
            }
          }
        }
      }

// Initialize the chess board and pieces
      function initializeGame() {
        for (let x = 0; x < 8; x++) {
          for (let y = 0; y < 8; y++) {
            createSquare(x, y);
          }
        }

initializePieces();
      }

// Logic for handling piece moves
      function handlePieceMove(event) {
        const square = event.target;
        const piece = square.querySelector(".piece");

if (piece) {
          // If there's a piece in the clicked square, move it to a valid destination
          const destinationSquare = prompt("Enter destination (e.g., e5):");
          if (!destinationSquare) return;

const { x: srcX, y: srcY } = square.dataset;
          const { x: destX, y: destY } = parseCoordinates(destinationSquare);

if (isMoveValid(square, destX, destY)) {
            const destination = document.getElementById(`sq_${destX}_${destY}`);

// Move the piece to the destination square
            destination.innerHTML = piece.outerHTML;
            square.innerHTML = "";

} else {
            alert("Invalid move! Try again.");
          }
        }
      }

// Helper function to parse destination coordinates from user input
      function parseCoordinates(coordinates) {
        const [file, rank] = coordinates.split("");
        const x = file.charCodeAt(0) - 97; // Convert letter to 0-based index (e.g., a->0, b->1)
        const y = 8 - parseInt(rank); // Convert rank to 0-based index (e.g., 1->7, 2->6)
        return { x, y };
      }

// Helper function to check if a move is valid
      function isMoveValid(srcSquare, destX, destY) {
        const { x: srcX, y: srcY } = srcSquare.dataset;

// TODO: Implement validation logic for moves based on the rules of chess
        // Example: Only allow diagonal moves for bishop, horizontal/vertical moves for rook, etc.
        return true;
      }

// Start the game
      initializeGame();

// Add event listeners to handle moves
      board.addEventListener("click", handlePieceMove);
    </script>
  </body>
</html>
```

Please note that this is a basic implementation and it is up to you to implement the full logic for valid moves and additional game features.