随机排列的方块(加强版)

Html

Css

#board {
	display:flex;
	flex-wrap:wrap;
	/*align-content:flex-start;
	*/
}
.item {
	text-align:center;
	transition:all 1s;
}

// 修改 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;
            var a = [x[i], y[j]];
            xy.push(a);
        }
    }
    return xy;
}
// 随即打乱
function changeLocation(location) {
    // $('#board').toggleClass('rotation');

var item = document.getElementsByClassName('item');
    for (var i = 0; i < item.length; i++) {
        var selector = `.item:eq(${i})`;
        // $(selector).toggleClass('rotation');
        var detail = location[i];
        // 注意此处的计算
        var moveX = detail[0] - initLocation[i][1] + 'px';
        var moveY = detail[1] - initLocation[i][0] + 'px';

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

随机排列的方块(加强版)

代码描述：这个完善版，只需修改行数，即可改变方块数，增加了背景色

1.没做兼容
2.如何实现每个方块旋转的同时变化位置？
3.如果行数大于20，就会有肉眼可见的演示，性能如何优化？

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

小冷

相关代码

随机排列的方块(加强版)

最新