yq版本——jQuery拼图游戏

拼图游戏js代码：

/*重要备注：

imgOrigArr 和 imgRanfArr这两个数组分别存放正确顺序排列和乱序排列的碎片信息
数组结构：arr[碎片节点下标] = 碎片显示位置

 */

/**
 * [puzzleGame 向puzzleGame对象中添加属性]
 * @param  {[json格式]} param [图片 路径+名称]
 * @return       [无]
 */
        this.imgCells.eq(from).animate({
            'top':rowTo*this.cellHeight + 'px',
            'left':colTo*this.cellWidth + 'px'
        },this.moveTime,function(){
            $(this).css('z-index','10');
        });
        //表交换图片变换位置
        this.imgCells.eq(to).css('z-index','30').animate({
            'top':rowFrom*this.cellHeight + 'px',
            'left':colFrom*this.cellWidth + 'px'
        },this.moveTime,function(){
            $(this).css('z-index','10');

            //两块图片交换存储数据
            self.imgRandArr[from] = self.imgRandArr[to];
            self.imgRandArr[to] = temp;

            //判断是否完成全部移动，可以结束游戏
            if(self.checkPass(self.imgOrigArr,self.imgRandArr)){
                self.success();
            }
        });
    },

---

拼图游戏完成效果：

完整游戏资源链接：

https://blog.youkuaiyun.com/QLQ919/article/details/118304329

主要核心代码在拼图游戏js代码中有注释。