Html5 Game Development Strategy (API)

What are the general effects of a complete game?

First, we certainly need full screen, and 3D games also have the mouse lock function.

A large part of these features are built in Html5, but some features, such as canvas yoy scaling, need to be implemented manually.

Next, I will write them in detail to the audience.

Fullscreen Api

The API is divided into two parts: full screen access and full screen exit.

This API can be used for a full screen element or the entire page. To enter the full screen, you need to specify the elements to be full screen. Exit is not required.

Note: This Api has different prefixes and names in different browsers.

Browser support: IE11, Chrome, FireFox, and Android built-in browsers.

Function enterFullscreen (element ){///Enter full screen///Elements to be full screenElement = element | document.doc umentElement; var api = element. requestFullscreen | element. required requestfullscreen | element. required requestfullscreen | element. webkitRequestFullscreen | element. msRequestFullscreen; api & api ();}

Function exitFullscreen (){///Exit full screenVar api = document. exitFullscreen | document. webkitCancelFullScreen | document. mozCancelFullScreen | document. msCancelFullScreen; api & api ();}

Effect preview:

Demo address

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + signature/Signature + LrNveK/qsv4oaM8L3A + CjxwPr/Signature/qtSqy9jH + signature/Signature + signature/i2qLrzu/Signature/ywb/X + signature + cjxwPuSvwMDG99ans9bH6b/2o7pdahjvbwwhokzpcmvgb1_8l3a + cjxwp1_vcd4kphbyzsbjbgfzcz0 = "brush: java; "> function lockMouse (element ){///

Get the mouse lock/// Elements to lock the mouseElement = element | document.doc umentElement; var api = element. requestPointerLock | element. Required requestPointerLock | element. webkitRequestPointerLock | element. msRequestPointerLock; api & api ();}

Function unlockMouse (){///Release the mouse lockVar api = document. exitPointerLock | document. extends exitPointerLock | document. webkitExitPointerLock | document. msExitPointerLock; api & api ();}

Effect preview:

Demo address

AudioContext Api

How can we operate audio if we want to create a music game or music software?

Don't be afraid. We have the AudioContext Api! You can operate the audio!

This API is complicated. Here we only mention how to obtain it. For specific applications, see WebAudioApi.

Note: The music file to be parsed is loaded using Ajax and MimeType is set to arraybuffer.

Note: The resolution audio format must be the HTML 5 audio Api format supported by the browser.

Browser support: Chrome and FireFox

Function getAudioContext (){///Get operation audio Context///
 
  
Audio operation Context
 Return new (window. AudioContext | window. webkitAudioContext | window. Audio AudioContext | window. msAudioContext );}

Effect preview:

Demo:Draw spectrum and draw audio waves

WebRTC APIs (obtain cameras and microphones)

This API is very interesting and can implement real-time communication and face recognition.

Note: If the client does not install the relevant device or is occupied by other applications, it will fail to be obtained.

Note: This API has different names and implementations in different browsers.

Browser support: Chrome and FireFox

Function getMedia (isEnableCamera, isEnableMicrophone ){///Obtain a media device///Enable camera?///Microphone enabled or notVar 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) {// click here to perform the operation. For specific functions and attributes, see console. dir (stream);} function noStream () {alert ("unable to enable device ");}}

Effect preview:

Demo address

Performance Api

This Api is used for performance monitoring. We can use it to obtain the current network condition and other information.

Note: This Api is supported and implemented in different browsers.

Browser support: IE9 and later, Chrome, FireFox

Here, we can get the attributes through this API. The following uses a get network connection details for demonstration.

Function networkStatue (){///Wireless Network Status///
 
  
   
Network Status
  
 Var api = window. performance | window. msPerformance | window. webkitPerformance | window. Mirror performance; if (! Api) return "unknown"; switch (api. navigator. type) {case 1: return "Wired"; case 2: return "wireless"; case 3: return "2G network"; case 4: return "3G network"; default: return "unknown ";}}

Battery Api

This Api allows us to get the current battery state of the computer so that we can control power saving and high performance through programs. It is essential for a good game.

Note: different browsers have different implementations and prefixes.

Browser support: FireFox and FireFox OS

Function getBatteryStatue (){///Obtain Battery status///
 
  
Battery Manager
 Return (navigator. battery | navigator. webkitBattery | navigator. mozBattery | navigator. msBattery || {});}

After obtaining the information, there are currently eight items that can be used:

Charging -- Boolean value, whether the system is currently charging (if the system does not have a battery, or cannot determine whether the battery is being charged, return true)

ChargingTime-numeric value indicates the time required to fully power the battery (unit: seconds ).

If the battery is fully charged or the system does not have a battery, return 0.

If it is not charged or the required time cannot be determined, Infinity is returned.

DischargingTime -- value, the time required for the battery to discharge until the system is sleep (unit: seconds ).

Infinity is returned if the discharge time cannot be determined, the system does not have a battery, or the system is charging.

Level -- value, current power level of the device. The value range is 0.0 ~ Between 1.0, indicating the percentage of remaining power.

Onchargingchange -- triggers an event when the charging status changes

Onchargingtimechange -- event triggered when the remaining time of the charge is changed

Ondischargingtimechange -- triggered when the remaining discharge time is changed

Onlevelchange -- triggered when the percentage of remaining power is changed