AI game creator

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

No:36588

←

Prev Next

→

Chess Game
Developer User16822｜Date and time 24/1/17 23:58:43
Build time 13.367 sec｜Game capacity 2.361KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Juego de Ajedrez</title>
  <style>
    .board {
      display: flex;
      flex-wrap: wrap;
      width: 320px;
      height: 320px;
    }
    
    .square {
      width: 40px;
      height: 40px;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="board"></div>

var selectedPiece = null;

function renderBoard() {
      var boardEl = document.querySelector('.board');
      boardEl.innerHTML = '';

for (var row = 0; row < chessBoard.length; row++) {
        for (var col = 0; col < chessBoard[row].length; col++) {
          var squareEl = document.createElement('div');
          squareEl.classList.add('square');
          squareEl.dataset.row = row;
          squareEl.dataset.col = col;

if (chessBoard[row][col] !== '') {
            squareEl.innerText = chessBoard[row][col];
          }

squareEl.addEventListener('click', handleSquareClick);

boardEl.appendChild(squareEl);
        }
      }
    }

function handleSquareClick(event) {
      var squareEl = event.target;
      var row = Number(squareEl.dataset.row);
      var col = Number(squareEl.dataset.col);

if (selectedPiece === null) {
        var piece = chessBoard[row][col];
        if (piece !== '') {
          selectedPiece = { row: row, col: col };
          squareEl.style.backgroundColor = 'yellow';
        }
      } else {
        var selectedPieceRow = selectedPiece.row;
        var selectedPieceCol = selectedPiece.col;
        var piece = chessBoard[selectedPieceRow][selectedPieceCol];

chessBoard[selectedPieceRow][selectedPieceCol] = '';
        chessBoard[row][col] = piece;

selectedPiece = null;
        renderBoard();
      }
    }

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