Question

我目前在CSS中制作一个rubik的立方体

Testarea：http://codepen.io/pixelass/pen/lkhIt

一切都按预期工作。我可以转向所有方面（有助手div）

现在我需要在转弯后存储位置

立方体有很多带有data-attributes的div，用于定义3d网格中的位置例如<a href="#" data-x="1" data-y="1" data-z="1" class="part red blue yellow"> </a>

我基本上每个维度都有一个数组

这是在最外侧的x轴上旋转90度（一圈）时对其进行排序的一个级别（参见codepen示例并单击＆＃34; TRIGGER X 1＆＃34;一次）

需要修改数组。当然有某种模式，但我很难搞清楚。显然这是最简单的转弯＆＃34;。其他人可能会有点困难。

当我存储立方体时，我只需切换data-attribute values并在同一轴上以相同方向转动零件。这部分虽然很好，但仍有效。

所以我需要的是一个执行排序的算法:(该轴的其他级别只使用相同的模式，因为只有第一个值发生变化（1,2,3））

从

[{
  "x": 1,
  "y": 1,
  "z": 1
}, {
  "x": 1,
  "y": 1,
  "z": 2
}, {
  "x": 1,
  "y": 1,
  "z": 3
}, {
  "x": 1,
  "y": 2,
  "z": 1
}, {
  "x": 1,
  "y": 2,
  "z": 2
}, {
  "x": 1,
  "y": 2,
  "z": 3
}, {
  "x": 1,
  "y": 3,
  "z": 1
}, {
  "x": 1,
  "y": 3,
  "z": 2
}, {
  "x": 1,
  "y": 3,
  "z": 3
}]

到

[{
  "x": 1,
  "y": 3,
  "z": 1
}, {
  "x": 1,
  "y": 2,
  "z": 1
}, {
  "x": 1,
  "y": 1,
  "z": 1
}, {
  "x": 1,
  "y": 3,
  "z": 2
}, {
  "x": 1,
  "y": 2,
  "z": 2
}, {
  "x": 1,
  "y": 1,
  "z": 2
}, {
  "x": 1,
  "y": 3,
  "z": 3
}, {
  "x": 1,
  "y": 2,
  "z": 3
}, {
  "x": 1,
  "y": 1,
  "z": 3
}]

Answer 1

也许这会有所帮助：你可以在数组上使用sort方法：

myArr.sort(function(a, b) {
    if (a.z > b.z) {
        return 1;
    } else if (a.z < b.z) {
        return -1;
    } else {
        if (a.y > b.y) {
            return -1;
        } else {
            return 1;
        }
    }
});

算法对此数组进行排序

从

到

1 个答案: