使用手机陀螺仪 完成一个简单的小游戏

通过旋转手机，控制小球的移动

event.beta属性，表示在沿着X轴的旋转，它的取值范围是[-180, 180)。

控制小球的左右移动

event.gamma属性，表示在沿着Y轴的旋转，它的取值范围是[-90, 90)。表示上下的移动

当横竖屏切换时，需要将坐标轴进行变换修改

为了避免移动过长，也需要设置一个速率比，对角度进行取模，避免偏转太多出现角度较大的问题

横竖屏切换事件，onorientationchange，在绑定函数时，尽量使用箭头函数，避免出现this指向错误。。。调试这个是真的烦。。。手机端看不了console。。。。

<template>
  <div class="container">
    <!--<div>-->
    <!--<div>{{nalpha}}</div>-->
    <!--<div>{{nbeta}}</div>-->
    <!--<div>{{ngamma}}</div>-->
    <!--</div>-->

    <div class="ball" ref="ball" id="ball"></div>
  </div>
</template>

<script>
  export default {
    name: "simple-game",
    data() {
      return {
        alpha: 0,
        beta: 0,
        gamma: 0,
        isInit: false,
        nalpha: 0,
        nbeta: 0,
        ngamma: 0,
        left: 0,
        top: 0,
      }
    },
    methods: {
      refresh() {
        // 根据角度换算为移动速率的比率
        let rate = 5
        this.left += parseInt(this.ngamma / rate)
        // console.log(this.$refs.ball.style)
        // document.getElementById('ball').style.left = '' + this.left + 'px'
        this.top += parseInt(this.nbeta / rate)
        // document.getElementById('ball').style.top = '' + this.top + 'px'
        this.$refs.ball.style.left = this.left + 'px'
        this.$refs.ball.style.top = this.top + 'px'

        // console.log(this.$refs.ball.style.left);
      },
    },
    mounted() {
      //判断手机横竖屏状态：

      // 每次屏幕切换时为了方便操作，将小球移至中心
      let hengshuping = () => {
        this.left = 0
        this.top = 0
        if (window.orientation == 180 || window.orientation == 0) {
          // alert("竖屏状态！")

          window.addEventListener("deviceorientation", (event) => {
            if (!this.isInit) {
              this.alpha = event.alpha
              this.beta = event.beta
              this.gamma = event.gamma
              this.isInit = true
            }
            this.nalpha = event.alpha - this.alpha
            this.nbeta = event.beta - this.beta
            this.ngamma = event.gamma - this.gamma
            this.refresh()
          });
        }

        if (window.orientation == 90 || window.orientation == -90) {
          // alert("横屏状态！")
          window.addEventListener("deviceorientation", (event) => {
            if (!this.isInit) {
              this.alpha = event.alpha
              this.beta = event.beta
              this.gamma = event.gamma
              this.isInit = true
            }
            this.nalpha = (event.gamma - this.gamma) % 180
            this.nbeta = -(event.gamma - this.gamma) % 90
            this.ngamma = event.beta - this.beta
            this.refresh()
          }, false);
        }
      }
      window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
      hengshuping()
    }

  }
</script>

<style scoped>
  .container {
    width: 100vw;
    height: 100vh;
    display: flex;
    /*position: relative;*/
    justify-content: center;
    align-items: center;
  }

  .ball {
    width: 50px;
    height: 50px;
    background: deepskyblue;
    border-radius: 50%;
    position: relative;
  }

</style>