javascript - 移动web端做重力感应小游戏，实现效果差，有卡顿，应该怎么解决？有相关插件可以用么？
做移动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还是粗糙的，如果有不好的编码习惯，麻烦大家指教，代码逻辑方面如果有问题，也请大家指出。要是有有知道有好用的相关的重力感应插件可以用的话，也拜托请提供一下相关信息。谢谢~！
