Buat game catur sederhana dengan menghilangkan 2 kuda dan 2 pion di masing-masing kubu,papannya tetap 8×8's game | AI game creator

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

No:14589

76

Buat game catur sederhana dengan menghilangkan 2 k..ALL
Developer User6283｜Date and time 23/9/3 9:29:59
Build time 39.336 sec｜Game capacity 4.875KB｜

Berikut adalah contoh implementasi game catur sederhana dalam satu file HTML dengan menggunakan JavaScript dan pictogram:

♖	♘	♙	♗			♟	♝
♕	♞	♙	♗			♟	♞

				♞	♟
				♟	♞
♝	♟					♙	♕
♞	♟					♙	♖

Dalam game catur sederhana ini, dua kuda dan dua pion di setiap sisi dikeluarkan dari papan catur yang berukuran 8x8. Papan catur ditampilkan dengan menggunakan tabel HTML. Masing-masing sel pada tabel mewakili kotak pada papan catur. Pion dan kuda ditampilkan menggunakan karakter pictogram unicode untuk setiap sisi. Pemain dapat memilih dan memindahkan sebuah bidak dengan mengklik pada sel yang diinginkan. Bidak yang dipilih akan terhighlight dengan warna kuning, dan klik pada sel tujuan akan memindahkan bidak tersebut ke sel tujuan tersebut. Setelah pemindahan bidak, pemain tidak dapat melakukan pemindahan lainnya kecuali jika memilih ulang bidak yang akan dipindahkan. Harapannya, dengan menggunakan kode di atas, Anda dapat memainkan game sederhana ini dan bermain sebagai game yang selesai.

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

Berikut adalah contoh implementasi game catur sederhana dalam satu file HTML dengan menggunakan JavaScript dan pictogram:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            width: 60px;
            height: 60px;
            text-align: center;
            vertical-align: middle;
            font-size: 30px;
            color: black;
            border: 1px solid black;
        }
        .white {
            background-color: white;
        }
        .black {
            background-color: gray;
            color: white;
        }
    </style>
</head>
<body>
    <table id="chessboard">
        <tr>
            <td class="white">♖</td><td class="black">♘</td><td class="white">♙</td><td class="black">♗</td><td class="white"></td><td class="black"></td><td class="white">♟</td><td class="black">♝</td>
        </tr>
        <tr>
            <td class="black">♕</td><td class="white">♞</td><td class="black">♙</td><td class="white">♗</td><td class="black"></td><td class="white"></td><td class="black">♟</td><td class="white">♞</td>
        </tr>
        <tr>
            <td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td>
        </tr>
        <tr>
            <td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black">♞</td><td class="white">♟</td><td class="black"></td><td class="white"></td>
        </tr>
        <tr>
            <td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white">♟</td><td class="black">♞</td><td class="white"></td><td class="black"></td>
        </tr>
        <tr>
            <td class="black">♝</td><td class="white">♟</td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black">♙</td><td class="white">♕</td>
        </tr>
        <tr>
            <td class="white">♞</td><td class="black">♟</td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white">♙</td><td class="black">♖</td>
        </tr>
        <tr>
            <td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td><td class="black"></td><td class="white"></td>
        </tr>
    </table>

<script>
        var chessboard = document.getElementById("chessboard");
        var cells = chessboard.getElementsByTagName("td");

for (var i = 0; i < cells.length; i++) {
            cells[i].addEventListener("click", movePiece);
        }

function movePiece() {
            var selectedCell = this;
            var selectedPiece = selectedCell.innerHTML;

if (selectedPiece === "") {
                return;
            }

// Clear all cells
            for (var i = 0; i < cells.length; i++) {
                cells[i].style.backgroundColor = "";
            }

// Highlight selected piece
            selectedCell.style.backgroundColor = "yellow";

// Move the piece to the clicked cell
            for (var i = 0; i < cells.length; i++) {
                cells[i].addEventListener("click", function() {
                    var destinationCell = this;
                    destinationCell.innerHTML = selectedPiece;
                    selectedCell.innerHTML = "";
                    selectedCell.style.backgroundColor = "";

// Remove event listener to avoid moving multiple pieces
                    for (var i = 0; i < cells.length; i++) {
                        cells[i].removeEventListener("click", movePiece);
                    }
                });
            }
        }
    </script>
</body>
</html>
```

Dalam game catur sederhana ini, dua kuda dan dua pion di setiap sisi dikeluarkan dari papan catur yang berukuran 8x8. Papan catur ditampilkan dengan menggunakan tabel HTML. Masing-masing sel pada tabel mewakili kotak pada papan catur. Pion dan kuda ditampilkan menggunakan karakter pictogram unicode untuk setiap sisi.

Pemain dapat memilih dan memindahkan sebuah bidak dengan mengklik pada sel yang diinginkan. Bidak yang dipilih akan terhighlight dengan warna kuning, dan klik pada sel tujuan akan memindahkan bidak tersebut ke sel tujuan tersebut. Setelah pemindahan bidak, pemain tidak dapat melakukan pemindahan lainnya kecuali jika memilih ulang bidak yang akan dipindahkan.

Harapannya, dengan menggunakan kode di atas, Anda dapat memainkan game sederhana ini dan bermain sebagai game yang selesai.