拼图小游戏之计算后样式与CSS动画的冲突

先说结论：

前几天写了几个非常简单的移动端小游戏，其中一个拼图游戏让我郁闷了一段时间。因为要获取每张图片的位置，用`<style>`标签写的样式，直接获取计算后样式再用来交换位置，结果就悲剧了，出现了一些不理解的情况。这个错误比较低级，不过还是被我遇到了，就拿来记录一下。

注意：

在交换每张图片位置的时候，我对它们设置了CSS中transition属性，有了缓冲动画效果，这样一来，每次打乱图片的时候，用getComputedStyle获取计算后样式，但是，动画有时长，而获取样式在触发时就完成了，所以会造成：图片还没有达目标位置，就已经获取到了它的中途位置坐标，得到了一组错误的数字，所有的拼图就会错乱。

所以，在遇到需要获取一个移动中的元素的left、top这类属性值的时候，如果要获取的值是个具体的值，那么就不要用计算后样式，而是去获取行内样式或者一个固定的值，就不会出现麻烦了。

代码地址：https://github.com/zhangxiongcn/demo

正确效果：

错误效果：

HTML部分：

    <div class="box">
    <h2>拼图游戏</h2>
    <button id="btn">play</button>
        <div class="puzzle" id="puzzle">
            <div class="item item0" data-num="0" style="left: 2px;top: 2px;background-position: 0px 0px;"></div>
            <div class="item item1" data-num="1" style="left: 104px;top: 2px;background-position: -100px 0px;"></div>
            <div class="item item2" data-num="2" style="left: 206px;top: 2px;background-position: -200px 0px;"></div>
            <div class="item item3" data-num="3" style="left: 2px;top: 104px;background-position: 0px -100px;"></div>
            <div class="item item4" data-num="4" style="left: 104px;top: 104px;background-position: -100px -100px;"></div>
            <div class="item item5" data-num="5" style="left: 206px;top: 104px;background-position: -200px -100px;"></div>
            <div class="item item6" data-num="6" style="left: 2px;top: 206px;background-position: 0px -200px;"></div>
            <div class="item item7" data-num="7" style="left: 104px;top: 206px;background-position: -100px -200px;"></div>
            <div class="item item8" data-num="8" style="left: 206px;top: 206px;background-position: -200px -200px;"></div>
        </div>
    </div>
    <div class="mask" id="mask">
        <div class="sucbox">
            <div class="animated tada">完成</div>
            <button class="again">继续</button>
        </div>
    </div>

CSS部分：

    <style>
        *{margin:0;padding:0;}
        body{
            background-color: #FDF5E6;
        }
        .box{
            width: 100%;
            text-align: center;
        }
        .box h2{
            margin:20px;
        }
        .box button{
            width: 50px;
            height: 30px;
            background-color: #1E90FF;
            border: none;
            outline: none;
            font-size: 20px;
            color: #fff;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        .puzzle{
            position: relative;
            width: 308px;
            height: 308px;
            margin: 0 auto;
            border: 3px solid #ccc;
            box-shadow: 0 0 10px #ddd;
        }
        .item{
            position: absolute;
            width: 100px;
            height: 100px;
            background-image: url(images/puzzle.jpg);
            background-repeat: no-repeat;
            background-size: 300% 300%;
            transition: all .5s;
        }
        .mask{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.3);
        }
        .mask .sucbox{
            position: absolute;
            top: 20%;
            left: 50%;
        }
        .tada{
            margin-left: -50px;
            width: 100px;
            height: 50px;
            background-color: pink;
            border-radius: 10px;
            font-size: 24px;
            line-height: 50px;
            text-align: center;
        }
        .again{
            width: 100px;
            height: 30px;
            margin-top: 50px;
            margin-left: -50px;
            font-size: 20px;
        }
    </style>

JS部分：

    var puzzle = document.getElementById('puzzle');
    var items  = puzzle.querySelectorAll('.item');
    var btn    = document.getElementById('btn');
    var mask   = document.getElementById('mask');
    var again  = mask.querySelector('.again');
    var info = {
        left:0,
        top:0,
        x:0,
        y:0
    }
    again.addEventListener('touchend',function(){
        mask.style.display = "none";
    });
    // 点击play按钮，打乱图片顺序
    btn.addEventListener('touchstart',function(){
        for (var i = 1; i < 20; i++) {
            // 随机获取20组0-9的数字
            // 让它们互相更换位置
            var a = Math.floor(Math.random()*1000)%9;
            var b = Math.floor(Math.random()*1000)%9;
            if( a != b){
                var _left = items[a].style.left;
                items[a].style.left = items[b].style.left;
                items[b].style.left = _left;

                var _top = items[a].style.top;
                items[a].style.top = items[b].style.top;
                items[b].style.top = _top;

                // 更换编号
                var _num= items[a].getAttribute("data-num");
                items[a].setAttribute("data-num",items[b].getAttribute("data-num"));
                items[b].setAttribute("data-num",_num);
            }
        }
    });
    for (var i = 0; i < items.length; i++) {
        // 手指按下时，获取初始值
        items[i].addEventListener('touchstart',function(e){
            info.left = parseInt(this.style.left);
            info.top  = parseInt(this.style.top);
            info.x    = e.targetTouches[0].pageX;
            info.y    = e.targetTouches[0].pageY;
            // 保存每张图片原来的left和top
            // 用于交换图片时用
            this.iniLeft = info.left;
            this.iniTop  = info.top;
            this.style.transition = "none";
        });
        // 滑动时，改变图片的left和top
        items[i].addEventListener('touchmove',function(e){
            this.style["z-index"] = 99;
            this.style.left = info.left - info.x + e.targetTouches[0].pageX + "px";
            this.style.top  = info.top - info.y + e.targetTouches[0].pageY + "px";
        });
        // 手指抬起时，更换两张图片位置
        items[i].addEventListener('touchend',function(e){
            this.style["z-index"] = 0;
            var x = e.changedTouches[0].pageX - puzzle.offsetLeft;
            var y = e.changedTouches[0].pageY - puzzle.offsetTop;
            var target = find(this,x,y);
            if( target === this){
                target.style.top = target.iniTop +"px";
                target.style.left = target.iniLeft +"px";
            }else{
                exchange(this,target);
                if(isOk()){
                    setTimeout(function(){
                        mask.style.display = "block";
                    },1000);
                }
            }
            this.style.transition = "all .5s";
        });
    }
    // 两个图片互相交换，即交换它们的left和top
    function exchange(a,b){
        
        var _top = a.iniTop;
        a.style.top = b.style.top;
        b.style.top = _top + "px";

        var _left = a.iniLeft;
        a.style.left = b.style.left;
        b.style.left = _left + "px";
        var _num= a.getAttribute("data-num");
        a.setAttribute("data-num",b.getAttribute("data-num"));
        b.setAttribute("data-num",_num);
    }
    // 移动一张图片，找到要更换的目标图片
    // 根据鼠标的x，y值所在的范围去确定目标图片
    function find(obj,x,y){
        for (var i = 0; i < items.length; i++) {
            if(obj != items[i]){
                var _left = parseInt(items[i].style.left);
                var _top = parseInt(items[i].style.top);
                var c1 = x >= _left && x < _left+100;
                var c2 = y >= _top && y < _top+100;
                if(c1 && c2){
                    return items[i];
                }
            }
        }
        return obj;
    }
    function isOk(){
        var str = '';
        for (var i = 0; i < items.length; i++) {
            str += items[i].getAttribute('data-num');
        }
        return str == "012345678";
    }
    document.addEventListener('touchstart',function(e){
        e.stopPropagation();
        e.preventDefault();
    });