Html5游戏开发攻略(API篇)

当前位置 : 首页 > 网页制作 > html5 > Html5游戏开发攻略(API篇)

Html5游戏开发攻略(API篇)

来源: 作者: 时间:2016-02-01 11:23
如果我们要做一个完整的游戏,一般都有哪些效果呢?首先,我们肯定是需要全屏的,而且,3D游戏还有鼠标锁定的功能。这些功能有很大一部分都是Html5内置的,但是某些功能,比如画

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

首先,我们肯定是需要全屏的,而且,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 ——剩余电量百分比更改时触发

Tag:
网友评论

<