0

我想为 Connect Four 游戏创建一个表格，我想通过设置一个二维 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，这样你就可以玩方向了。首先，您需要将元素标记为活动的，然后您可以单击以移动它们。

有一个错误（或我认为的功能）可以标记多个字段并一次移动它们。

这是一个很好的开始！

于 2013-05-15T06:54:12.290 回答