AI game creator

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

No:52272

109

←

Prev Next

→

Chess
Developer User18209｜Date and time 24/3/20 0:11:00
Build time 11.107 sec｜Game capacity 1.768KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Game</title>
<style>
    #chessboard {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        width: 80vw;
        height: 80vw;
        margin: 10vh auto;
        border: 2px solid black;
    }

.square {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        cursor: pointer;
    }

.white {
        background-color: #f0d9b5;
    }

.black {
        background-color: #b58863;
    }
</style>
</head>
<body>
<div id="chessboard"></div>

const pieces = ['♜', '♞', '♝', '♛', '♚', '♟', '♖', '♘', '♗', '♕', '♔', '♙'];
    let isWhiteTurn = true;

for (let i = 0; i < 64; i++) {
        const square = document.createElement('div');
        square.classList.add('square');
        square.classList.add(i % 2 === Math.floor(i / 8) % 2 ? 'white' : 'black');
        square.innerText = pieces[Math.floor(i / 8) + (i % 8) % 12];
        square.addEventListener('click', () => {
            if (square.innerText !== '') {
                if ((isWhiteTurn && square.innerText.charCodeAt(0) < 9812) || (!isWhiteTurn && square.innerText.charCodeAt(0) >= 9812)) {
                    return;
                }
            }
            const selectedPiece = square.innerText;
            board.querySelectorAll('.square').forEach(square => square.style.background = '');
            square.style.background = 'yellow';
            isWhiteTurn = !isWhiteTurn;
        });
        board.appendChild(square);
    }
</script>
</body>
</html>