AI game creator

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

No:19198

←

Prev Next

→

Make Chinese chess
Developer User7632｜Date and time 23/10/2 1:37:38
Build time 18.02 sec｜Game capacity 5.59KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <title>Chinese Chess</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        #chessboard {
            display: flex;
            flex-wrap: wrap;
            width: 720px;
            margin: 20px auto;
            background-color: #ECCD99;
            border: 2px solid #8C5832;
        }
        
        .cell {
            width: 90px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #F7E5C8;
            border: 1px solid #8C5832;
        }
        
        .cell.selected {
            background-color: #FCE3A8;
        }
    </style>
</head>
<body>
    <div id="chessboard"></div>
    
    <script>
        // Game Initialization
        let turn = 'red'; // Current turn: red or black
        let selectedPiece = null; // Currently selected piece element
        let selectedCoordinate = null; // Currently selected piece coordinate
        
        const chessPieces = [
            ['車', '馬', '象', '士', '將', '士', '象', '馬', '車'],
            ['', '', '', '', '', '', '', '', ''],
            ['', '砲', '', '', '', '', '', '砲', ''],
            ['卒', '', '卒', '', '卒', '', '卒', '', '卒'],
            ['', '', '', '', '', '', '', '', ''],
            ['', '', '', '', '', '', '', '', ''],
            ['兵', '', '兵', '', '兵', '', '兵', '', '兵'],
            ['', '炮', '', '', '', '', '', '炮', ''],
            ['', '', '', '', '', '', '', '', ''],
            ['車', '馬', '相', '仕', '帥', '仕', '相', '馬', '車'],
        ];
        
        function createChessboard() {
            const chessboardElement = document.getElementById('chessboard');
            
            for (let row = 0; row < 10; row++) {
                for (let col = 0; col < 9; col++) {
                    const cellElement = document.createElement('div');
                    cellElement.classList.add('cell');
                    cellElement.dataset.row = row;
                    cellElement.dataset.col = col;
                    cellElement.addEventListener('click', handleCellClick);
                    
                    const piece = chessPieces[row][col];
                    if (piece !== '') {
                        const pieceElement = document.createElement('span');
                        pieceElement.textContent = piece;
                        cellElement.appendChild(pieceElement);
                    }
                    
                    chessboardElement.appendChild(cellElement);
                }
            }
        }
        
        function handleCellClick(event) {
            const cellElement = event.target;
            const currentCoordinate = [parseInt(cellElement.dataset.row), parseInt(cellElement.dataset.col)];
            
            if (chessPieces[currentCoordinate[0]][currentCoordinate[1]] === '') {
                if (selectedPiece !== null) {
                    const isValidMove = isMoveValid(selectedCoordinate, currentCoordinate);
                    if (isValidMove) {
                        movePiece(selectedCoordinate, currentCoordinate);
                        selectedPiece.classList.remove('selected');
                        selectedPiece = null;
                        selectedCoordinate = null;
                        toggleTurn();
                    }
                }
            } else {
                if (selectedPiece === null) {
                    selectedPiece = cellElement;
                    selectedCoordinate = currentCoordinate;
                    selectedPiece.classList.add('selected');
                } else if (selectedPiece === cellElement) {
                    selectedPiece.classList.remove('selected');
                    selectedPiece = null;
                    selectedCoordinate = null;
                } else {
                    selectedPiece.classList.remove('selected');
                    selectedPiece = cellElement;
                    selectedCoordinate = currentCoordinate;
                    selectedPiece.classList.add('selected');
                }
            }
        }
        
        function isMoveValid(sourceCoordinate, targetCoordinate) {
            // Implement your move validation logic here
            return true;
        }
        
        function movePiece(sourceCoordinate, targetCoordinate) {
            const sourceRow = sourceCoordinate[0];
            const sourceCol = sourceCoordinate[1];
            const targetRow = targetCoordinate[0];
            const targetCol = targetCoordinate[1];
            
            const piece = chessPieces[sourceRow][sourceCol];
            
            chessPieces[sourceRow][sourceCol] = '';
            chessPieces[targetRow][targetCol] = piece;
            
            const sourceCellElement = document.querySelector(`.cell[data-row="${sourceRow}"][data-col="${sourceCol}"]`);
            const targetCellElement = document.querySelector(`.cell[data-row="${targetRow}"][data-col="${targetCol}"]`);
            
            const pieceElement = sourceCellElement.querySelector('span');
            targetCellElement.innerHTML = '';
            targetCellElement.appendChild(pieceElement);
            
            sourceCellElement.innerHTML = '';
        }
        
        function toggleTurn() {
            turn = (turn === 'red') ? 'black' : 'red';
        }
        
        createChessboard();
    </script>
</body>
</html>