0

jqueryを使用して、ドラッグ可能なピースでチェス盤を作成しようとしています。ピースは新しい宛先の正方形にスナップします。いろいろなコンセプトを試してきましたが、何もできませんでした。

私はいくつかの基本的な概念が欠けていると思います。

ボードにいくつかのピースをロードしてドラッグ可能にするコードをいくつか作成しましたが、手動で計算しないとグリッドを定義する方法を理解できませんでした。以下の手動システムを使用してピースを配置できます。forループと多次元配列の優れた候補のようです。最終的には言いたいのですが

a1 = [0+"%",0+((7/8)*100)+"%"],[0+((1/8)*100)+"%"], a2 = [0+((2/8)*100)+"%",0+((7/8)*100)+"%"]

そのため、後ですべてのランクとファイルに代数表記などを使用できます。

function initCoords(){

var aFile = [[0+"%",0+((7/8)*100)+"%"],[0+((1/8)*100)+"%",0+((7/8)*100)+"%"],[0+((2/8)*100)+"%",0+((7/8)*100)+"%"],[0+((3/8)*100)+"%",0+((7/8)*100)+"%"],[0+((4/8)*100)+"%",0+((7/8)*100)+"%"],[0+((5/8)*100)+"%",0+((7/8)*100)+"%"],[0+((6/8)*100)+"%",0+((7/8)*100)+"%"],[0+((7/8)*100)+"%",0+((7/8)*100)+"%"]];

var bFile = [[0+"%",0+((6/8)*100)+"%"],[0+((1/8)*100)+"%",0+((6/8)*100)+"%"],[0+((2/8)*100)+"%",0+((6/8)*100)+"%"],[0+((3/8)*100)+"%",0+((6/8)*100)+"%"],[0+((4/8)*100)+"%",0+((6/8)*100)+"%"],[0+((5/8)*100)+"%",0+((6/8)*100)+"%"],[0+((6/8)*100)+"%",0+((6/8)*100)+"%"],[0+((7/8)*100)+"%",0+((6/8)*100)+"%"]];

var cFile = [[0+"%",0+((5/8)*100)+"%"],[0+((1/8)*100)+"%",0+((5/8)*100)+"%"],[0+((2/8)*100)+"%",0+((5/8)*100)+"%"],[0+((3/8)*100)+"%",0+((5/8)*100)+"%"],[0+((4/8)*100)+"%",0+((5/8)*100)+"%"],[0+((5/8)*100)+"%",0+((5/8)*100)+"%"],[0+((6/8)*100)+"%",0+((5/8)*100)+"%"],[0+((7/8)*100)+"%",0+((5/8)*100)+"%"]];

var dFile = [[0+"%",0+((4/8)*100)+"%"],[0+((1/8)*100)+"%",0+((4/8)*100)+"%"],[0+((2/8)*100)+"%",0+((4/8)*100)+"%"],[0+((3/8)*100)+"%",0+((4/8)*100)+"%"],[0+((4/8)*100)+"%",0+((4/8)*100)+"%"],[0+((5/8)*100)+"%",0+((4/8)*100)+"%"],[0+((6/8)*100)+"%",0+((4/8)*100)+"%"],[0+((7/8)*100)+"%",0+((4/8)*100)+"%"]];

var eFile = [[0+"%",0+((3/8)*100)+"%"],[0+((1/8)*100)+"%",0+((3/8)*100)+"%"],[0+((2/8)*100)+"%",0+((3/8)*100)+"%"],[0+((3/8)*100)+"%",0+((3/8)*100)+"%"],[0+((4/8)*100)+"%",0+((3/8)*100)+"%"],[0+((5/8)*100)+"%",0+((3/8)*100)+"%"],[0+((6/8)*100)+"%",0+((3/8)*100)+"%"],[0+((7/8)*100)+"%",0+((3/8)*100)+"%"]];

var fFile = [[0+"%",0+((2/8)*100)+"%"],[0+((1/8)*100)+"%",0+((2/8)*100)+"%"],[0+((2/8)*100)+"%",0+((2/8)*100)+"%"],[0+((3/8)*100)+"%",0+((2/8)*100)+"%"],[0+((4/8)*100)+"%",0+((2/8)*100)+"%"],[0+((5/8)*100)+"%",0+((2/8)*100)+"%"],[0+((6/8)*100)+"%",0+((2/8)*100)+"%"],[0+((7/8)*100)+"%",0+((2/8)*100)+"%"]];

var gFile = [[0+"%",0+((1/8)*100)+"%"],[0+((1/8)*100)+"%",0+((1/8)*100)+"%"],[0+((2/8)*100)+"%",0+((1/8)*100)+"%"],[0+((3/8)*100)+"%",0+((1/8)*100)+"%"],[0+((4/8)*100)+"%",0+((1/8)*100)+"%"],[0+((5/8)*100)+"%",0+((1/8)*100)+"%"],[0+((6/8)*100)+"%",0+((1/8)*100)+"%"],[0+((7/8)*100)+"%",0+((1/8)*100)+"%"]];

var hFile = [[0+"%",0+((0/8)*100)+"%"],[0+((1/8)*100)+"%",0+((0/8)*100)+"%"],[0+((2/8)*100)+"%",0+((0/8)*100)+"%"],[0+((3/8)*100)+"%",0+((0/8)*100)+"%"],[0+((4/8)*100)+"%",0+((0/8)*100)+"%"],[0+((5/8)*100)+"%",0+((0/8)*100)+"%"],[0+((6/8)*100)+"%",0+((0/8)*100)+"%"],[0+((7/8)*100)+"%",0+((0/8)*100)+"%"]];

}
4

2 に答える 2

2

論理ビューとグラフィカルビューの分離について他のポスターに同意しますが、コード内の共通点を見つけて除外できるようにするために、提示された質問に答えたいと思います。

このようなデータセットの作成を自動化しようとするときは、共通点とシーケンスを探す必要があります。そうすることで、まともな解決策に向けて反復できるはずです。

まず、xFile（xはah）という変数のセットを用意するのではなく、プロパティahを使用して「Files」というオブジェクトを作成してみませんか。

files = {
  a:[],
  b:[],
  ...
}

それでも、必要以上に複雑になる可能性があります。作成を容易にするために、a = 0、b = 1などの処理がはるかに簡単な2D配列が必要になる場合があります（以下を参照、h = 0、 g = 1 ...はさらに簡単です）。

したがって、次の明らかな共通点は、提示する各配列の最初のセルが同じパターンに従うことです[0+"%",0+((n/8)*100)+"%"]。ここで、nはahから7->0になります。したがって、最初の各セルを簡単に生成できます。

files = [];
for (i = 7; i >= 0; i -= 1) {
    files[Math.abs(i-7)] = [0+"%",0+((i/8)*100)+"%"]
}

さて、これは少し醜いです、数が配列と反対の方向に増加するので、Math.absはそこに呼びます。これを行う方法は他にもありますが、IMOはすべてかなり醜いです。代わりに、配列の順序を逆にして、ahではなくhaを実行することを検討できます。

files = [];
for (n = 0; n <= 7; n += 1) {
    files[n] = [0+"%",0+((n/8)*100)+"%"]
}

OK、この共通点を見て、次のセルを見ることができます。これらはすべて[0+((1/8)*100)+"%",0+((n/8)*100)+"%"]2番目と[0+((2/8)*100)+"%",0+((n/8)*100)+"%"]3番目で同じですが、どちらもnahの場合は0〜7です。

実際、ここには別の共通点があります。どちらも前からの場所であり、ランク（1〜7）で
あると説明できます。[0+((j/8)*100)+"%",0+((i/8)*100)+"%"]inj

さらに、セル0とセル1〜7の違いは、セル1〜7はすべて。0+((i/8)*100)+で始まるのに対し、セル0は。で始まること0+です。しかし、何((0/8)*100)ですか？です0！

したがって、特別な場合はありません。各セルは次のように定義できます。[0+((j/8)*100)+"%",0+((i/8)*100)+"%"]

したがって、前からループを取得すると、内部ループでループを拡張できます。したがって、次のようになります。

files = [];
for (i = 0; i <= 7; i += 1) {
    files[i] = []
    for (j = 0; j <=7; j += 1) {
        files[i][j] = [0+((j/8)*100)+"%",0+((i/8)*100)+"%"]
    }
}

上記のコードはテストされていないので、エラーが発生したことを軽視しませんが、上記のデータを使用して配列を生成する必要があります（ただし、ahではなくhaから実行されます）

于 2012-07-25T10:12:20.287 に答える
1

あなたはこれを「厄介な」方法でやっています！

次のような配列でチェス盤を表すことができます

var board = [];  //make a new array

//push 8 new arrays of length 8 onto this board array - ie 8 x 8
for (var i=0; i<8; i++) board.push(new Array(8));

この配列内の各場所には、任意のJavascriptオブジェクトを格納できます。ピースを表す簡単な方法から始めることをお勧めします。

ボードの論理表現からグラフィカルコンポーネントを分離する必要があります。これは、現在行っているとは思えません。

おそらく、次のようなクラスがあります。

function piece(col, typ) {
    var colour = col, 
        pieceType = typ;

    return {
        colour : colour,
        pieceType : typ
    }
}

次に、あなたは言うことができます...

board[0][4] = new piece('white','queen');

..例えば。

クラスでゲームロジックをエンコードしてみてください。たとえば、ブルークイーンを持てますか？白牛を飼うことはできますか？ホワイトキングはジャンプできますか？などなど

リファクタリングを行うと、コードが読みやすくなります。

そして、そのような長いコード行を書かないでください!! 何かを再考する必要があるのは確かな兆候です！

楽しむ！:)

于 2012-07-25T09:39:11.407 に答える