Chess board game with pictograms representing Rooks, Knights, Bishops, Kings, Queens, and Pawns in respective black and white colors. Just like chess. Turn-based. I tap and drag my white chess piece and then it is the CPU's turn.'s game

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

No:35225

←

Prev Next

→

Chess board game with pictograms representing Rook..ALL
Developer ZAPSTRON｜Date and time 24/1/13 16:53:37
Build time 20.651 sec｜Game capacity 6.15KB｜

Script

Here is a basic implementation of a chess game using pictograms and JavaScript. The game follows the traditional rules of chess and allows the user to play against the CPU. The CPU moves are randomly generated for simplicity.

Please note that this implementation is very basic and does not handle all the rules of chess or complex gameplay logic. It only demonstrates the basic drag and drop functionality for moving the pieces. You can replace the `src` attributes of the image tags with the actual paths to your pictograms representing the chess pieces.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Chess Game</title>
    <style>
        .chessboard {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            grid-template-rows: repeat(8, 50px);
            gap: 2px;
        }
        
        .board-square {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .piece {
            height: 40px;
            width: 40px;
        }
    </style>
</head>
<body>
    <div class="chessboard">
        
        <div class="board-square" id="a8"></div>
        <div class="board-square" id="b8"></div>
        <div class="board-square" id="c8"></div>
        <div class="board-square" id="d8"></div>
        <div class="board-square" id="e8"></div>
        <div class="board-square" id="f8"></div>
        <div class="board-square" id="g8"></div>
        <div class="board-square" id="h8"></div>
        
        
        
        
        <img src="rook-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wr1">
        <img src="knight-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wk1">
        <img src="bishop-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wb1">
        <img src="queen-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wq">
        <img src="king-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wk">
        <img src="bishop-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wb2">
        <img src="knight-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wk2">
        <img src="rook-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wr2">
        
        
        
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp1">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp2">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp3">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp4">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp5">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp6">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp7">
        <img src="pawn-white.png" draggable="true" ondragstart="dragPiece(event)" class="piece" id="wp8">
        
        
        <img src="rook-black.png" class="piece" id="br1">
        <img src="knight-black.png" class="piece" id="bk1">
        <img src="bishop-black.png" class="piece" id="bb1">
        <img src="queen-black.png" class="piece" id="bq">
        <img src="king-black.png" class="piece" id="bk">
        <img src="bishop-black.png" class="piece" id="bb2">
        <img src="knight-black.png" class="piece" id="bk2">
        <img src="rook-black.png" class="piece" id="br2">
        
        
        
        <img src="pawn-black.png" class="piece" id="bp1">
        <img src="pawn-black.png" class="piece" id="bp2">
        <img src="pawn-black.png" class="piece" id="bp3">
        <img src="pawn-black.png" class="piece" id="bp4">
        <img src="pawn-black.png" class="piece" id="bp5">
        <img src="pawn-black.png" class="piece" id="bp6">
        <img src="pawn-black.png" class="piece" id="bp7">
        <img src="pawn-black.png" class="piece" id="bp8">
    </div>
    
    <script>
        let selectedPiece = null;
        
        function dragPiece(event) {
            selectedPiece = event.target.id;
        }
        
        function dropPiece(event) {
            event.preventDefault();
            if (selectedPiece) {
                event.target.appendChild(document.getElementById(selectedPiece));
                selectedPiece = null;
                cpuMove();
            }
        }
        
        function cpuMove() {
            // Randomly select a black piece
            const blackPieces = document.querySelectorAll('.piece:not([draggable])');
            const randomIndex = Math.floor(Math.random() * blackPieces.length);
            const randomPiece = blackPieces[randomIndex];
            
            // Get a random destination square
            const squares = document.getElementsByClassName('board-square');
            const randomSquare = squares[Math.floor(Math.random() * squares.length)];
            
            // Move the piece
            randomSquare.appendChild(randomPiece);
        }
        
        function allowDrop(event) {
            event.preventDefault();
        }
        
        function startGame() {
            const boardSquares = document.getElementsByClassName('board-square');
            
            for (let i = 0; i < boardSquares.length; i++) {
                boardSquares[i].addEventListener('drop', dropPiece);
                boardSquares[i].addEventListener('dragover', allowDrop);
            }
        }
        
        // Start the game when the page loads
        window.onload = startGame;
    </script>
</body>
</html>
```