2

タイトルが適切かどうかわからないので、必要に応じて編集してください:-)

以下に説明するレイアウトを作成する一連のhtml/cssがあります。

すべてのセルは、html 内の番号付きクラス (cell_1、cell_2 など) を持つ div です。

番号 1 のページ ロード セルが最初のグリッドで強調表示されている場合。

ユーザーは、キーボードの矢印キーを使用してセル間を移動できます。ENTER を押すと、ユーザーは位置 1 の別のグリッドにジャンプできます。

いくつかのロジック (以下で説明) を使用して、現在のセルの位置 (セルが強調表示されている) に応じて、特定のセルにのみナビゲーションが許可されます。

各グリッドのロジックについては、以下で説明します。

n= do nothing
bar= do nothing
y-2= means move to cell 2

私の質問は、グリッドごとに一連のハードコーディングされたiforステートメントを使用する代わりに、再利用可能なロジック(Matrix または js で可能な同様のもの) を持つスマートな方法を提案していただけますか?case

可能であれば、短い例またはリソースへのリンクを提供してください。このアプローチを解決する別の方法は大歓迎です。

  EXAMPLE LOGIC:
    grid type: 5x
    +--------+------+-------+
    +        +  2   +    4  +
    +   1    +------+-------+
    +        +  3   +    5  +
    +--------+------+-------+
    cell  up     down    left   right
      1   n      bar     n      y-2
      2   n      y-3     y-1    y-4
      3   y-2    bar     y-1    y-5
      4   n      y-5     y-2    n
      5   y-4    bar     y-3    n


    grid type: 7x
    +--------+------+-------+-------+
    +   1    +      3       +   6   +
    +------- +------+-------+-------+
    +   2    +  4   +   5   +   7   +
    +--------+------+-------+-------+
    cell  up     down    left   right
      1   n      y-2     n      y-3
      2   y-1    bar     n      y-4
      3   n      y-4     y-1    y-6
      4   y-3    bar     y-2    y-5
      5   y-3    bar     y-4    y-7
      6   n      y-7     y-3    n
      7   y-6    bar     y-5    n

    ///////////////////////
    grid type: 4x
    +--------+------+-------+-------+
    +        +      +       +       +
    +   1    +  2   +   3   +   4   +
    +        +      +       +       +
    +--------+------+-------+-------+
    cell  up     down    left   right
      1   n      bar     n      y-2
      2   n      bar     y-1    y-3
      3   n      bar     y-2    y-4
      4   n      bar     y-3    n
4

2 に答える 2

2

これを設計できる再利用可能性には限界があります。各グリッドを異なるものにしたい場合は、各グリッドをそのすべての接続とともに個別に定義する必要があります。とはいえ、抽象化するのはそれほど難しくありません。

  • 各グリッドには、一連のセルが含まれています。
  • 各セルには、上、下、左、右の値があります。

したがって、これを他のオブジェクトを含むオブジェクトに入れます。次に例を示します。

var gridType5 = {
    cells = {
        1: { up: "n", down: "bar", left: "n", right: "2" }, // easier without the "y-", but we can add it if you want
        2: { up: "n", down: "3", left: "1", right: "4" },
        3: { up: "2", down: "bar", left: "1", right: "5" },
        4: { up: "n", down: "5", left: "2", right: "n" },
        5: { up: "4", down: "bar", left: "3", right: "n" }
    }
};

var grids = {
    5: gridType5,
    4: gridType4,
    7: gridType7
};

次に、ユーザーがいるセルとグリッドが何であれ、移動ロジックは 1 つだけです。

function checkMove(currentGrid, currentCell, keypress) {
    var value = grids[currentGrid].cells[currentCell].keypress;
    if (value == "bar" || value == "n") {
        return value;
    }
    return grids[currentGrid].cells[value];
}

それが基本的な考え方です。ロジックを変更できます。たとえば、「バー」または「n」の値が本当に必要ない場合は、抽象化を変更できます。

  • 各グリッドには、一連のセルが含まれています。
  • 各セルには一連の隣接セルがあります。

これにより、細胞は次のようになります。

        2: { neighbors: {down: 3, right: 4}},

あなたのcheckMoveは次のようになります：

function checkMove(currentGrid, currentCell, keypress) {
    var newCell = grids[currentGrid].cells[currentCell].neighbors[keypress];
    if (newCell) {
        return grids[currentGrid].cells[newCell];
    }
}
于 2013-10-31T15:41:00.127 に答える