Posts Web陀螺仪与重力感应
Post
Cancel

Web陀螺仪与重力感应

陀螺仪与重力感应配置与注意点:

  • API 使用
  • 临界点处理
  • 翻转处理
  • iOS 12.2 政策

devicemotion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function init_devicemotion_listener() {
  if ((window as any).DeviceMotionEvent) {
    window.addEventListener('devicemotion', device_motion_handler, false);
  }
}

const device_motion_handler = (function() {
  // remove all comments,https://github.com/coolfishstudio/game-shake
  let lastTime = 0;
  let x = 0;
  let y = 0;
  let z = 0;
  let lastX = 0;
  let lastY = 0;
  let lastZ = 0;
  const shakeSpeed = 800;

  return function(e:any) {
    const get_events:Stage2DEventGetter = block_getters.get_events;
    if (!isFunction(get_events) || !heart().get_runtime_data().is_running()) {
      return;
    }
    const events = get_events(heart);

    const acceleration = e.accelerationIncludingGravity;
    const nowTime = new Date().getTime();
    if (nowTime - lastTime > 100) {
      const diffTime = nowTime - lastTime;
      lastTime = nowTime;
      x = acceleration.x;
      y = acceleration.y;
      z = acceleration.z;
      const speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
      if (speed > shakeSpeed) {
        events.send_phone_shake_action();
      }
      lastX = x;
      lastY = y;
      lastZ = z;
    }
  };
})();

deviceorientation

01.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
function init_deviceorientation_listener() {
  if ((window as any).DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', device_orientation_handler, false);
  }
}

const device_orientation_handler = (function () {
  let timefragment = 0;
  let nowts = 0;
  const TIME_SEP = 100;

  return function(e:any) {
    const get_events:Stage2DEventGetter = block_getters.get_events;
    if (!isFunction(get_events) || !heart().get_runtime_data().is_running()) {
      return;
    }
    const events = get_events(heart);
    nowts = Date.now();
    if (nowts  - timefragment > TIME_SEP) {
      timefragment = nowts;

      if (!e
        || typeof e.beta !== 'number'
        || typeof e.gamma !== 'number') {
        return;
      }

      const fullscreen = get_state().player.fullscreen;
      let direction_correction;
      if (fullscreen) {
        direction_correction = {
          right: 'right',
          left: 'left',
          down: 'down',
          up: 'up',
        };
      } else {
        direction_correction = {
          right: 'up',
          left: 'down',
          down: 'right',
          up: 'left',
        };
      }

      const { gamma, beta } = e;
      const TILT_THRESHOLD = 10;
      const OFFSET_THRESHOLD = 15;
      const DEGREE_90 = 90;
      const DEGREE_180 = 180;

      if (Math.abs(beta) > 90 + OFFSET_THRESHOLD) { return; }

      if (
        (gamma < -TILT_THRESHOLD && gamma > -DEGREE_90) &&
        (DEGREE_90 - Math.abs(beta) > OFFSET_THRESHOLD)
      ) {
        events.send_phone_tilt_action(direction_correction.left);
      }
      if (
        (gamma > TILT_THRESHOLD && gamma < DEGREE_90) &&
        (DEGREE_90 - Math.abs(beta) > OFFSET_THRESHOLD)
      ) {
        events.send_phone_tilt_action(direction_correction.right);
      }
      if (beta < -TILT_THRESHOLD && beta > -DEGREE_180) {
        events.send_phone_tilt_action(direction_correction.up);
      }
      if (beta > TILT_THRESHOLD && beta < DEGREE_180) {
        events.send_phone_tilt_action(direction_correction.down);
      }
    }
  };
})();

注意点

  • iOS 12.2 设置-Safari-隐私和安全加入 ”运动 & 方向访问“ 开关,默认是关闭,需要手动打开
This post is licensed under CC BY 4.0 by the author.
Trending Tags

Trending Tags