jq + 面向对象实现拼图游戏

知识点

• 拖拽事件
• es6面向对象
• jquery事件
• 效果图
  

html:

    <div class="wraper">
        <div class="btn">
            <button class="start">开始</button>
        </div>
        <div class="box"></div>
    </div>

css:

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,
    body {
        width: 100%;
        height: 100%;
        background: url('../img/bg_pic.jpg') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .wraper {
        width: 500px;
        height: 600px;
        position: relative;
    }
    .wraper .btn {
        text-align: center;
        line-height: 80px;
    }
    .wraper .btn button {
        width: 100px;
        height: 40px;
        background: yellow;
        border: none;
        outline: none;
        font-size: 14px;
        color: red;
        border-radius: 20px;
        cursor: pointer;
    }
    .wraper .box {
        width: 100%;
        height: 500px;
        position: relative;
        border: 10px solid red;
        border-radius: 10px;
    }
    .wraper .box .pic {
        position: absolute;
        background: url('../img/zy.jpg') no-repeat;
        box-shadow: 0 0 5px #fff;
        background-size: 500px 500px;
        cursor: pointer;
    }

js:

   class Game {
        constructor() {
            this.boxW = parseInt($('.box').css('width'));
            this.boxH = parseInt($('.box').css('height'));
            this.imgW = this.boxW / 5;
            this.imgH = this.boxH / 5;
            this.flag = true; //true为开始 false为重排
            this.orArr = []; //标准数组
            this.randArr = []; //乱序数组 
            this.init();
        }
        init() {
            this.createDom();
            this.getState();
        }
        createDom() {
            //行
            for (var i = 0; i < 5; i++) {
                //列
                for (var j = 0; j < 5; j++) {
                    this.orArr.push(i * 5 + j);
                    let imgs = $("<div class='pic'></div>").css({
                        width: this.imgW + 'px',
                        height: this.imgH + 'px',
                        left: j * this.imgW + 'px',
                        top: i * this.imgH + 'px',
                        backgroundPosition: -j * this.imgW + 'px ' + -i * this.imgH + 'px'
                    });
                    $('.box').append(imgs);
                }
            }
        }
        getState() {
            let btn = $('.btn .start');
            let imgs = $('.pic');
            let _this = this;
            btn.on('click', function() {
                if (_this.flag) {
                    _this.flag = false;
                    btn.text('重排');
                    _this.getRandom();
                    _this.getOrder(_this.randArr);
                    imgs.on('mousedown', function(e) {
                        let index = $(this).index();
                        let left = e.pageX - imgs.eq(index).offset().left;
                        let top = e.pageY - imgs.eq(index).offset().top;
                        $(document).on('mousemove', function(e1) {
                            let left1 = e1.pageX - left - $('.box').offset().left - 10;
                            let top1 = e1.pageY - top - $('.box').offset().top - 10;
                            imgs.eq(index).css({
                                'z-index': '40',
                                'left': left1,
                                'top': top1
                            })
                        }).on('mouseup', function(e2) {
                            let left2 = e2.pageX - left - $('.box').offset().left - 10;
                            let top2 = e2.pageY - top - $('.box').offset().top - 10;
                            let index2 = _this.changeIndex(left2, top2, index);
                            if (index === index2) {
                                _this.picReturn(index);
                            } else {
                                _this.picChange(index, index2);
                            }
                            $(document).off('mousemove').off('mouseup').off('mousedown');
                        })
                        return false;
                    })
                } else {
                    _this.flag = true;
                    btn.text('开始');
                    _this.getOrder(_this.orArr);
                    imgs.off('mousemove').off('mouseup').off('mousedown');
                }
            })
        }
        changeIndex(left, top, index) {
            if (left < 0 || left > this.boxW || top < 0 || top > this.boxH) {
                return index;
            } else {
                let col = Math.floor(left / this.imgW);
                let row = Math.floor(top / this.imgH);
                let moveIndex = 5 * row + col;
                let i = 0;
                let len = this.randArr.length;
                while ((i < len) && this.randArr[i] !== moveIndex) {
                    i++;
                }
                return i;
            }
        }
        picReturn(index) {
            let j = this.randArr[index] % 5;
            let i = Math.floor(this.randArr[index] / 5);
            $('.pic').eq(index).css('z-index', '40').animate({
                'left': j * this.imgW,
                'top': i * this.imgH
            }, 300, function() {
                $(this).css('z-index', '10');
            })
        }
        picChange(index, index2) {
            let _this = this;
            let fromJ = _this.randArr[index] % 5;
            let fromI = Math.floor(_this.randArr[index] / 5);
            let toJ = _this.randArr[index2] % 5;
            let toI = Math.floor(_this.randArr[index2] / 5);
            let temp = _this.randArr[index];
            $('.pic').eq(index).css('z-index', '40').animate({
                'left': toJ * _this.imgW + 'px',
                'top': toI * _this.imgH + 'px'
            }, 300, function() {
                $(this).css('z-index', '10');
            })
            $('.pic').eq(index2).css('z-index', '40').animate({
                'left': fromJ * _this.imgW + 'px',
                'top': fromI * _this.imgH + 'px'
            }, 300, function() {
                $(this).css('z-index', '10');
                _this.randArr[index] = _this.randArr[index2];
                _this.randArr[index2] = temp;
                _this.check();
            })
        }
        getRandom() {
            this.randArr = [...this.orArr];
            this.randArr.sort(function() {
                return Math.random() - 0.5;
            })
        }
        getOrder(arr) {
            let len = arr.length;
            for (var i = 0; i < len; i++) {
                $('.box .pic').eq(i).animate({
                    left: arr[i] % 5 * this.imgW,
                    top: Math.floor(arr[i] / 5) * this.imgH
                }, 400)
            }
        }
        check() { //判断是否成功
            if (this.randArr.toString() == this.orArr.toString()) {
                alert('拼图成功');
                this.flag = true;
                $('.btn .start').text('开始');
                $('.pic').off('mousemove').off('mouseup').off('mousedown');
            }
        }
    }
    new Game();

参考至腾讯课堂渡一教育