快速入門：使用陀螺儀決定角速度 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

您可以在使用 JavaScript 撰寫的應用程式中使用陀螺儀來偵測使用者的移動變化。陀螺儀與加速計可互補做為遊戲控制器；加速計可測量線性動作，而陀螺儀可測量角速度 (或旋轉動作)。

目標: 完成這個快速入門之後，您將了解如何使用陀螺儀來偵測旋轉速率的變化。例如，您可以用這個來決定使用者的裝置旋轉速度，以影響遊戲中的角色動作。

先決條件

您應該熟悉 HTML、JavaScript 以及事件。

您使用的裝置或模擬器必須支援陀螺儀。

完成所需的時間: 15 分鐘.

指示

1. 開啟 Microsoft Visual Studio

開啟 Visual Studio 的執行個體。

2. 建立新專案

建立新專案，從 [JavaScript/市集應用程式] 專案類型中選擇 [空白應用程式]****。

3. 取代 JavaScript 程式碼

開啟專案的 default.js 檔案，然後以下列項目取代現有的程式碼。


// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var gyrometer;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onDataChanged(e) {
        var reading = e.reading;
        id('txtXVelocity').innerHTML = reading.angularVelocityX.toFixed(2);
        id('txtYVelocity').innerHTML = reading.angularVelocityY.toFixed(2);
        id('txtZVelocity').innerHTML = reading.angularVelocityZ.toFixed(2);
    }

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();

            // Choose a report interval supported by the sensor
            var minimumReportInterval = gyrometer.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            gyrometer.reportInterval = reportInterval;

            // Set the event handler
            gyrometer.addEventListener("readingchanged", onDataChanged);

            WinJS.UI.processAll();
        }
    };

    app.start();
})();

4. 新增應用程式的 HTML

開啟 Windows 和 Windows Phone 專案的 default.html 檔案，並將下列 HTML 複製到檔案的 BODY 標記中。


     <div class="item" id="scenario1Output">
        X: <a id="txtXVelocity">no data</a>
        <br />
        Y: <a id="txtYVelocity">no data</a>
        <br />
        Z: <a id="txtZVelocity">no data</a>
        <br />
     </div>

5. 建置、部署以及執行應用程式

按 F5 或選取 [偵錯] > [開始偵錯]****，即可建置、部署以及執行應用程式。

一旦應用程式開始執行，您就可以移動裝置或使用模擬器工具變更加速計的值。

6. 停止應用程式

按 ALT+Tab 返回 Visual Studio。
按 Shift+F5 或選取 [偵錯] > [停止偵錯]****，即可停止應用程式。

摘要與後續步驟

前面的範例示範了如何只需要撰寫簡短的程式碼，就可以整合應用程式中的陀螺儀輸入。

應用程式會建立與 onactivated 函式中的預設陀螺儀的連線。下行程式碼會執行此步驟。

gyrometer = Windows.Devices.Sensors.Gyrometer.getDefault();

會在 onDataChanged 函式中擷取新的陀螺儀資料。每次感應器驅動程式收到感應器的新資料時，都會使用這個函式 (或事件處理常式) 傳送數值給應用程式。應用程式會用下行程式碼登錄這個事件處理常式。

gyrometer.addEventListener("readingchanged", onDataChanged);

這些新值會透過以下顯示的 DOM 元素更新寫入螢幕。

    <div class="item" id="scenario1Output">
        X: <a id="txtXVelocity">no data</a>
        <br />
        Y: <a id="txtYVelocity">no data</a>
        <br />
        Z: <a id="txtZVelocity">no data</a>
        <br />
    </div>

應用程式會在 onactivated 函式內建立報告間隔。這段程式碼會擷取裝置所支援的最短間隔，並和所要求的 16 毫秒間隔 (重新整理的速率大約是 60-Hz) 比較。如果支援的最短間隔大於要求的間隔，程式碼會將該值設定為最小值。否則，就會將該值設定為要求的間隔。

var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;

如果您在撰寫遊戲應用程式，接下來的步驟可能涉及該如何結合陀螺儀輸入與加速計輸入。

共用方式為