原文链接: 使用手机陀螺仪 完成一个简单的小游戏

上一篇: vue-codemirror 代码编辑器

下一篇: js setTimeout setInterval

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

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 = 5this.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 = 0this.top = 0if (window.orientation == 180 || window.orientation == 0) {// alert("竖屏状态！")window.addEventListener("deviceorientation", (event) => {if (!this.isInit) {this.alpha = event.alphathis.beta = event.betathis.gamma = event.gammathis.isInit = true}this.nalpha = event.alpha - this.alphathis.nbeta = event.beta - this.betathis.ngamma = event.gamma - this.gammathis.refresh()});}if (window.orientation == 90 || window.orientation == -90) {// alert("横屏状态！")window.addEventListener("deviceorientation", (event) => {if (!this.isInit) {this.alpha = event.alphathis.beta = event.betathis.gamma = event.gammathis.isInit = true}this.nalpha = (event.gamma - this.gamma) % 180this.nbeta = -(event.gamma - this.gamma) % 90this.ngamma = event.beta - this.betathis.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>