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 ——剩余电量百分比更改时触发