原生js拼图游戏

周末在家闲的无聊，于是自己写了一个游戏自己玩，结果自己做的游戏自己都玩不过去，哎，整的我测试都挺麻烦的。

我在网上看到很多类型的拼图游戏，说实话挺佩服的，不过我自己看了他们的实现方式，

所有的图片都是经过图片工具处理后被提前分割为很多张图片，这不仅造成了图片加载的延迟，同时也造成了不好的用户体验。

我想了很多方法，能不能在一张图片上下文章呢，于是我想到了css图片裁剪。

css中有个叫clip的属性，是用来截取规定范围内的图片区域，于是我就以此为基础开始了我的游戏构建之旅。

首先，我把一张图片通过clip依次裁剪为9份（注意不是真的裁剪哦！）。

var tl = [];
            for(var i = 0; i < 9; i++) {
                var img = doc.createElement('img');
                var p = this.getPos(i);
                img.id = i +'';
                img.src = 'photos/1.jpg';
                img.style.width = '300px';
                img.style.height = '300px';
                img.style.clip = 'rect('+ p[0] +'px,'+ p[1] +'px,'+ p[2] +'px,'+ p[3] +'px)';
                img.style.marginLeft = -p[3] +'px';
                img.style.marginTop = -p[0] +'px';
                tl.push(img);
            }
 
getPos: function(i) {
            if(i === 8) {
                return [0, 0, 0, 0];
            }
            var p = [];
            p[0] = 100 * parseInt(i/3);
            p[1] = 100 * (i%3) + 100;
            p[2] = p[0] + 100;
            p[3] = p[1] - 100;
            return p;
        }

getRandom: function(arr) {
            var tArr = [];
            var len = arr.length;
            for (var i = 0; i < len; i++) {
                var r = Math.floor(Math.random()*arr.length);
                if(arr[r].id === '8') {
                    sIndex = i;
                }
                arr[r].title = i;
                tArr[i] = arr[r];
                arr.splice(r, 1);
            }
            return tArr;
        }

接着将他们随机排列安排到9个方格中，其中最后一个图片碎片扔掉当作空白格。

getRandom: function(arr) {
            var tArr = [];
            var len = arr.length;
            for (var i = 0; i < len; i++) {
                var r = Math.floor(Math.random()*arr.length);
                if(arr[r].id === '8') {
                    sIndex = i;
                }
                arr[r].title = i;
                tArr[i] = arr[r];
                arr.splice(r, 1);
            }
            return tArr;
        }

界面构造完成之后，接下来就应该添加监听事件了，这里主要监控图片方格的点击事件

要是图片方格移动，则必须其周围要有空白格，其中判断空白格及移动方格的方法如下：

var i = parseInt(target.title);
                    var p = sIndex - i;//sIndex为空白格位置索引，i为被点击的图片方格索引
                    if(i !== sIndex && ((p === 1 && sIndex % 3 !== 0) || (p === -1 && i % 3 !== 0) || Math.abs(p) === 3)) {
                        steps++;
                        _this.opts.changeHandler && _this.opts.changeHandler(steps);
                        _this.changePos(i);
                    }
 
changePos: function(i) {
            var iImg = list[i];
            var sImg = list[sIndex];
            var id = sImg.id;
            sImg.title = sIndex;
            sImg.id = iImg.id;
            sImg.style.clip = iImg.style.clip;
            sImg.style.marginLeft = iImg.style.marginLeft;
            sImg.style.marginTop = iImg.style.marginTop;
            iImg.title = i;
            iImg.id = id;
            iImg.style.clip = 'rect(0, 0, 0, 0)';
            iImg.style.marginLeft = '0px';
            iImg.style.marginTop = '0px';
            sIndex = i;
            this.isSuccess();
        }

以上步骤完成之后，可以说我的拼图游戏已经基本完成了，只剩下最后一步，那就是怎样判断成功呢？

其实在构造图片图片碎片的时候，我就在每个图片的dom对象上种上了它的正确位置，标记在了id上，然后标记了随机位置在title上。

判断成功的时候，依次判断9个方格的title和id是否相等，如果全部相等，则表示拼图成功了。

demo地址：http://xiechengxiong.com/168.html

欢迎光临我的前端博客：http://xiechengxiong.com/