实现过程

第一步就是要先把我们使用的图片进行裁剪这里使用背景图片然后生成9个div即可,然后进行随机打乱. 第二步就是根据图片的分辨率确定每一行和每一列放置多少个屏图块. 第三步就是需要记录每个拼图块的初始信息,因为我们需要用这些信息对它进行定位,后面移动时也要去修改这些信息.

配置信息:

var config = {
    dom: document.getElementById("game"),  //游戏的dom对象
    width: 366,
    height: 366,
    rows: 3,  //行数
    cols: 2,  //列数
    url: "https://tse2-mm.cn.bing.net/th/id/OIP-C.P5tltuu7RiIwdKsZvyE7bAHaHa?w=183&h=183&c=7&r=0&o=5&dpr=2&pid=1.7",  //图片路径
    success: false //游戏是否结束
};

其中包含了需要渲染的 html节点信息,宽度、高度、行数、列数和图片信息.

定义每一块拼图的宽高:


//每一个拼图块的宽高
config.blockWidth = config.width / config.cols;
config.blockHeight = config.height / config.rows;

//拼图块的数量
config.blockNumber = config.rows * config.cols;

初始化游戏面板同时需要将它设置成相对定位,因为游戏中的拼图是可以移动的,拼图必须要设置成绝对定位:

function initGameDom(){
    config.dom.style.width = config.width + "px";
    config.dom.style.height = config.height + "px";
    config.dom.style.border = "2px solid #ccc";
    config.dom.style.position = "relative";
}

把裁剪过后的拼图放进数组里面进行维护:

 function initBlocks(){
        for(var i = 0; i < config.rows; i++){
            for(var j = 0; j < config.cols; j++){
                var isVisible = true;
                if(i === config.rows-1 && j === config.cols-1){
                    isVisible = false;
                }
                blocks.push(new Block(j * config.blockWidth, i * config.blockHeight, isVisible));
            }
        }
    }

现在去创建每一块拼图同时把图片放进去,同时需要把顺序打乱

function shuffle(){
        for(var i = 0; i < blocks.length-1; i++){
            //随机产生一个下标
            var index = getRandom(0, blocks.length-2);
            //交换left、top
            exchangeBlock(blocks[i], blocks[index]); 
        }
    }

js实现兔子拼图

实现过程