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

No:1729

175

←

Prev Next

→

Brazilian jiu-jitsu
Developer User3345｜Date and time 23/6/18 23:16:49
Build time 38.518 sec｜Game capacity 4.067KB｜

Script

の駒落ち対局アプリを作成した。

駒落ち対局アプリ

このアプリは駒落ちの状態で、白王と黒王と1枚ずつ、白飛車と8枚の白歩兵、黒飛車と8枚の黒歩兵の駒が初期位置に置かれている。ボタンをクリックすると、そのマスの駒が何かをアラートで表示する。リセットボタンで対局前の状態に戻せる。スマホでも遊びやすいように、ボタンのサイズとフォントサイズを大きくし、絵文字を使って視認性を高めた。

←

Prev　Next

→ 　

Back　

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

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

の駒落ち対局アプリを作成した。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>駒落ち対局アプリ</title>
        <style>
            body {
                font-size: 20px;
                text-align: center;
            }
            button {
                font-size: 20px;
                background-color: #4CAF50;
                color: white;
                border: none;
                border-radius: 8px;
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <h1>駒落ち対局アプリ</h1>
        <div id="board"></div>
        <p>
            <button id="start">対局開始</button>
            <button id="reset">リセット</button>
        </p>
        <script>
            // 初期局面の設定
            const initialSetup = {
                "h1": null,
                "g1": "king",
                "h2": null,
                "g2": "rook",
                "f2": "pawn",
                "e2": "pawn",
                "d2": "pawn",
                "c2": "pawn",
                "b2": "pawn",
                "a2": "pawn",
                "h8": null,
                "g8": "rook",
                "f8": "pawn",
                "e8": "pawn",
                "d8": "pawn",
                "c8": "pawn",
                "b8": "pawn",
                "a8": "king"
            };
            // 駒の画像を定義
            const pieces = {
                "king": "♔",
                "rook": "♖",
                "pawn": "♙"
            };
            // 盤面を表示する関数
            function renderBoard(setup) {
                let board = document.getElementById("board");
                board.innerHTML = "";
                for (let i = 8; i >= 1; i--) {
                    for (let j = 'a'.charCodeAt(0); j <= 'h'.charCodeAt(0); j++) {
                        let square = `${String.fromCharCode(j)}${i}`;
                        let piece = setup[square];
                        let img = "";
                        if (piece !== null) {
                            img = pieces[piece];
                        }
                        board.innerHTML += `<button id="${square}">${img}</button>`;
                    }
                    board.innerHTML += "<br>";
                }
            }
            // クリックされた時に呼ばれる関数
            function handleClick(event) {
                let square = event.target.id;
                let piece = initialSetup[square];
                if (piece !== null) {
                    alert(`ここには${pieces[piece]}があります。`);
                } else {
                    alert(`ここには何もありません。`);
                }
            }
            // リセットボタンが押された時に呼ばれる関数
            function handleReset() {
                renderBoard(initialSetup);
            }
            // 対局開始ボタンが押された時に呼ばれる関数
            function handleStart() {
                renderBoard(initialSetup);
                let squares = document.getElementsByTagName("button");
                for (let i = 0; i < squares.length; i++) {
                    squares[i].addEventListener("click", handleClick);
                }
            }
            document.getElementById("reset").addEventListener("click", handleReset);
            document.getElementById("start").addEventListener("click", handleStart);
        </script>
    </body>
</html>