裝置動作和方向事件可讓使用者存取行動裝置內建的加速計、陀螺儀和指南針。
這些事件可用於許多目的；在遊戲中，例如控制角色的方向或動作。如果搭配地理位置使用，系統就能協助建立更準確的即時路線導航資訊，或提供特定位置的相關資訊。
摘要
- 偵測裝置的哪一側朝上，以及裝置的旋轉方式。
- 瞭解回應動作和方向事件的時機和方式。
哪一邊朝上？
如要使用裝置方向和動作事件傳回的資料，請務必瞭解提供的值。
地球座標框架
地球座標框架 (由 X、Y 和 Z 值描述) 會根據重力和標準磁力方向對齊。
| 座標系統 | |
|---|---|
X |
代表東西向方向 (東為正數)。 |
Y |
代表南北方向 (北方為正數)。 |
Z |
代表往上方向，與地面垂直方向 (為正值)。 |
裝置座標邊框
x、y 和 z 值描述的裝置座標框架會根據裝置中心對齊。
| 座標系統 | |
|---|---|
X |
在螢幕的前方 (正前方)。 |
Y |
在螢幕的平面上，朝頂端正向方向。 |
Z |
與螢幕或鍵盤相對，正向延伸。 |
使用手機或平板電腦時，裝置的方向會以螢幕的一般方向為基礎。如果是手機和平板電腦，則會以處於直向模式的裝置而定。如果是桌上型或筆記型電腦，則會考量到與鍵盤方向相關的螢幕方向。
輪替資料
旋轉資料會以厄爾角度的形式傳回，代表裝置座標框架與地球座標框架之間的差距度。
Alpha 值
沿著 Z 軸的旋轉。如果裝置頂端直接指向北方，alpha 值是 0°。如果裝置逆時針旋轉，alpha 值就會增加。
Beta 版
沿著 X 軸的旋轉方向。如果裝置的頂部和底部與地表保持等距離，beta 值是 0°。這個值會隨著裝置頂端接近地表位置而增加。
伽瑪文
沿著 Y 軸的旋轉。如果裝置的左右邊緣與地表保持等距離，gamma 值是 0°。這個值會隨著右側增加而增加。
裝置螢幕方向
裝置螢幕方向事件會傳迴旋轉資料，包括裝置正向後傾斜的程度，以及手機或筆記型電腦有指南針 (如果手機或筆電有指南針)，則是朝向裝置的方向。
請謹慎使用。
測試支援。不要在每個方向事件上更新 UI，而是同步至 requestAnimationFrame。
使用裝置方向事件的時機
裝置方向事件有多種用途。相關示例包括：
- 在使用者移動時更新地圖。
- 細微的使用者介面調整，例如新增視差效果。
- 結合地理位置功能，可用於即時路線導航。
檢查支援及監聽事件
如要監聽 DeviceOrientationEvent，請先檢查瀏覽器是否支援這些事件。接著，將事件監聽器附加至用於監聽 deviceorientation 事件的 window 物件。
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
處理裝置方向事件
當裝置移動或變更方向時，就會觸發裝置方向事件。而是傳回裝置目前位置與地球座標框架之間的差異資料。
該事件通常會傳回三個屬性：alpha、beta 和 gamma。在行動版 Safari 中，系統會傳回一個包含指南針標題的額外參數 webkitCompassHeading。
裝置動作
裝置螢幕方向事件會傳迴旋轉資料，包括裝置正向後傾斜的程度，以及手機或筆記型電腦有指南針 (如果手機或筆電有指南針)，則是朝向裝置的方向。
需要裝置的目前動作時，使用裝置動作。rotationRate 是以°/秒為單位。acceleration 和 accelerationWithGravity 是以 m/秒2 為單位。瞭解不同瀏覽器導入方式的差異。
使用裝置動作事件的時機
裝置動作事件有多種用途。相關示例包括：
- 搖動手勢即可重新整理資料。
- 在遊戲中，要讓角色跳躍或移動，
- 適用於健康與健身應用程式。
檢查支援及監聽事件
如要監聽 DeviceMotionEvent，請先檢查瀏覽器是否支援事件。接著，將事件監聽器附加至用於監聽 devicemotion 事件的 window 物件。
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
處理裝置動作事件
裝置動作事件會定期觸發，並傳回當下的裝置旋轉 (以度/秒為單位) 和加速 (以 m/秒2 為單位) 相關資料。部分裝置不具備可排除重力效果的硬體。
該事件會傳回四個屬性：accelerationIncludingGravity、acceleration，不包括重力、rotationRate 和 interval 的影響。
以手機螢幕為例，讓我們看一下手機，手機螢幕朝上。
| 狀態 | 旋轉 | 加速 (公尺/秒2) | 重力加速度 (m/s2) |
|---|---|---|---|
| 未移動 | [0、0、0] | [0、0、0] | [0、0、9.8] |
| 往天上移動 | [0、0、0] | [0、0、5] | [0、0、14.81] |
| 僅移至右側 | [0、0、0] | [3、0、0] | [3、0、9.81] |
| 往右移動 | [0、0、0] | [5、0、5] | [5、0、14.81] |
相反地，如果手機處於手持狀態，以便螢幕朝地面延伸，且會直接在檢視器中顯示，請按照下列步驟操作：
| 狀態 | 旋轉 | 加速 (公尺/秒2) | 重力加速度 (m/s2) |
|---|---|---|---|
| 未移動 | [0、0、0] | [0、0、0] | [0、9.81、0] |
| 往天上移動 | [0、0、0] | [0、5、0] | [0、14.81、0] |
| 僅移至右側 | [0、0、0] | [3、0、0] | [3、9.81、0] |
| 往右移動 | [0、0、0] | [5、5、0] | [5、14.81、0] |
範例：計算物件的最大加速度
使用裝置動作事件的其中一種方法是計算物件的加速度上限。例如，某一人最多可加速度是多少？
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
輕觸「開始！」按鈕後，系統會提示使用者跳躍。在此期間，頁面會儲存最長 (及最小) 的加速值，並在跳躍後告知使用者的最大加速度。