AI game creator

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

No:23949

125

←

Prev Next

→

Chess
Developer User11211｜Date and time 23/11/4 17:10:16
Build time 129.648 sec｜Game capacity 7.683KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<html>
<head>
    <style>
        img {
            width: 80px;
            height: 80px;
        }
        table {
            border-collapse: collapse;
            margin: auto;
        }
        td {
            border: 1px solid black;
            width: 80px;
            height: 80px;
            text-align: center;
        }
        .highlighted {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <script>
        let chessBoard = [];
        let selectedPiece = null;
        let highlightedSquares = [];

// Initialize the chess board
        function initializeBoard() {
            for (let i = 0; i < 8; i++) {
                chessBoard[i] = [];
            }

// Black Pieces
            chessBoard[0][0] = { piece: "♖", color: "black", type: "rook" };
            chessBoard[0][1] = { piece: "♘", color: "black", type: "knight" };
            chessBoard[0][2] = { piece: "♗", color: "black", type: "bishop" };
            chessBoard[0][3] = { piece: "♕", color: "black", type: "queen" };
            chessBoard[0][4] = { piece: "♔", color: "black", type: "king" };
            chessBoard[0][5] = { piece: "♗", color: "black", type: "bishop" };
            chessBoard[0][6] = { piece: "♘", color: "black", type: "knight" };
            chessBoard[0][7] = { piece: "♖", color: "black", type: "rook" };
            for (let i = 0; i < 8; i++) {
                chessBoard[1][i] = { piece: "♙", color: "black", type: "pawn" };
            }

// Empty Squares
            for (let i = 2; i < 6; i++) {
                for (let j = 0; j < 8; j++) {
                    chessBoard[i][j] = { piece: "", color: "", type: "" };
                }
            }

// White Pieces
            chessBoard[7][0] = { piece: "♚", color: "white", type: "rook" };
            chessBoard[7][1] = { piece: "♜", color: "white", type: "knight" };
            chessBoard[7][2] = { piece: "♛", color: "white", type: "bishop" };
            chessBoard[7][3] = { piece: "♙", color: "white", type: "queen" };
            chessBoard[7][4] = { piece: "♘", color: "white", type: "king" };
            chessBoard[7][5] = { piece: "♛", color: "white", type: "bishop" };
            chessBoard[7][6] = { piece: "♜", color: "white", type: "knight" };
            chessBoard[7][7] = { piece: "♚", color: "white", type: "rook" };
            for (let i = 0; i < 8; i++) {
                chessBoard[6][i] = { piece: "♔", color: "white", type: "pawn" };
            }
        }

// Render the chess board
        function renderBoard() {
            let board = document.getElementById("chessBoard");
            board.innerHTML = "";

for (let i = 0; i < 8; i++) {
                let row = document.createElement("tr");
                for (let j = 0; j < 8; j++) {
                    let square = document.createElement("td");
                    square.setAttribute("id", "cell-" + i + "-" + j);
                    square.setAttribute("onclick", "squareClicked(" + i + "," + j + ")");
                    square.innerHTML = chessBoard[i][j].piece;
                    if ((i + j) % 2 === 1) {
                        square.style.backgroundColor = "#dcdcdc";
                    }
                    row.appendChild(square);
                }
                board.appendChild(row);
            }
        }

// Handle click event on squares
        function squareClicked(row, col) {
            if (!selectedPiece) {
                if (chessBoard[row][col].piece !== "") {
                    selectedPiece = { row: row, col: col };
                    let cell = document.getElementById("cell-" + row + "-" + col);
                    cell.className = "highlighted";
                    highlightPossibleMoves(chessBoard[row][col]);
                } else {
                    selectedPiece = null;
                }
            } else {
                let validMove = movePiece(selectedPiece.row, selectedPiece.col, row, col);
                if (validMove) {
                    if (chessBoard[row][col].type === "king") {
                        endGame(chessBoard[row][col].color);
                        return;
                    }
                    switchTurn();
                }

resetHighlightedSquares();

selectedPiece = null;
            }
            renderBoard();
        }

// Highlight the squares where the selected piece can move
        function highlightPossibleMoves(piece) {
            highlightedSquares = [];

switch (piece.type) {
                case "pawn":
                    highlightPawnMoves(piece);
                    break;
                case "rook":
                    highlightRookMoves(piece);
                    break;
                case "knight":
                    highlightKnightMoves(piece);
                    break;
                case "bishop":
                    highlightBishopMoves(piece);
                    break;
                case "queen":
                    highlightQueenMoves(piece);
                    break;
                case "king":
                    highlightKingMoves(piece);
                    break;
            }

for (let i = 0; i < highlightedSquares.length; i++) {
                let cell = document.getElementById("cell-" + highlightedSquares[i].row + "-" + highlightedSquares[i].col);
                cell.classList.add("highlighted");
            }
        }

// Highlight pawn move squares
        function highlightPawnMoves(piece) {
            // TODO: Implement the logic for highlighting pawn moves
        }

// Highlight rook move squares
        function highlightRookMoves(piece) {
            // TODO: Implement the logic for highlighting rook moves
        }

// Highlight knight move squares
        function highlightKnightMoves(piece) {
            // TODO: Implement the logic for highlighting knight moves
        }

// Highlight bishop move squares
        function highlightBishopMoves(piece) {
            // TODO: Implement the logic for highlighting bishop moves
        }

// Highlight queen move squares
        function highlightQueenMoves(piece) {
            // TODO: Implement the logic for highlighting queen moves
        }

// Highlight king move squares
        function highlightKingMoves(piece) {
            // TODO: Implement the logic for highlighting king moves
        }

// Move the piece to the new location
        function movePiece(startRow, startCol, endRow, endCol) {
            // TODO: Implement the logic for moving the piece
        }

// Switch turns between black and white
        function switchTurn() {
            // TODO: Implement the logic for switching turns
        }

// Reset the highlighted squares
        function resetHighlightedSquares() {
            for (let i = 0; i < highlightedSquares.length; i++) {
                let cell = document.getElementById("cell-" + highlightedSquares[i].row + "-" + highlightedSquares[i].col);
                cell.classList.remove("highlighted");
            }
            highlightedSquares = [];
        }

// End the game and display the winner
        function endGame(winner) {
            // TODO: Implement the logic for ending the game
        }

// Call the initialization function to start the game
        initializeBoard();
        renderBoard();
    </script>