AI game creator

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

No:24402

←

Prev Next

→

Chess
Developer User9760｜Date and time 23/11/8 19:42:02
Build time 83.407 sec｜Game capacity 3.97KB｜

Script

Sure! Here's a simple implementation of Chess as a single HTML file using JavaScript. Please note that this is a basic version of the game and may not include all the advanced rules and features of a complete chess game.

This implementation creates an 8x8 chessboard using HTML `<div>` elements and populates it with chess pieces represented by pictograms (unicode characters). The board is interactive, allowing you to click on a piece to see its details and highlights the clicked cell. However, the game logic for moving the pieces and checking the validity of moves is not implemented here. You can customize the logic as per your requirement. Please note that this is just a basic foundation for a chess game and may require additional work to fully implement the rules and features of the game.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Chess</title>
    <style>
        #board {
            display: grid;
            grid-template: repeat(8, 1fr) / repeat(8, 1fr);
            width: 400px;
            height: 400px;
        }
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            cursor: pointer;
        }
        .cell.white { background-color: #f0d9b5; }
        .cell.black { background-color: #b58863; color: #fff; }
    </style>
</head>
<body>
    <div id="board"></div>

const initialState = [
            ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
            ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', ''],
            ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
            ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
        ];

let currentState = initialState;

function createBoard() {
            const board = document.getElementById('board');

currentState.forEach((row, rowIndex) => {
                row.forEach((piece, columnIndex) => {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.classList.add(((rowIndex + columnIndex) % 2 === 0) ? 'white' : 'black');
                    cell.innerHTML = piece;
                    cell.addEventListener('click', () => handleCellClick(rowIndex, columnIndex));
                    board.appendChild(cell);
                });
            });
        }

function handleCellClick(row, col) {
            clearHighlights();
            const piece = currentState[row][col];

if (piece === '') return; // Ignore empty cells

highlightCell(row, col); // Highlight the clicked cell

// Implement your logic for moving pieces, checking validity of moves, etc.

// Example: Printing piece details for testing
            console.log(`Clicked Piece: ${pieces[piece]}`);
        }

function highlightCell(row, col) {
            document.querySelector(`#board > div:nth-child(${8 - row}) > div:nth-child(${col + 1})`).classList.add('highlight');
        }

function clearHighlights() {
            const highlightedCells = document.querySelectorAll('#board .highlight');
            highlightedCells.forEach(cell => cell.classList.remove('highlight'));
        }

// Start the game
        createBoard();
    </script>
</body>
</html>
```

Please note that this is just a basic foundation for a chess game and may require additional work to fully implement the rules and features of the game.