代码之家 › 专栏 › 技术社区 › GibboK

JavaScript中矩阵的算法建议

dom html javascript

GibboK · 技术社区 · 11 年前

不确定标题是否合适,请随意编辑:-)

我有一系列的html/css,它们创建了如下所述的布局。

每个单元格都是一个div,在html中有一个编号的类(cell_1、cell_2等)。

当编号为1的页面测压元件在第一个网格中高亮显示时。

用户可以使用键盘箭头键在单元格之间导航。按ENTER键时,用户可以跳到位置1处的另一个网格。

根据当前单元格位置(高亮显示的单元格)和一些逻辑(如下所述),只允许导航到某些单元格。

每个网格的逻辑如下所述。。哪里

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

我的问题是:相反,使用一系列硬编码 if 或 case 每个网格的语句, 你能给我推荐一种明智的吃法吗 可重用逻辑 (js中可能有矩阵或类似内容)?

如果可能的话,请提供一个简短的例子或一些资源的链接。任何解决这种方法的替代方法都非常受欢迎,谢谢。

  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

2 回复 | 直到 11 年前

AbstractProblemFactory 11 年前

这是一个不使用任何额外数据结构、伪代码的解决方案:

top_x , top_y , width , height =获取点击元素的边界
案例 direction :

left:

新建(x)= 顶部x - w 从左侧边界(其中( border_width + paddigns )< w < the smallest box width )

right : ...

...
使用 document.elementFromPoint 使用 new_x 和 new_y 找到正确的 div 点亮它。如果 分区 没有改变, goto @2 .

PS。最简单的方法就是像老式标签一样正确使用标签 <table> .

PS2.当然,不要使用 "goto" 说明:)

Scott Mermelstein 11 年前

在设计时,可重复使用的程度是有限的。如果你想让每个网格都不同,你就必须分别定义每个网格及其所有连接。不过,考虑到这一点,抽象起来并不难。

每个网格包含一系列单元格。
每个单元格都有一些向上、向下、向左、向右的值。

因此,将其放入包含其他对象的对象中,例如:

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
};

然后,给定用户所在的单元格和网格,您只有一个移动逻辑:

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

这是基本的想法。您可以修改逻辑,例如,如果您确实不需要“bar”或“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];
    }
}