HTML5 game core technologies
| Features | Technologies |
|---|---|
| Audio | Web Audio API |
| Graphics | WebGL (OpenGL ES 2.0) |
| Input | Touch events, Gamepad API, device sensors, WebRTC (en-US), Full Screen API, Pointer Lock API |
| Languages | JavaScript (or C/C++ compiled to JavaScript using Emscripten) |
| Networking | WebRTC (en-US) and/or WebSockets |
| Storage | IndexedDB or “Cloud (Storage)” |
| Web | HTML, CSS, SVG |
Web technologies for game developers
Full Screen API
This simple API lets you make your game take up the entire screen, immersing the player in the action
Gamepad API
If you want your users to be able to control the game with a gamepad or other game controller, you need this API
HTML and CSS Canvas API
Combined, you can build, design and lay out your game interface. HTML has an element that provides 2D graphics, namely <canvas>
The <audio> element can be used to play some simple sound effects and music. If you want to get more involved, you can learn about the power of audio processing by studying the Web Audio API!
IndexedDB
A powerful data storage API for saving your own data on your computer or device. A great way to save the state of the game and other recent information so that it doesn’t need to be re-downloaded every time it is needed. It can also be used to make your game playable even when the user is not connected to the network (such as hours on a plane).
Web Storage
Includes localStorage and sessionStorage for local storage of game data such as player progress, settings, etc.
JavaScript
JavaScript is the programming language used on the web, and is growing rapidly in modern browsers, and is still growing rapidly. Use its power to write code for your game, or easily port your existing game using technologies such as Emscripten or Asm.js.
Pointer Lock API
The Pointer Lock API allows you to lock the mouse or other pointing device in the game interface so that you can get coordinate changes without absolutely positioning the cursor, so as to accurately determine what the user is doing, and also prevent the user from accidentally entering another screen or something else, which will cause misoperation.
SVG (Scalable Vector Graphics)
Build vector graphics that scale smoothly regardless of the size or resolution of the user’s display.
Typed Arrays
Typed arrays in JavaScript give you access to raw binary data; this allows you to manipulate GL textures, game data, or anything else, even if it is not a native JavaScript data format.
Web Audio API
This API is used to control the playback, synthesis, and processing of audio in JavaScript code, allowing you to create amazing sound effects, as well as play and manipulate music in real time.
WebGL
Allows you to create high-performance, hardware-accelerated 3D (and 2D) graphics from web content. This is a web-powered OpenGL ES 2.0 implementation.
WebRTC (en-US)
The WebRTC (Real-Time Communication) API enables you to control audio and video data, including remote conferencing and transferring other application data back and forth between two users. Want your players to be able to communicate with each other while beating monsters? This is the API for you, use it now.
WebSockets
The WebSocket API allows you to connect your application or site to a server and transfer data in real time. Essential for building perfect multiplayer action games, chat services, and more.
Web Workers
The Workers API allows you to spawn background threads running JavaScript code to take full advantage of modern multi-core CPUs.
Service Workers
Used to implement features such as offline caching, push notifications, and other features to improve the offline experience and instant communication capabilities of games.
XMLHttpRequest and File API
The combination of XMLHttpRequest and File API allows you to send and receive any type of data from a web server. For example, downloading new game levels, files, and transmitting non-real-time game status information.
Game Engine
Game engines provide developers with the infrastructure for game development, including rendering, physics simulation, animation, audio management, resource loading, network communication and other functions. Common HTML5 game engines are:
- Phaser: A popular and full-featured 2D game engine that is easy to learn and use with an active community.
- PixiJS: A game engine focused on high-performance 2D rendering, suitable for making games with rich visual effects.
- Three.js: A 3D game engine based on WebGL for developing complex 3D scenes and games.
- PlayCanvas: A 3D game engine based on WebGL that provides a visual editor and cloud services.
- Babylon.js: Another powerful WebGL 3D game engine with rich examples and tutorials.
- P2.js: A specialized 2D physics engine that can be used with the above game engines to provide collision detection, force and motion simulation, etc.
HTML5 game development process
Project planning
- Game planning document: clarify the core elements such as game type, theme, gameplay, level design, character setting, storyline, etc.
- Technology selection: select the appropriate HTML5 technology stack and game engine according to the game requirements.
- Art resource planning: determine the specifications and quantity of images, animations, audio and other materials required for the game.
- Time and resource budget: formulate a schedule for development, testing, and release, and allocate human resources.
Environment and tool preparation
- Development environment: modern browsers (such as Chrome and Firefox) support most HTML5 features and can be used as the main development environment.
- Development language: mainly use HTML, CSS, JavaScript (ES6 and above).
- Development platform: code editors such as Visual Studio Code and Sublime Text, with version control systems such as Git.
- Game engine: install and learn the selected game engine and its supporting tools according to the technology selection.
Design and implementation
- Game architecture design: divide the game modules (such as rendering, logic, network, UI, etc.) and determine the code organization structure.
- Art and sound production: Produce or outsource the art resources and audio files required for the game according to specifications.
- Programming implementation:
- Initialization: Set the game window, load resources, and initialize engine components.
- Rendering loop: Use the game engine or Canvas/WebGL to render the game screen.
- Game logic: Write business logic such as player interaction, AI behavior, and game rules.
- Physics simulation (if applicable): Integrate P2.js or other physics engines to implement collision detection and object movement.
- Sound management: Load, play, and control game sound effects.
- Resource management: Optimize resource loading strategies, such as subpackaging, preloading, and on-demand loading.
- Network communication (if applicable): Implement client-server communication for multiplayer online games.
Testing and debugging
- Unit testing: Write test cases for key modules to ensure functional correctness.
- Integration testing: Run the game as a whole to check whether the interaction between modules is normal.
- Performance testing: Monitor indicators such as frame rate and memory usage to optimize rendering efficiency and resource usage.
- Cross-platform and browser compatibility testing: ensure that the game performs consistently on different browsers and devices.
- User testing: invite target users to try the game, collect feedback, and iterate and improve.
Release and operation and maintenance
- Packaging and deployment: package the game code and resource files into a format suitable for release and upload them to the server or game release platform.
- Update mechanism: design a hot update plan to facilitate rapid iteration of subsequent versions.
- Data analysis: integrate analysis tools, collect player behavior data, and guide game optimization and operation decisions.
- Community maintenance: establish a player community, respond to player issues in a timely manner, release update announcements, hold events, etc.
