我正在制作一款棋盘游戏,我正在寻找一种更好的方法来管理棋盘上的棋子。我现在拥有的是一种从坐标将它们放置在板上的方法。这是存储玩家数据的 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
中的辅助类
现在,为了在玩家移动后取回数据,我可以取回行和方类并提取它们的数字,但在我看来,这是一种非常低效的方法。有没有更好的方法来管理这样的网格并存储每个部件/单元的位置数据?
根据大众的要求,这是 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>
董事会:
最佳答案
为了更新数据对象,如果将 units
更改为对象而不是使用 id
作为每个元素的键的数组
"players" : {
"1" : {
"id" : 1,
"name": "ilya",
"units" : {
1: {
"id" : 1,
"row" : 1,
"square" : 2
},
2:{
"id" : 2,
"row" : 2,
"square" : 1
}
}
您可以使用index()
方法来获取行和单元格索引。为每个元素使用 data-
属性会有很大帮助。
当您读取数据时,您可以根据数据中的 row
和 squre
的值使用 eq()
找到单元格。
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);
当您将单位放入新方 block 时:
/* 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 引用:
关于javascript - 获取div在网格上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14295388/