接住掉落物品小游戏js实现思路

现有一种H5游戏，就是上面一直在掉落物品，下面有一个人或者盆子用手指左右移动来接住，游戏规则是，如果刚好接住掉落物品，那么就接成功。

那么怎么去触发这个接到呢，想着要是物品掉落的时候自身监听自己的掉落然后触发一个事件该多好，就可以时时监听自己的坐标然后检查跟接住者的坐标对比即可，但是
这个实现可能性有点低，因为要对自己的坐标有监控事件，需要靠轮询，性能耗费太大.

方案一、用一个毫秒级的定时器来轮询接住者和掉落物品的坐标，相同的话就是接住。
很明显方案一的性能耗费太大，并且一直用定时器轮询，掉落物品太快或者移动太快的话，会有不准确或者卡顿的现象。

方案二、借助物品的animate事件，该事件可以控制物品从一个状态移动到另一个状态，在移动到另一个状态后会触发一个事件，我们可以靠触发的这个事件来
实现是否接住这个逻辑。

1、设置掉落物品另一个状态的高度为接住者水平线的高度
2、当掉落物品到达另一个状态也就是接住者水平线的高度后会触发一个事件
3、此时物品和接住者肯定在同一个水平线，只不过x轴不知道相不相同，所以在事件中判断物品的x坐标和接住者的x坐标相同（当然相同不科学，应该是靠近，在附近即可）
4、如果判断成立则表明接住，做后续操作。

按理论分析下方案二的实现明显比方案一好很多，下面提供一个初始代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <meta name="baidu-site-verification" content="I97XTJlp7f" />
        <meta name="google-site-verification" content="RoFGtE1oyzShe_qKa3PLSLrav9Ot9PAOUg--qHbr2Ac" />
        <meta name="sogou_site_verification" content="92rPTKDuH2"/>
        <meta name="360-site-verification" content="30806a2490d1812507d7701c23df3600" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="Expires" CONTENT="-1">
        <meta http-equiv="Cache-Control" CONTENT="no-cache">
        <meta http-equiv="Pragma" CONTENT="no-cache">
<title>plane</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
    $("#caisheng").animate({top:'280px'},5000,"linear",function(){
                stop($(this),5000);
    });
    $("#caisheng2").animate({top:'280px'},4000,"linear",function(){
                stop($(this),4000);
    });    
    $("#caisheng3").animate({top:'280px'},3000,"linear",function(){
                stop($(this),3000);
    });
    $("#caisheng4").animate({top:'280px'},5000,"linear",function(){
                stop($(this),5000);
    });    
});
function stop(obj,speed){
   //获取横坐标
   var left = obj.offset().left;
   if(left>=170){
        obj.hide();
    }else{
        //继续掉落
        obj.animate({top:'560px'},speed,"linear",function(){$(this).hide();});
    }
}
</script>
<style>
#caisheng{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:20px;
    height:20px;
    background:#000;
    margin:0px auto;
}
#caisheng2{
    position:fixed;
    top:0;
    left:50px;
    width:20px;
    height:20px;
    background:#000;
}
#caisheng3{
    position:fixed;
    top:0;
    left:200px;
    width:20px;
    height:20px;
    background:#000;
}
#caisheng4{
    position:fixed;
    top:0;
    left:80px;
    width:20px;
    height:20px;
    background:#000;
}
#line{
    position:fixed;
    top:300px;
    left:170px;
    right:0px;    
    width:100%;
    height:2px;
    background:red;
}
</style>
</head>
<body>
<div id="caisheng"></div>
<div id="caisheng2"></div>
<div id="caisheng3"></div>
<div id="caisheng4"></div>
<div id="line"></div>
</body>
<script>
</script>
<style>
.bg{
    margin:0 auto;
    border:1px solid #666;
    margin-top:30px;
}
</style>
</html>

当然，若是各位还有别的方案可以提出来，麻烦指点下我，谢谢！