AI game creator

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

No:31125

←

Prev Next

→

Chess
Developer The maker｜Date and time 23/12/25 5:25:17
Build time 27.77 sec｜Game capacity 4.347KB｜

Script

This is a simple implementation of a chess game using HTML, JavaScript, and pictograms. The code defines the Chess object that handles the game logic. It initializes the chessboard, draws the board on the canvas, and listens for mouse clicks to select and move pieces on the board. The code represents the chess pieces using pictograms (e.g., "♔" for white king, "♛" for black queen, etc.). The game starts when the HTML file is opened in a web browser and players can interact with it using a smartphone.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Chess Game</title>
</head>
<body>
    <canvas id="chessBoard" width="480" height="480"></canvas>

// Initialize the chessboard
            init: function () {
                this.canvas = document.getElementById("chessBoard");
                this.ctx = this.canvas.getContext("2d");
                this.drawBoard();
                this.canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
            },

// Draw the chessboard
            drawBoard: function () {
                for (let row = 0; row < this.boardSize; row++) {
                    for (let col = 0; col < this.boardSize; col++) {
                        const x = col * this.cellSize;
                        const y = row * this.cellSize;

this.ctx.fillStyle = (row + col) % 2 === 0 ? "#f0d9b5" : "#b58863";
                        this.ctx.fillRect(x, y, this.cellSize, this.cellSize);
                        this.ctx.font = "40px Arial";
                        this.ctx.fillStyle = "#000";
                        this.ctx.fillText(this.board[row][col], x + 20, y + 45);
                    }
                }
            },

// Handle mouse down event
            handleMouseDown: function (event) {
                const rect = this.canvas.getBoundingClientRect();
                const mouseX = event.clientX - rect.left;
                const mouseY = event.clientY - rect.top;

const clickedCol = Math.floor(mouseX / this.cellSize);
                const clickedRow = Math.floor(mouseY / this.cellSize);

if (this.selectedPiece) {
                    this.movePiece(clickedRow, clickedCol);
                } else {
                    this.selectPiece(clickedRow, clickedCol);
                }
            },

// Select a piece on the chessboard
            selectPiece: function (row, col) {
                const piece = this.board[row][col];

if (piece && piece.charAt(0) === this.currentTurn.charAt(0)) {
                    this.selectedPiece = {
                        row: row,
                        col: col
                    };
                }
            },

// Move a selected piece to a new position
            movePiece: function (row, col) {
                const selectedPiece = this.selectedPiece;
                const piece = this.board[selectedPiece.row][selectedPiece.col];
                
                this.board[selectedPiece.row][selectedPiece.col] = "";
                this.board[row][col] = piece;
                this.selectedPiece = null;
                this.currentTurn = this.currentTurn === "white" ? "black" : "white";
                this.drawBoard();
            }
        };

// Start the game
        Chess.init();
    </script>
</body>
</html>
```