2

我正在制作棋盘游戏，我正在寻找一种更好的方法来管理棋盘上的棋子。我现在拥有的是一种将它们从坐标放置在板上的方法。这是存储玩家数据的 JSON 对象：

"players" : {
    "1" : {
        "id" : 1,
        "name": "ilya",
        "units" : [
            {
                "id" : 1,
                "row" : 1,
                "square" : 2
            },{
                "id" : 2,
                "row" : 2,
                "square" : 1
            },{
                "id" : 3,
                "row" : 3,
                "square" : 1
            }
        ]
    },

我只是通过创建一个 div 并将其附加到相应的板正方形 div 并使用 jquery-ui 移动它们来放置它们：

$('<div/>', {
    class: 'draggable player' + player + ' unit unit' + unit,
}).appendTo('.row' + row + ' .square' + square + ' .unitPosition');

row并且square是一个表并且unitPosition是一个助手类square

现在要在玩家移动后取回数据，我可以取回 row 和 square 类并提取它们的数字，但在我看来这是一种非常低效的方式。有没有更好的方法来管理这样的网格并存储每件/单元的位置数据？

应普遍要求，这是 html（示例的缩写）：

<div id="board">
    <div class="clearfix row row1">
        <div class="square square1">
            <div class="unitPosition"></div>
        </div>
        <div class="square square2">
            <div class="unitPosition"></div>
        </div>
        <div class="square square3">
            <div class="unitPosition"></div>
        </div>
    </div>
    <div class="clearfix row row2">
        <div class="square square1">
            <div class="unitPosition"></div>
        </div>
        <div class="square square2">
            <div class="unitPosition"></div>
        </div>
        <div class="square square3">
            <div class="unitPosition"></div>
        </div>
    </div>
</div>

董事会： 在此处输入图像描述

4

2 回答 2

2

为了更新数据对象，如果您使用每个元素units的 as 键更改为对象而不是数组，它会更简单一些id

"players" : {
    "1" : {
        "id" : 1,
        "name": "ilya",
        "units" : {
            1: {
                "id" : 1,
                "row" : 1,
                "square" : 2
            },
            2:{
                "id" : 2,
                "row" : 2,
                "square" : 1
            }        
    }

您可以使用index()方法来获取行和单元格索引。为每个元素使用data-属性会有很大帮助。

当您读取数据时，您可以eq()根据数据的值row和squre数据中的值找到使用的单元格。

var $cell = $('tr').eq( row ).find('td').eq( square);
$('<div data-player="'+player.id+'" data-unit_id="'+unit+'"/>', {
    class: 'draggable player' + player + ' unit unit' + unit,
}).appendTo($cell);

当您将单位放到一个新的方格中时：

/* pseudo code, not sure what your drop/append code looks like*/

var $cell= /* your logic to define the cell being placed in*/
var square= $cell.index();
var row= $cell.parent().index();
/* read player and unit from "data-" attributes of DIV*/
var unit= $(this).data('unit_id'), player= $(this).data('player');

现在使用修改后的数据结构很容易更新主对象players：

players[player].units[unit].row=row;
players[player].units[unit].square=square;

简单的单元格/行索引演示：http: //jsfiddle.net/buh4h/

API 参考：

http://api.jquery.com/index/

http://api.jquery.com/eq/

于 2013-01-12T17:20:23.433 回答
1

我们对您的代码了解不多，但您似乎希望有一种方法可以将数据附加到 HTML 元素，而不必依赖类，也不必从类名中提取数字。

您可以向每个表格单元格和播放器 div 添加data-属性以分隔数据，而不是（或除此之外）使用类。你的 HTML 会变成这样：

<table>
    <tr>
        <td data-row="1" data-col="1">
            <div data-player="1"></div>
        </td>
        <!-- etc -->
    </tr>
    <!-- etc -->
</table>

然后，您可以通过读取这些属性或使用以下.data()方法使用 jQuery 检索这些值：

// Assuming you're inside an event handler and "this" is a td
var row = $(this).attr('data-row');
// or
var row = $(this).data('row');
于 2013-01-12T16:50:44.363 回答