0

Connect Four ゲームのテーブルを作成したいと思います。2 次元の 7*6 配列を設定して、それが理にかなっている場合は各配列を各セル内に配置したいと考えています。私は Javascript を初めて使用し、オブジェクト指向プログラミングの知識があまりありません。ゲームが青または黄色の行または列があるかどうかを確認できるように、各セルに xPosition と yPosition (座標、おそらくこれは「id」にある可能性があります) を与えようとしています。

これまでのコード、大まかな試み:

    function make()
    {
    var table = document.createElement("table");
    for (var i = 0; i < 6; i++)
    {
    var row = table.inserRow();
    for (var j = 0; j < 5; j++)
    {
    var cell = row.insertCell;
    }
    document.body.appendChild(table);
    }
    }
4

1 に答える 1

1

jQueryで書かれた非常に迅速なソリューション。HTML全体を貼り付けたので、htmlファイルとして保存してブラウザで開くことができます。セルをクリックして、座標 (0 ベース) を表示できます。

<html>
    <head>
        <title>GRID</title>
        <style type="text/css">
            table tr td { width: 50px; height: 50px; background-color: silver; border: 1px solid black; }
            table tr td.over { background-color: yellow; }
            table tr td.active { background-color: red; }
            .controls { padding: 20px; }
        </style>
    </head>
    <body>
        <div class="controls">
            <a href="javascript:void(0)" data-move="[-1, 0]">left</a>
            <a href="javascript:void(0)" data-move="[0, -1]">top</a>
            <a href="javascript:void(0)" data-move="[1, 0]">right</a>
            <a href="javascript:void(0)" data-move="[0, 1]">bottom</a>
            <a href="javascript:void(0)" data-move="[-1, -1]">topleft</a>
            <a href="javascript:void(0)" data-move="[1, -1]">topright</a>
            <a href="javascript:void(0)" data-move="[1, 1]">bottomright</a>
            <a href="javascript:void(0)" data-move="[-1, 1]">bottomleft</a>
        </div>
        <table></table>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            var rows = 6,
                cols = 7;

            for(var i = 0; i < rows; i++) {
                $('table').append('<tr></tr>');
                for(var j = 0; j < cols; j++) {
                    $('table').find('tr').eq(i).append('<td></td>');
                    $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
                }
            }

            $('table tr td').mouseover(function() {
                $(this).addClass('over');
            }).mouseout(function() {
                $(this).removeClass('over');
            }).click(function() {
                $(this).addClass('active');
            });

            $(".controls a").click(function() {
                var $active = $("table tr td.active");
                if($active.length > 0) {
                    var move = $.parseJSON($(this).attr('data-move'));
                    if(move.length >= 2) {
                        $active.each(function() {
                            var row = parseInt($(this).attr('data-row')) + move[1],
                                col = parseInt($(this).attr('data-col')) + move[0];
                            if(col >= cols) col = cols - 1;
                            if(col < 0) col = 0;
                            if(row >= rows) row = rows - 1;
                            if(row < 0) row = 0;
                            $(this).removeClass('active');
                            $('table tr').eq(row).find('td').eq(col).addClass('active');
                        });
                    }
                }
            });
        });
        </script>
    </body>
</html>

rows変数を変更すると、colsより大きなグリッドを描画できることに注意してください。

controls方向を操作できるように、ボタン付きの div を追加しました。まず、要素をアクティブとしてマークする必要があり、クリックして移動できます。

複数のフィールドをマークして一度に移動できるというバグ (または私の意見では機能) が 1 つあります。

始めるのに良いベースです！

于 2013-05-15T06:54:12.290 に答える