---
title: "Introduction to game development for the Web - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Introduction"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:53.363835+00:00"
instance: "kb-cron"
---

##  [Web technologies for game developers](https://developer.mozilla.org/en-US/docs/Games/Introduction#web_technologies_for_game_developers)
For the tech folks, let's dig into the APIs the Web brings to the table that cater to game developers. Here's a thorough list to give you a taste of what the Web can do for you: 

[Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
    
Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth. 

[Full Screen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
    
This simple API lets your game take over the entire screen, thereby immersing the player in action. 

[Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
    
If you want your users to be able to use gamepads or other game controllers to work your game, you'll need this API. 

[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 
    
Together, these two technologies let you build, style, and lay out your game's user interface. Part of HTML is the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element, which provides one way to do 2D graphics. 

[HTML audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio)
    
The [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio) element lets you easily play simple sound effects and music. If your needs are more involved, check out the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) for real audio processing power! 

[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
    
A powerful data storage API for maintaining user data on their own computer or device. A great way to save game state and other information locally so it doesn't have to be downloaded every time it's needed. Also useful to help make your game playable even when the user isn't connected to the Web (such as when they're stuck on an airplane for hours on end). 

[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
    
JavaScript, the programming language used on the Web, is blazing fast in modern browsers and getting faster all the time. Use its power to write the code for your game, or look at using technologies like [Emscripten](https://github.com/emscripten-core/emscripten/wiki) or [Asm.js](http://asmjs.org/spec/latest/) to easily port your existing games. 

[Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
    
The Pointer Lock API lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action. 

[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (Scalable Vector Graphics)
    
Lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display. 

[Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Typed_arrays)
    
JavaScript typed arrays give you access to raw binary data from within JavaScript; this lets you manipulate GL textures, game data, or anything else, even if it's not in a native JavaScript format. 

[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
    
This API for controlling the playback, synthesis, and manipulation of audio from JavaScript code lets you create awesome sound effects as well as play and manipulate music in real time. 

[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
    
Lets you create high-performance, hardware-accelerated 3D (and 2D) graphics from Web content. This is a Web-supported implementation of [OpenGL ES](https://www.khronos.org/opengles/) 2.0. 

[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
    
The WebRTC (Real-Time Communications) API gives you the power to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users. Want your players to be able to talk to each other while blowing up monsters? This is the API for you. 

[WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
    
The WebSocket API lets you connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth. 

[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
    
Workers give you the ability to spawn background threads running their own JavaScript code, to take advantage of modern, multicore processors.
##  Help improve MDN 
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Jul 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Introduction/contributors.txt). 
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/introduction/index.md?plain=1 "Folder: en-us/games/introduction \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FIntroduction&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fgames%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F21addd31954b2629ab3e186dacdf7edca813dc7d%0A*+Document+last+modified%3A+2025-07-11T18%3A40%3A52.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.")
  1. [Games](https://developer.mozilla.org/en-US/docs/Games)
  2. Introduction
    1. _[Introduction](https://developer.mozilla.org/en-US/docs/Games/Introduction)_
    2. [Anatomy](https://developer.mozilla.org/en-US/docs/Games/Anatomy)
  3. [APIs for game development](https://developer.mozilla.org/en-US/docs/Games/Tools)
    1. [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js)
    2. [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
    3. [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
    4. [Full screen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
    5. [Gamepad](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
    6. [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
    7. [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
    8. [Pointer Lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
    9. [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
    10. [Typed Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
    11. [Web Audio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
    12. [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
    13. [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
    14. [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
    15. [WebVR](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API)
    16. [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
    17. [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
  4. [Techniques](https://developer.mozilla.org/en-US/docs/Games/Techniques)
    1. [Using async scripts for asm.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts)
    2. [Optimizing startup performance](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Optimizing_startup_performance)
    3. [Using WebRTC peer-to-peer data channels](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels)
    4. [Audio for Web Games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games)
    5. [2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)
    6. [Tiles and tilemaps overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps)
    7. [Using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)
    8. [Image rendering for pixel art](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look)
  5. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
    1. [Explaining basic 3D theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory)
    2. [Building up a basic demo with A-Frame](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
    3. [Building up a basic demo with Babylon.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js)
    4. [Building up a basic demo with PlayCanvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas)
    5. [Building up a basic demo with Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)
    6. [GLSL shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders)
    7. [WebXR](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR)
    8. [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
    9. [Bounding volume collision detection with THREE.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)
  6. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
    1. [Mobile touch](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch)
    2. [Desktop with mouse and keyboard](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
    3. [Desktop with gamepad](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)
    4. [Other](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other)
  7. [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
    1. [2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)
    2. [2D breakout game using Phaser](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser)
    3. [2D maze_game with device orientation](https://developer.mozilla.org/en-US/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation)
    4. [2D platform game using Phaser](https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/)
  8. [Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
    1. [Game distribution](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution)
    2. [Game promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion)
    3. [Game monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization)

[MDN](https://developer.mozilla.org/)
Your blueprint for a better internet. 
  * [](https://github.com/mdn/)
  * [](https://bsky.app/profile/developer.mozilla.org)
  * [](https://x.com/mozdevnet)
  * [](https://mastodon.social/@mdn)
  * [](https://developer.mozilla.org/en-US/blog/rss.xml)

MDN
    
  * [ About ](https://developer.mozilla.org/en-US/about)
  * [ Blog ](https://developer.mozilla.org/en-US/blog/)
  * [ Mozilla careers ](https://www.mozilla.org/en-US/careers/listings/)
  * [ Advertise with us ](https://developer.mozilla.org/en-US/advertising)
  * [ MDN Plus ](https://developer.mozilla.org/en-US/plus)
  * [ Product help ](https://support.mozilla.org/products/mdn-plus)

Contribute
    
  * [ MDN Community ](https://developer.mozilla.org/en-US/community)
  * [ Community resources ](https://developer.mozilla.org/en-US/docs/MDN/Community)
  * [ Writing guidelines ](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines)
  * [ MDN Discord ](https://developer.mozilla.org/discord)
  * [ MDN on GitHub ](https://github.com/mdn)

Developers
    
  * [ Web technologies ](https://developer.mozilla.org/en-US/docs/Web)
  * [ Learn web development ](https://developer.mozilla.org/en-US/docs/Learn_web_development)
  * [ Guides ](https://developer.mozilla.org/en-US/docs/MDN/Guides)
  * [ Tutorials ](https://developer.mozilla.org/en-US/docs/MDN/Tutorials)
  * [ Glossary ](https://developer.mozilla.org/en-US/docs/Glossary)
  * [ Hacks blog ](https://hacks.mozilla.org/)

[Mozilla](https://www.mozilla.org/)
  * [Website Privacy Notice](https://www.mozilla.org/privacy/websites/)
  * [Telemetry Settings](https://www.mozilla.org/en-US/privacy/websites/data-preferences/)
  * [Legal](https://www.mozilla.org/about/legal/terms/mozilla)
  * [Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/)

Visit [Mozilla Corporation’s](https://www.mozilla.org/) not-for-profit parent, the [Mozilla Foundation](https://foundation.mozilla.org/).  
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under [a Creative Commons license](https://developer.mozilla.org/docs/MDN/Writing_guidelines/Attrib_copyright_license).