Html5游戏开发攻略（API篇）

如果我们要做一个完整的游戏，一般都有哪些效果呢？

首先，我们肯定是需要全屏的，而且，3D游戏还有鼠标锁定的功能。

这些功能有很大一部分都是Html5内置的，但是某些功能，比如画布同比缩放之类则需要我们手动去 实现了。

下面，我将一个一个详细的写给各位看官。

Fullscreen Api

API分为两部分，进入全屏和退出全屏。

此API可用于全屏某个元素或整个页面，进入全屏需要制定要全屏的元素，退出则不需要。

注意：这个Api在不同浏览器下有不同前缀和名称。

浏览器支持情况：IE11、Chrome、FireFox、安卓内置浏览器。

function enterFullscreen(element){
    /// 
进入全屏
    /// 要全屏的元素

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

function exitFullscreen(){
    /// 
退出全屏

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

效果预览：

演示地址

<??"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGJyPgo8L3A+CjxwPjxzdHJvbmc+TW91c2VMb2NrIEFwaTwvc3Ryb25nPjwvcD4KPHA+tMtBcGm31s6qwb249rK/t9ajrLvxyKHL+LrNveK/qsv4oaM8L3A+CjxwPr/J08PT2rvxyKHEs9K71KrL2LXEyvOx6sv4o6zKucrzserO3reowOu/qtSqy9jH+NPyx9LK87Hq1rjV67HktcOyu7/JvPuhozwvcD4KPHA+wP2jukNz1tCjrMrzserSu9ax1NrW0NDEteOjrMfSyvOx6rK7v8m8+6GjPC9wPgo8cD7XoqO6tMtBUEnU2rK7zazkr8DAxvfPwtPQsrvNrMP7s8a8sMew17qjrMfSy/i2qLrzu/HIobW9tcQmIzIwNTQwO86q0tTW0NDEtePOqtStteO1xM/ywb/X+LHqoaM8L3A+CjxwPuSvwMDG99ans9bH6b/2o7pDaHJvbWWhokZpcmVGb3g8L3A+CjxwPjwvcD4KPHByZSBjbGFzcz0="brush:java;">function lockMouse(element){ ///

获取鼠标锁

/// 要锁定鼠标的元素 element = element || document.documentElement; var api = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock || element.msRequestPointerLock; api && api(); }

function unlockMouse(){
    /// 
释放鼠标锁

    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(){
    /// 
获取操作音频上下文
    /// 音频操作上下文

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

效果预览：

演示：绘制频谱绘制音波

WebRTC相关Api（获取摄像头与麦克风）

这个API十分有趣，可以实现实时通讯与人脸识别等。

注：如果客户机没有安装相关设备或被其他应用程序占用则会获取失败。

另注：此API在不同浏览器下有不同名称与实现。

浏览器支持情况：Chrome、FireFox

function getMedia (isEnableCamera,isEnableMicrophone) {
    /// 
获取媒体设备
    /// 是否启用摄像头
    /// 是否启用麦克风

    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(){
    /// 
无线网路状态
    /// 网络状态

    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(){
    /// 
获取电池状态
    /// 电池管理器

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