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

プレーヤーが移動した後にデータを取得するために、行と正方形のクラスを取得してそれらの数値を抽出できますが、それは非常に非効率的な方法のように思えます。このようなグリッドを管理し、各ピース/ユニットの位置データを保存するより良い方法はありますか?

一般的なリクエストにより、これは 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配列を使用して配列ではなくオブジェクトに変更すると、少し簡単になります。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()の値に基づいてを使用してセルを見つけることができます。rowsqure

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 要素に添付する方法が必要なようです。

data-クラスを使用する代わりに (またはそれに加えて)、各テーブル セルとプレーヤー div に属性を追加して、データを分離することができます。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 に答える