移动端拖动小游戏

这次来个拖动的小游戏吧，格子随机，这里以编号标识，其实就是里面的class，编号对应，底部小格子就可以拖曳到上面对应位置，+1分。

拖动小游戏.png

html

<div class="dog"></div>
<footer>
    <ul></ul>
</footer>
<script src="app.js"></script>

app.js

$(function () {
/***************************************/   
    
/*              滑动事件                */
    
/***************************************/   
    lockScroll();
    //随机生成dog结构
    var arr1 = [];
    for(var i=0;i<25;i++){
        getx1(arr1);
    }
    function getx1(arr1){
        for(var i=0;i>-1;i++){
            var flag = true;
            var num1 = Math.floor(Math.random()*25)+1;
            for(var i in arr1){
                if(arr1[i] == num1){
                    flag= false;
                    break;
                }
            }
            if(flag == true){
                //console.log(num1);
                $(".dog").append("<div class='a"+num1+"'>"+num1+"</div>");
                arr1.push(num1);
                return;
            }
        }
    }
    //随机生成底部mini dog结构
    var arr2 = [];
    for(var i=0;i<25;i++){
        getx2(arr2);
    }
    function getx2(arr2){
        for(var i=0;i>-1;i++){
            var flag = true;
            var num2 = Math.floor(Math.random()*25)+1;
            for(var i in arr2){
                if(arr2[i] == num2){
                    flag= false;
                    break;
                }
            }
            if(flag == true){
                //console.log(num2);
                $("footer ul").append("<li class='a"+num2+"'>"+num2+"</li>");
                arr2.push(num2);
                return;
            }
        }
    }
    //开始拖曳
    var pressX = 0,
        pressY = 0;
    var obj = $('footer ul li');//触发页面
    var a,b,c;
    
    //手指按下时
    obj.bind('touchstart', function (event) {
        var touch = event.targetTouches[0];
        pressX = touch.pageX;
        pressY = touch.pageY;
        var current = $(this).attr("class");//获取当前结构class
        var top = $(".dog div."+current).offset().top;//获取目标结构top值
        var left = $(".dog div."+current).offset().left;//获取目标结构left值
        $(this).removeAttr('style');
        console.log(top,left);
        a = top;
        b = left;
        c = current;
    }, false);
    
    //手指滑动时
    obj.bind('touchmove', function (event) {
        event.preventDefault();
        var touch = event.targetTouches[0];
        var deltaX = touch.pageX - pressX;
        var deltaY = touch.pageY - pressY;
        $(this).css({"-webkit-transform":"translate3d("+deltaX+"px,"+deltaY+"px,0)"})
    }, false);
    
    //手指离开时
    obj.bind('touchend', function (event) {
        var t = $(this).offset().top;
        var l = $(this).offset().left;  
        console.log(t,l);           
        if(t>a-25 && t<a+25 && l>b-25 && l<b+25){
            console.log("匹配");
            $(this).remove();
             $(".dog div."+c).addClass("old");
        }else{
            console.log("不匹配");
            $(this).css({"-webkit-transition":"0.3s ease -webkit-transform"});
            $(this).css({"-webkit-transform":"translate3d(0,0,0)"})         
        }
        var o = $(".dog").children(".old").length;//获取已匹配的个数
        if(o == 25){
            alert("结束")
            obj.unbind();//解除绑定
        }
    }, false);
    
    //禁止页面touchmove
    function lockScroll(){
        $('body').bind('touchmove',function(e){
            e.preventDefault();
        });         
    }
});

css

body {background: #333;font-family: "Microsoft Yahei"}
.dog {width:7rem;height:7rem;overflow: hidden;margin:0.5rem auto;}
.dog div {background: #14a72b;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}
.dog .old {background:#be8824; }
footer {position: fixed;width:7rem; bottom:0;left:0.25rem;height: 1.4rem;}
footer ul li{background: #be8824;border:1px solid #000;display: inline-block;width:1.4rem;height:1.4rem;float:left;}