1
2
3
4
<div id="board">
</div>
<button id="btn">打乱</button>
<button id="btn2">复原</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

打乱
复原

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 修改 row 即可改变模块数量，其他代码不需修改，仍可运行；
var width = 50; //单元模块宽
var row = 9; //行数
var border = 0; //单元模块边宽和
var totalWidth = (width + border) * row;
var div = '';
for (var i = 0; i < row * row; i++) {
    div += `<div class="item" style="background-color: ${color()}">${i + 1}</div>`;
}
$('#board').css({
    'width': totalWidth + 'px',
    'height': totalWidth + 'px',
})
$('#board').append(div);
$('.item').css({
    'width': width + 'px',
    'height': width + 'px',
    'line-height': width + 'px',
})
var initLocation = setXY(width, row, border);
var initLocation2 = setXY(width, row, border);
document.getElementById('btn').onclick = function() {
    // console.time();
    var arr = initLocation2.sort(() => (0.5 - Math.random())); // 生成随机数组
    changeLocation(arr);
    // console.timeEnd();
}
document.getElementById('btn2').onclick = function() {
    resetLocation(initLocation);
}
// 获取设置单元的初始位置，左上方点的位置
function setXY(width, row, border) {
    var width = width; //单元模块宽
    var row = row; //行数
    var border = border; //单元模块边宽和
    var width_border = width + border;
    var x = [];
    var y = [];
    var xy = [];
    for (var i = 0; i < row; i++) {
        x[i] = width_border * i;
        for (var j = 0; j < row; j++) {
            y[j] = width_border * j;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX