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 self = this;
    /*----计算边界----*/
    var place = ['top', 'bottom', 'left', 'right'];
    var border = {
        "top":  {top: [-(this.winHeight-this.height)/2, -this.yHeight], left: [-(this.winWidth-this.width)/2, this.winWidth-(this.winWidth-this.width)/2-this.xWidth]},
        "left": {top: [0, this.height - this.yHeight], left: [-this.xWidth, -(this.winWidth-this.width)/2]},
        "bottom":{bottom: [-(this.winHeight-this.height)/2, -this.yHeight], left: [-(this.winWidth-this.width)/2, this.winWidth-(this.winWidth-this.width)/2-this.xWidth]},
        "right": {top: [0, this.height - this.yHeight], right: [-this.xWidth, -(this.winWidth-this.width)/2]}
    };
    var items = this.$container.children();

    this.$start.click(function () {
        items.map(function (i, item) {
            let $node = $(item);
            $node.css('left','');
            $node.css('top','');
            $node.css('right','');
            $node.css('bottom','');

            let area = Math.floor(Math.random()*4);
            let obj = border[place[area]];
            for(let key in obj){
                $node.css(key, getRandom(obj[key][0], obj[key][1]));
            }
        });
    });

简单的拖拽事件，这里只用了2个drag事件的

$('.ping-tu').on('dragstart', function (e) {
        console.log('drag start');
        self.$dragNode = $(this);
        self.$dragNode.css('z-index', 10);
});
$('.place-area').on('dragenter', function (e) {
        if(!$(this).html()){
            $(this).append(self.$dragNode);

            self.$dragNode.css('left','');
            self.$dragNode.css('top','');
            self.$dragNode.css('right','');
            self.$dragNode.css('bottom','');
        }
});

其次还需要在不拖动的情况下移动小拼图到任意位置，以便筛选，因为看得到分散小拼图时，它们有可能会重合的，使用双击事件开始移动，然后使用单击事件结束，这里这样处理的原因是在drag中不支持鼠标事件(ps:此处我是在drag中使用过鼠标事件但获得的结果都是NaN，并且经过简单的求证“百度一下”，确实是不支持的，所以只能用比较粗暴的方法来解决)

$('.ping-tu').dblclick(function (ev) {
        console.log('move start');
        ev = ev || event;
        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;

        var $node = $(this);
        $node.css('z-index', 10);
        //这里为什么使用document，是因为快速拖拽的话会鼠标丢失
        $(document).on('mousemove', function (ev) {
            ev = ev || event;
            $node.css("left", ev.clientX - disX);
            $node.css("top", ev.clientY - disY);
        });
        $(document).click(function (ev) {
            console.log("move end");
            $node.unbind('click');
            $(document).unbind('mousemove').unbind('dblclick');
        });
});

demo：js拼图游戏