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

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();

参考至腾讯课堂渡一教育