H5割绳子活动

公司要开发一个切绳子的活动项目，于是开始尝试，开始使用原生touchmove记录坐标然后设置判定条件触发，但是后面发现一个bug，当我们切得很快的时候，浏览器记录的坐标并不是按照我们理想的1px 1px的记录，而是会跳过，类似 140 170 180 185这种，然后会将我们的判断条件跳过去不触发，后面想了很久，决定采用记录坐标，放在数组里面，通过每次前后两个坐标值是否在绳子区间内做判定，效果非常好····上代码吧

/*css样式*/

* {
    margin: 0;
    padding: 0;
    }
    html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
    .prize {
    position: relative;
    margin-top: 50px;
    width: 100%;
    height: 50rem;
    overflow: hidden;
    }
    .giftmain {
    position: relative;
    }
    .rope {
    height: 200px;
    width: 4px;
    background: red;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -1px;
    z-index: 999;
    }
    .gift {
    height: 40px;
    width: 40px;
    background: red;
    position: absolute;
    margin-left: -20px;
    left: 50%;
    top: 200px;
    z-index: 999;
    }

html 结构

<div class="prize">
<div class="giftmain">
<div class="rope"></div>
<div class="gift"></div>
</div>
</div>

接下来是最重要的js

var arrX=[];
var arrY=[];
var flags=true;//这是一个开关，使元素跌落最底部才能再次触发，否则效果会很神奇··
$(document).on('touchstart',function(e){
e.preventDefault()
var startx=event.changedTouches[0].clientX;
$(document).on('touchmove',function(e){
e.preventDefault()
if(flags){
var X=event.changedTouches[0].clientX;
var Y=event.changedTouches[0].clientY;
//console.log($(document).width())
var width=$(document).width()
var height=$('.rope').height()
var leftX=width/2-2;
var rightX=width/2+2;
var topY=0;
var bottomY=height;
arrX.push(X);//将每次记录的坐标放入数组
arrY.push(Y);
for(var i=0;len=arrX.length,i<len;i++){
if(flags){
var l=arrX.length
var t=arrY.length;
var pa=arrX[l-4]>arrX[l-1]?'left':'right';
if(((arrX[l-2]<=rightX&&arrX[l-1]>=rightX)||(arrX[l-2]>=leftX&&arrX[l-1]<=leftX))&&(arrY[t-1]<=(height+50)&&arrY[t-2]>=50)){
var dev=$('<div class="giftmain_copy"><div class="rope_copy"></div><div class="gift_copy"></div></div>');
$('.giftmain').stop().animate({top: '1000px','opacity':'-=1.8'}, 500,function(){
$('.giftmain').css('top','0px')
$('.giftmain').css('opacity','1')
flags=false;
})
flags=true;
$('.prize').css('top','0px')//元素回到原位 清空数组
console.log(arrX[l-1])
arrX=[];
arrY=[];
return
}
}
}
}
})
})