checker's game | AI game creator

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

No:4511

1596

checker
Developer AI絵師｜Date and time 23/6/28 3:10:14
Build time 49.108 sec｜Game capacity 4.544KB｜

HTMLとJavaScriptで実装されたチェッカーゲームを作成しました。部分的にゲーム化されており、スマートフォンでもプレイ可能です。絵文字は使用していませんが、CSSを使用して盤面を可視化しています。以下がコードです。

このゲームでは、初期状態で赤と黒の駒が配置されたチェッカーボードが表示されます。プレーヤーは交互に自分の駒をクリックして動かします。動かす場所が無効な場合、アラートが表示され、プレーヤーのターンが終了し、先行プレーヤーに戻ります。コマが相手の陣地の最も外側の列に到達した場合、ジャンプ可能になり、黄色いボーダーで強調表示されます。対応する相手のコマがある場合、ジャンプされ、取り除かれます。以上です。初めてゲームをプログラミングした初心者の開発者には、理解しやすく、実装しやすいように、思考プロセスをできる限り説明しました。

→ 　

1　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

HTMLとJavaScriptで実装されたチェッカーゲームを作成しました。

部分的にゲーム化されており、スマートフォンでもプレイ可能です。絵文字は使用していませんが、CSSを使用して盤面を可視化しています。

以下がコードです。

```
<!DOCTYPE html>
    <html>
    <head>
    <style>
    #board {
    margin: auto;
    width: 50vh;
    height: 50vh;
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    }
    
    .cell {
    width: 12.5%;
    height: 12.5%;
    }
    
    .red {
    background-color: red;
    }
    
    .black {
    background-color: black;
    }
    
    .piece {
    width: 80%;
    height: 80%;
    margin: auto;
    border-radius: 50%;
    }
    </style>
    </head>
    <body onload="init()">
    <div id="board"></div>
    
    <script>
    let board = [];
    let currentPiece = null;
    let player = "red";
    
    
    function init() {
    for (let i = 0; i < 8; i++) {
    board[i] = new Array(8);
    }
    
    for (let i = 0; i < 8; i++) {
    for (let j = 0; j < 8; j++) {
    let cell = document.createElement("div");
    cell.classList.add("cell");
    if ((i + j) % 2 == 0) {
    cell.classList.add("black");
    }
    cell.id = i.toString() + j.toString();
    cell.addEventListener("click", movePiece);
    document.getElementById("board").appendChild(cell);
    if (i <= 2 && (i + j) % 2 == 1) {
    board[i][j] = "red";
    let piece = document.createElement("div");
    piece.classList.add("piece");
    piece.style.backgroundColor = "red";
    cell.appendChild(piece);
    }
    else if (i >= 5 && (i + j) % 2 == 1) {
    board[i][j] = "black";
    let piece = document.createElement("div");
    piece.classList.add("piece");
    piece.style.backgroundColor = "black";
    cell.appendChild(piece);
    }
    }
    }
    }
    
    function movePiece() {
    let row = parseInt(this.id.charAt(0));
    let col = parseInt(this.id.charAt(1));
    if (currentPiece == null) {
    if (board[row][col] != player) {
    alert("It's not your turn");
    return;
    }
    else {
    currentPiece = this.firstChild;
    this.innerHTML = "";
    }
    }
    else {
    let oldRow = parseInt(currentPiece.parentNode.id.charAt(0));
    let oldCol = parseInt(currentPiece.parentNode.id.charAt(1));
    if ((Math.abs(row - oldRow) == 1 && Math.abs(col - oldCol) == 1) ||
    (Math.abs(row - oldRow) == 2 && Math.abs(col - oldCol) == 2)) {
    if (board[row][col] != null) {
    alert("Invalid move");
    currentPiece.parentNode.appendChild(currentPiece);
    currentPiece = null;
    return;
    }
    else if (player == "red" && currentPiece.style.backgroundColor == "red") {
    if (row == 0) {
    currentPiece.style.border = "4px solid yellow";
    }
    currentPiece.parentNode.removeChild(currentPiece);
    this.appendChild(currentPiece);
    if (Math.abs(row - oldRow) == 2) {
    board[(row + oldRow) / 2][(col + oldCol) / 2] = null;
    }
    board[row][col] = "red";
    board[oldRow][oldCol] = null;
    currentPiece = null;
    player = "black";
    }
    else if (player == "black" && currentPiece.style.backgroundColor == "black") {
    if (row == 7) {
    currentPiece.style.border = "4px solid yellow";
    }
    currentPiece.parentNode.removeChild(currentPiece);
    this.appendChild(currentPiece);
    if (Math.abs(row - oldRow) == 2) {
    board[(row + oldRow) / 2][(col + oldCol) / 2] = null;
    }
    board[row][col] = "black";
    board[oldRow][oldCol] = null;
    currentPiece = null;
    player = "red";
    }
    }
    else {
    alert("Invalid move");
    currentPiece.parentNode.appendChild(currentPiece);
    currentPiece = null;
    }
    }
    }
    </script>
    </body>
    </html>
```

このゲームでは、初期状態で赤と黒の駒が配置されたチェッカーボードが表示されます。
プレーヤーは交互に自分の駒をクリックして動かします。
動かす場所が無効な場合、アラートが表示され、プレーヤーのターンが終了し、先行プレーヤーに戻ります。
コマが相手の陣地の最も外側の列に到達した場合、ジャンプ可能になり、黄色いボーダーで強調表示されます。
対応する相手のコマがある場合、ジャンプされ、取り除かれます。

以上です。初めてゲームをプログラミングした初心者の開発者には、理解しやすく、実装しやすいように、思考プロセスをできる限り説明しました。