自定义上传图片拼图游戏

1.游戏进入链接点击跳转2.九宫格拼图原理图例原理：上图九宫格图中，每个格子的坐标为(x,y)，如果格子9是空白格子，你怎么知道6和8是它的直接相邻的网格。这时候网格坐标(x,y)的作用就体现出来了。使用公式：|(x6-x9)|+|(y6-y9)|=1匹配空白格子9的坐标与格子6的坐标坐标差的绝对值之和等于1，证明它们是直接相邻的格子，可以移动交换。详细原理请点击：跳转3.实现过程，代码分析flex实现九宫格布局：1234567gt;892。当前的布局是这样的：3.分析：每个li代表一个网格，自定义属性data-x和data-y代表坐标（x,y）；样式顺序用于组织网格移动排序；grid9添加id='empty'以标识为空白网格4.因为网格的宽度是按百分比设置的，所以会根据不同屏幕的宽度而变化；而我们需要一个小方格，所以需要js动态计算格子的高度：//设置格子的高度和背景图的大小setChildStyle(){this.childWidth=window.getComputedStyle(this.oChild[0],false).宽度;//获取网格宽度console.log(this.childWidth);for(leti=0;i