移動端事件（三）—— 橫豎屏與加速度、移動的方塊

時間 2020-03-23

標籤移動事件橫豎加速度方塊欄目無線简体版

原文原文鏈接

orientationchange 監聽橫豎屏切換html

　　window.orientation 手機豎屏狀態，有四個狀態碼。你們能夠在真機嘗試一下面試

- 　　豎屏：0 180
- 　　橫屏: 90 -90

<script>
    // alert(window.orientation)
    // orientationchange監聽手機的橫豎屏發生切換
    window.addEventListener("orientationchange",()=>{
        alert(window.orientation);
    })
</script>

像王者榮耀的一些活動頁面不但願用戶在橫屏狀態下瀏覽，這裏咱們也能夠實現函數

思路：監聽用戶橫豎屏狀態，當狀態爲90和-90時，咱們顯示一個box，對用戶進行提示。spa

下面是例子：code

<script>
    showBox();
    window.addEventListener("orientationchange",showBox())

    function showBox(){
        let box = document.querySelector("#box");
        switch(window.orientation){
            case 90:
            case -90:
                box.style.display = "block";
                break;
            default:
                box.style.display = "none";
        }
    }
</script>

devicemotion 監聽手機加速度發生變化orm

devicemotion 和 deviceorientation 做用是同樣的

acceleration 手機加速度檢測htm
accelerationIncludingGravity 手機重力加速度檢測(加速度 + 重力)blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        background: red;
        color: #fff;
        font:14px/30px "宋體";
    }
</style>
<body>
    <div id="box"></div>

    <script>
        window.addEventListener("deviceorientation",(e)=>{
            let {x,y,z} = e.acceleration;
            box.innerHTML = `
                手機x方向加速度:${x}</br>
                手機y方向加速度:${y}</br>
                手機z方向加速度:${z}</br>
            `
        })
    </script>
</body>
</html>

在這裏若是你是IOS手機，咱們將會遇到一些坑！！！接口

devicemotion 和 deviceorientation

　　 IOS 10: 必須使用https 協議

IOS 12.2:用戶端必須在設置開啓了動做與方向的權限

IOS 13: 須要經過接口去獲取動做與方向的訪問權限

IOS 13.3 : 必須用戶手動觸發（點擊事件 touch）動做與方向訪問權限的獲取

有了上面的基礎，咱們能夠來製做一個簡易的小遊戲——移動的方塊遊戲

這裏要注意一點：IOS 和安卓的取值是恰好相反

因此咱們須要進行一個判斷，對IOS和安卓進行兼容處理。

function getIos(){
    var u = window.navigator.userAgent;
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}

接下來就是實現咱們的小遊戲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
           position: absolute;
           left: 50%;
           top: 50%;
           margin: -25px 0 0 -25px;
           width: 50px;
           height: 50px;
           background: red;

        }
    </style>
</head>
<body>
<div id="box"></div>    
<script> 
let box = document.querySelector("#box");
let translateX = 0;
function getIos(){
    let u = window.navigator.userAgent;
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
// 注意 IOS 和 安卓的取值 恰好相反
// x軸 IOS 下是 10 ，那安卓下就是 -10 
window.addEventListener("devicemotion",(e)=>{
    let {x} = e.accelerationIncludingGravity;
    let {x:x2} = e.acceleration;
    x -= x2;
    if(!getIos()){
        x = -x;
    }
    translateX += x;
    box.style.transform = `translateX(${translateX}px)`;
});   
</script>    
</body>
</html>