[JavaScript] 将棋の盤面を再現する

JavaScript

だいぶ前の記事になりますが、Javaで将棋のゲームを制作しました。

今回はJavaScriptで将棋のゲームを制作していきたなと思っています。

まずは盤面の再現からです!

ソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #board {
            background-color:black;
        }
        td.unit {
            background-color: #deb887;
            width: 30px;
            height: 30px;
        }
    </style>
    <script>

        function start() {
            var b = document.getElementById("board");
            for (var i = 0 ; i < 9 ; i++) {
                var tr = document.createElement("tr");
                for (var j = 0 ; j < 9 ; j++) {
                    var td = document.createElement("td");
                    td.className = "unit";
                    td.id = "unit" + "[" + i + "]" + "[" + j + "]";
                    td.onclick = clicked;
                    tr.appendChild(td);
                }
                b.appendChild(tr);
            }
        }

        function clicked(e) {
            document.getElementById("info").textContent = e.target.id + "をクリックしましたよ!";
        }

    </script>
</head>
<body onload="start()">
    <table id="board"></table>
    <h2 id="info"></h2>
</body>
</html>

実行結果

こんな感じになりました。

盤面の再現とマス目のクリックに反応できるようにしました。

Javaと比べると比較的書きやすいのかなと思っています。

今回は以上になります。

ではまた。

コメント

タイトルとURLをコピーしました