uni-app（H5）拼图游戏

业务需求

给你一张图片，平均分成4份（左1），打乱顺序（注意，拆分后的单图只是水平方向上的位置切换，右1），用户移动图片，从右1还原成左1。

思路

一张图片分四份，怎么拆？
找UI要psd，拿到图后，用工具切出1，2，3，4位置的图，然后画页面布局好。
拆完怎么随机？

let puzzleArray= [
	{
		index:0,
		imgUrl:'game1.png'
	},
	{
		index:1,
		imgUrl:'game2.png'
	},
	{
		index:2,
		imgUrl:'game3.png'
	},
	{
		index:3,
		imgUrl:'game4.png'
	},
]
puzzleArray.sort(()=>{
	return Math.round(Math.random()) - 0.5;
})
<view v-for="(item,index) in arr"></view>

随机排列好，怎么移动？移动完怎么交换？

//利用移动端的touch事件 具体可查看项目源码
touchstart touchmove touchend

交完完怎么校验是否拼好了呢？

var tmpArr= puzzleArray.filter((item, index) => {
	if (index != item.index) {
		return true
	} else {
		return false
	}
})
tmpArr.length == 0 证明拼好了

功能实现了，但不友好。这只是4份，如果是9*9呢？81份！
怎么办？

精灵图

一张图分成4份：

let puzzleArray = [
    {
        "backgroundPosition":"background-position: 0.00% 0.00%",
        "index":0,
        "leftStart":0,
        "leftEnd":0,
        "topStart":0,
        "topEnd":0,
        "id":"game_1_puzzle_0"
    },
    {
        "backgroundPosition":"background-position: 100.00% 0.00%",
        "index":1,
        "leftStart":0,
        "leftEnd":0,
        "topStart":0,
        "topEnd":0,
        "id":"game_1_puzzle_1"
    },
    {
        "backgroundPosition":"background-position: 0.00% 100.00%",
        "index":2,
        "leftStart":0,
        "leftEnd":0,
        "topStart":0,
        "topEnd":0,
        "id":"game_1_puzzle_2"
    },
    {
        "backgroundPosition":"background-position: 100.00% 100.00%",
        "index":3,
        "leftStart":0,
        "leftEnd":0,
        "topStart":0,
        "topEnd":0,
        "id":"game_1_puzzle_3"
    }
]
puzzleArray.sort(() => {
		return Math.round(Math.random()) - 0.5;
	})

使用精灵图，无论多少份，我们只需要计算出每一块位置的background-position即可。
项目源码请移步：uniapp-component