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

Html5游戏开发攻略（API篇）相关推荐

Html5游戏开发攻略（Canvas设置篇）
我们要在页面上绘画出游戏场景,必然要有一个画布(canvas). 那么,我们就来讲讲如何进行画布设置吧~ 虾米?你早就会了?canvas.getContext("2d")? 那你就 ...
蒂法html5游戏,完全攻略蒂法
完整的Tifa攻略游戏坏蛋冰淇淋,冷冻的双重英雄,双箭头,双箭头II,唤醒盒,唤醒盒... 寻求完整指南3 Tifa's 说明! 分享:随便玩:你好,啤酒,饮料,头发,鼓掌(拍拍),哭泣,亲吻,跳, ...
游戏开发攻略—黑杰克扑克牌
欢迎来到:http://observer.blog.51cto.com 21点黑杰克扑克牌为一款极具趣味性的牌类游戏,最早出现在十六世纪,起源于法国.同时,发现在网络上流传着的各种版本的21点黑杰克扑 ...
cocos creator + Matchvs游戏开发攻略（1） - 创建游戏
本人用的游戏引擎为cocos creator 2.x 版本,gameServer语言使用nodejs. 第一步再cocos 官网控制台创建游戏填写游戏信息添加游戏图标点击创建按钮创建游戏创建成功后 ...
以太坊开发攻略五：以太坊的编程接口web3.js API的使用上：转账
以太坊开发攻略一:准备篇上:各种相关工具安装和环境配置以太坊开发攻略二:准备篇下:以太坊的编译.安装以太坊开发攻略三:以太坊私有链的搭建(基于ethash共识挖矿) 以太坊开发攻略四:以太坊私有链 ...
DAVINCI DM3730开发攻略——开发环境篇
深圳的春天,梧桐山上绿意浓浓,山花醉人香,蜂蝶采蜜忙!现在只能在山上看到这些生机勃勃的景象了,山下的水污染完了,空气也不咋样.但相对北方的兄弟姐妹长期生活在灰霾和沙尘的环境,这里也很难得了,地下水的污 ...
Android应用开发攻略
<Android应用开发攻略> 基本信息原书名:Android Cookbook 作者: (美)达尔文Ian F. Darwin [作译者介绍] 译者: 姚军丛书名: O'Reilly ...
Davinci DM6446开发攻略——LINUX GPIO驱动源码移植
一. DM6446 GPIO的介绍说到LINUX 驱动移植,没有移植过的朋友,或刚刚进入LINUX领域的朋友,最好去看看<LINUX 设备驱动程序>第三版,有个理 ...
HTML5游戏开发(四)：飞机大战之显示场景和元素
<HTML5游戏开发>系列文章的目的有:一.以最小的成本去入门egret小项目开发,官方的教程一直都是面向中重型:二.egret可以非常轻量:三.egret相比PIXI.js和sprite ...

Html5游戏开发攻略（API篇）

Html5游戏开发攻略（API篇）相关推荐

最新文章

热门文章