Html5遊戲開發攻略（API篇）

如果我們要做一個完整的遊戲，一般都有哪些效果呢？

首先，我們肯定是需要全屏的，而且，3D遊戲還有鼠標鎖定的功能。

這些功能有很大一部分都是Html5內置的，但是某些功能，比如畫布同比縮放之類則需要我們手動去 實現了。

下面，我將一個一個詳細的寫給各位看官。

Fullscreen Api

API分爲兩部分，進入全屏和退出全屏。

此API可用於全屏某個元素或整個頁面，進入全屏需要制定要全屏的元素，退出則不需要。

注意：這個Api在不同瀏覽器下有不同前綴和名稱。

瀏覽器支持情況：IE11、Chrome、FireFox、安卓內置瀏覽器。

function enterFullscreen(element){
    /// <summary>進入全屏</summary>
    /// <param name="element" type="HTMLElement" optional="true">要全屏的元素</param>

    element = element || document.documentElement;
    var api = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen || element.msRequestFullscreen;
    api && api();
}

function exitFullscreen(){
    /// <summary>退出全屏</summary>

    var api = document.exitFullscreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msCancelFullScreen;
    api && api();
}

效果預覽：

演示地址

MouseLock Api

此Api分爲兩個部分，獲取鎖和解開鎖。

可用於獲取某一元素的鼠標鎖，使鼠標無法離開元素區域且鼠標指針變得不可見。

例：Cs中，鼠標一直在中心點，且鼠標不可見。

注：此API在不同瀏覽器下有不同名稱及前綴，且鎖定後獲取到的值爲以中心點爲原點的向量座標。

瀏覽器支持情況：Chrome、FireFox

function lockMouse(element){
    /// <summary>獲取鼠標鎖</summary>
    /// <param name="element" type="HTMLElement" optional="true">要鎖定鼠標的元素</param>
    
    element = element || document.documentElement;
    var api = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock || element.msRequestPointerLock;
    api && api();
}

function unlockMouse(){
    /// <summary>釋放鼠標鎖</summary>

    var api = document.exitPointerLock || document.mozExitPointerLock || document.webkitExitPointerLock || document.msExitPointerLock;
    api && api();
}

效果預覽：

演示地址

AudioContext Api

若我們想做一款音樂遊戲或音樂軟件的話，怎麼才能操作音頻呢？

不要害怕，我們有AudioContext Api啦！可以操作音頻哦！

這個API比較複雜，這裏只提一下怎麼獲取。具體應用請看WebAudioApi。

注：使用前需要將要解析的音樂文件通過Ajax加載並將MimeType設置爲arraybuffer。

另注：解析音頻格式必須是瀏覽器所支持的Html5音頻Api的格式。

瀏覽器支持情況：Chrome、FireFox

function getAudioContext(){
    /// <summary>獲取操作音頻上下文</summary>
    /// <returns type="AudioContext">音頻操作上下文</returns>

    return new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext);
}

效果預覽：

演示：繪製頻譜繪製音波

WebRTC相關Api（獲取攝像頭與麥克風）

這個API十分有趣，可以實現實時通訊與人臉識別等。

注：如果客戶機沒有安裝相關設備或被其他應用程序佔用則會獲取失敗。

另注：此API在不同瀏覽器下有不同名稱與實現。

瀏覽器支持情況：Chrome、FireFox

function getMedia (isEnableCamera,isEnableMicrophone) {
    /// <summary>獲取媒體設備</summary>
    /// <param name="isEnableCamera" type="Boolean">是否啓用攝像頭</param>
    /// <param name="isEnableMicrophone" type="Boolean">是否啓用麥克風</param>

    var api = navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    if (!api) return;
    var video = null;
    var audio = null;
    if (isEnableCamera) video = document.createElement("video");
    if (isEnableMicrophone) audio = document.createElement("audio");
    api({video: !!video, audio: !!audio}, goStream, noStream);
    function goStream (stream){
        // 這裏去做操作,具體函數及屬性請看控制檯
        console.dir(stream);
    }
    function noStream () {
        alert("無法啓用設備");
    }
}

效果預覽：

演示地址

Performance Api

這個Api是用於性能監控的。我們通過它可以獲得到當前網絡狀況以及其他信息。

注意：該Api在不同瀏覽器下有不同支持以及實現。

瀏覽器支持情況：IE9及以上、Chrome、FireFox

其中，通過該API我們可以獲取到其中的屬性，下面使用一個獲取網絡連接詳情來做演示

function networkStatue(){
    /// <summary>無線網路狀態</summary>
    /// <returns type="String">網絡狀態</returns>

    var api = window.performance || window.msPerformance || window.webkitPerformance || window.mozPerformance;
    if (!api) return "未知";
    switch(api.navigator.type){
        case 1: return "有線";
        case 2: return "無線";
        case 3: return "2g網絡";
        case 4: return "3g網絡";
        default: return "未知";
    }
}

Battery Api

這個Api可以讓我們獲取到計算機當前電池狀態，以便我們通過程序控制省電、高性能等，對於一款好遊戲來說，是必不可少的。

注意：不同瀏覽器對此有不同實現及前綴。

瀏覽器支持情況：FireFox、FireFox OS

function getBatteryStatue(){
    /// <summary>獲取電池狀態</summary>
    /// <returns type="BatteryManager">電池管理器</returns>

    return (navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery || {});
}

獲取到后里面目前有8個東西可以用，分別如下：

charging ——布爾值，系統當前是否正在充電（如果系統不存在電池，或無法確定電池是否正在充電返回true）

chargingTime ——數值，指示電池完全充滿電所需要的時間（單位：秒）。

若電池完全被充滿電或系統不存在電池，返回0。

若不在充電或無法確定所需時間，則返回Infinity。

dischargingTime ——數值，電池放電直到系統休眠所需要的時間（單位：秒）。

若放電時間無法確定或系統沒有電池或系統正在充電，則返回Infinity。

level ——數值，設備當前電量等級。取值在0.0~1.0之間，代表剩餘電量百分比。

onchargingchange ——充電狀態更改時觸發事件

onchargingtimechange ——充電剩餘時間更改時觸發事件

ondischargingtimechange ——放電剩餘時間更改時觸發

onlevelchange ——剩餘電量百分比更改時觸發