javascript - 移动web端做重力感应小游戏，实现效果差，有卡顿，应该怎么解决？有相关插件可以用么？

Question

做移动web端重力感应小游戏，要求页面中对象boss根据手机的倾斜改变位置。使用了h5里的重力监听器写了一段js代码，设备物理方向信息可以被监听到，对象也可以根据倾斜方向移动位置。问题是移动不流畅，反应不灵敏，对象无法随着设备倾斜方向立刻做出移动方向上的改变。
以下是我的js代码：
监听设备物理方向的计时器（我需要每隔几秒更新一下设备倾斜角度信息的变化，同时后面有关闭重力监听的需求，所以用了计时器）

t = setInterval(function() {
                window.addEventListener("deviceorientation",gravity, true);
            },30);

对象根据倾斜方向移动位置的代码：

 function gravity(event) {
        var beta = Math.ceil(event.beta);
        var gamma = Math.ceil(event.gamma);
        var beta_a = Math.abs(beta);
        var gamma_a = Math.abs(gamma);
        var speed;

        //if(((0 <= beta_a)&&(beta_a <= 15))||((0 <= gamma_a)&&(gamma_a <= 15))){
        //    speed = 350;
        //}else if(((15 < beta_a)&&(beta_a <= 30))||((15 < gamma_a)&&(gamma_a <= 30))){
        //    speed = 300;
        //}else if(((30 < beta_a)&&(beta_a <= 90))||((30 < gamma_a)&&(gamma_a <= 90))){
        //    speed = 250;
        //}

        if ((-90 <= beta) && ( beta < 0)) {
            hide_hint();
            //脸上移
            if (boss.offsetTop > -(w_width * 0.75 * 0.5)) {
                if ((0 <= gamma) && (gamma <= 90)) {
                    // 脸右移
                    if (boss.offsetLeft < w_width - w_width * 0.75 * 0.5) {
                        $("#boss").stop(true);
                       $("#boss").animate({bottom:"124vw",right:"-37vw"},300);
                        
                    } else {
                        $("#boss").stop(true);
                        $("#boss").animate({bottom:"124vw"},250);
                        $("#boss").css("rignt","-37vw");
                    
                    }
                } else if ((-90 <= gamma) && (gamma < 0)) {
                    //脸左移
                    if (-(w_width * 0.75 * 0.5) < boss.offsetLeft) {
                        $("#boss").stop(true);
                        $("#boss").animate({right:"62vw"},250);
                        $("#boss").css("bottom","124");
                      
                    } else {
                        $("#boss").stop(true);
                        $("#boss").animate({bottom:"124vw"},250);
                        $("#boss").css("right","62vw");
                        
                    }
                }
            } else {
                if ((0 <= gamma) && (gamma <= 90)) {
                    // 脸右移
                    if (boss.offsetLeft < w_width - w_width * 0.75 * 0.5) {
                        $("#boss").stop(true);
                        $("#boss").animate({right:"-37vw"},250);
                        $("#boss").css("bottom","124vw");
                      
                    } else {
                        $("#boss").stop(true);
                        $("#boss").css("bottom","124vw");
                        $("#boss").css("rignt","-37vw");
                        
                    }
                } else if ((-90 <= gamma) && (gamma < 0)) {
                    //脸左移
                    if (-(w_width * 0.75 * 0.5) < boss.offsetLeft) {
                        $("#boss").stop(true);
                        $("#boss").animate({right:"62vw"},250);
                        $("#boss").css("bottom","124vw");
                      
                    } else {
                        $("#boss").stop(true);
                        $("#boss").css("bottom","124vw");
                        $("#boss").css("right","62vw");
                        
                    }
                }
            }
        } else if ((0 <= beta) && (beta <= 90)) {
            hide_hint();
            //脸下移
            if (boss.offsetTop < (w_height - w_width * 0.75 * 0.5)) {
                if ((0 <= gamma) && (gamma <= 90)) {
                    // 脸右移
                    if (boss.offsetLeft < w_width - w_width * 0.75 * 0.5) {
                        $("#boss").stop(true);
                       $("#boss").animate({bottom:"-37vw",right:"-37vw"},300);
                        
                    } else {
                        $("#boss").stop(true);
                        $("#boss").animate({bottom:"-37vw"},250);
                        $("#boss").css("rignt","-37vw");
                        
                    }
                } else if ((-90 <= gamma) && (gamma < 0)) {
                    //脸左移
                    if (-(w_width * 0.75 * 0.5) < boss.offsetLeft) {
                        $("#boss").stop(true);
                        //$("#boss").animate({bottom:"-37vw"},200);
                        //$("#boss").animate({right:"62vw"},200);
                        $("#boss").animate({bottom:"-37vw",right:"62vw"},300);
                        
                    } else {
                        $("#boss").stop(true);
                        $("#boss").animate({bottom:"-37vw"},250);
                        $("#boss").css("right","62vw");
                        
                    }
                }
            } else {
                if ((0 <= gamma) && (gamma <= 90)) {
                    // 脸右移
                    if (boss.offsetLeft < w_width - w_width * 0.75 * 0.5) {
                        $("#boss").stop(true);
                        $("#boss").animate({right:"-37vw"},250);
                        $("#boss").css("bottom","-37");
                        
                    } else {
                        $("#boss").stop(true);
                        $("#boss").css("bottom","-37");
                        $("#boss").css("rignt","-37vw");
                        
                    }
                } else if ((-90 <= gamma) && (gamma < 0)) {
                    //脸左移
                    if (-(w_width * 0.75 * 0.5) < boss.offsetLeft) {
                        $("#boss").stop(true);
                        $("#boss").animate({right:"62vw"},250);
                        $("#boss").css("bottom","-37");
                       
                    } else {
                        $("#boss").stop(true);
                        $("#boss").css("right","62vw");
                        $("#boss").css("bottom","-37");
                       
                    }
                }
            }
        }
    }

开头注释的部分本来是想做根据倾斜角度的不同对象移动速度也不同的，但是效果不好而且本身在无速度变化的时候就有反应不灵敏的问题，所以希望可以先解决精准移动反应无延迟的问题。
最后，自己手写的原生js还是粗糙的，如果有不好的编码习惯，麻烦大家指教，代码逻辑方面如果有问题，也请大家指出。要是有有知道有好用的相关的重力感应插件可以用的话，也拜托请提供一下相关信息。谢谢~！