Create playable chess's game

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

No:45045

←

Prev Next

→

Create playable chess
Developer User4781｜Date and time 24/2/20 3:02:48
Build time 6.017 sec｜Game capacity 1.632KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Chess Game</title>
    <style>
        .square {
            width: 50px;
            height: 50px;
            display: inline-block;
        }
        .white {
            background-color: #f0d9b5;
        }
        .black {
            background-color: #b58863;
        }
    </style>
</head>
<body>
    <div id="chessBoard"></div>
    <script>
        const board = document.getElementById('chessBoard');

// Create chessboard
        for (let i = 0; i < 8; i++) {
            for (let j = 0; j < 8; j++) {
                const square = document.createElement('div');
                square.className = 'square';
                square.classList.add((i + j) % 2 === 0 ? 'white' : 'black');
                square.setAttribute('data-col', i);
                square.setAttribute('data-row', j);
                board.appendChild(square);
            }
        }

let selectedPiece = null;

board.addEventListener('click', function(event) {
            const clickedSquare = event.target;
            
            if (selectedPiece) {
                // Move selected piece to clicked square
                selectedPiece.style.backgroundColor = clickedSquare.style.backgroundColor;
                selectedPiece = null;
            } else {
                // Select piece
                if(clickedSquare.style.backgroundColor === 'black') {
                    selectedPiece = clickedSquare;
                    clickedSquare.style.backgroundColor = 'blue'; // Highlight selected piece
                }
            }
        });
    </script>
</body>
</html>