Question

我正在使用设备deviceorientation和createjs库创建一个游戏，

我有一个图形，根据手机的倾斜度在x轴上移动。

我遇到的问题是图形动画不稳定。

我想知道这是否属于我正在使用的逻辑？

我有两个函数“handleOrientation”和“render”

window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
nextX = car.x;   
x = Math.round(event.beta);  // In degree in the range [-180,180]
y = Math.round(event.gamma); // In degree in the range [-90,90]
// Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
    if (x >  90) { x =  90};
    if (x < -90) { x = -90};
    hit = "nothing"
  // To make computation easier we shift the range of 
  // x and y to [0,180]
    x += 90;
    //y += 90;
    if(y >0){
        nextX = car.x +carSpeed; 
    }
    if(y < 0){
        nextX =  car.x -carSpeed; 
      };
    car.nextX= nextX;
}

function render(){
if(gameState=="game started"){
  if (car.nextX < 0 + car.width / 2){
    car.x = 0 + car.width / 2 ; 
    }else if(car.nextX > stage.canvas.width - car.width / 2){
        car.x = stage.canvas.width - car.width / 2; 
    } else{
          car.x = car.nextX;
    }
  }
}

 function tick(){
     render();
     stage.update();
    }

我知道deviceorientation非常敏感，可能在定时器中调用函数，所以它不经常更新？

任何指针？

Answer 1

可能在计时器中调用该函数，因此它不会经常更新

您可以在更新位置之前读取多个读数，取平均值并使用该平均值更新位置，而不是更新每个刻度线上的位置。
或者，您可以更新每个刻度线的位置，但使用最后N个读数以类似方式获得平均值。

以下是第二个建议的简单示例：

{{1}}

我没有对此进行测试，你应该使用coef值。

使用deviceorientation

1 个答案: