js拼图游戏

js拼图游戏

前言

　　最近没什么做的，就想写一个拼图游戏，也是作为一种小练习吧，我先有了一个大概的想法，主要用到的还是h5中的drag拖拽事件，在开始前，我大致搜索了一下别人做的拼图游戏，发现大多是像切分好小拼图后进行上下左右移动的，类似小时候玩的九宫格挖掉一个后慢慢移动后复原的，和我想还原现实世界中的拼图的做法不一样，所以。。。好像说了一堆废话，那就开始吧！

以下只说大致思路的哈哈，具体的可以看我的github

---

html结构

看个图就好也没啥好说的

点击开始后，下面就挺壮观的了

js代码

先说思路，代码是最不重要的，我需要在一个大的container中构建64个小的div，（为什么是64，我下面初始化是64），然后再建多64个div用来响应drag事件，把拼图放在方格中

这里定义了一个Pintu类，参数的初始化是

/*
* new PintTu($container, $start, num, width, height);
* $container -> 装载拼图的容器
* $start -> 开始按钮
* $num -> 拼图的块数
* width -> 暂时使用默认值，请不要改变
* height -> 暂时使用默认值，请不要改变
* */
var pintu = new PinTu($('#container'), $('#start'), 64);

这里的核心代码就只有下面两个
计算小拼图分散后的位置，我需要的是分散后不会出现在放置拼图的格子中，然后使用随机的方法进行计算任意两个定位的元素组合（top，left，bottom，right）

var