butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scrape mlb-standings: 3 new, 0 updated, 3 total (kb-cron)

Browse Source
This commit is contained in:
turtle89431 2026-05-04 23:09:53 -07:00
parent 3cf63a93f8
commit 9e3304dd1c
3640 changed files with 775328 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
_index.db
View File

Binary file not shown.

234
data/developer.mozilla.org/en-US/docs/Games-0.md Normal file
View File

@ -0,0 +1,234 @@
---
title: "Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:48.925297+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
# Game development
Gaming is one of the most popular computer activities. New technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web browser.
## In this article
* [Develop web games](https://developer.mozilla.org/en-US/docs/Games#develop_web_games)
* [Guides](https://developer.mozilla.org/en-US/docs/Games#guides)
* [Examples](https://developer.mozilla.org/en-US/docs/Games#examples)
* [See also](https://developer.mozilla.org/en-US/docs/Games#see_also)
## [Develop web games](https://developer.mozilla.org/en-US/docs/Games#develop_web_games)
Welcome to the MDN game development center! In this area of the site, we provide resources for web developers wanting to develop games. You will find many useful tutorials and technique articles in the main menu on the left, so feel free to explore.
We've also included a reference section so you can easily find information about all the most common APIs used in game development.
**Note:** Creating games on the web draws on a number of core web technologies such as HTML, CSS, and JavaScript. The [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) section is a good place to go to get started with the basics.
## [Guides](https://developer.mozilla.org/en-US/docs/Games#guides)
[Anatomy of a video game](https://developer.mozilla.org/en-US/docs/Games/Anatomy)
This article looks at the anatomy and workflow of the average video game from a technical point of view, in terms of how the main loop should run. It helps beginners to modern game development understand what is required when building a game and how web standards like JavaScript lend themselves as tools. Experienced game programmers who are new to web development could also benefit, too.
[Introduction to game development for the Web](https://developer.mozilla.org/en-US/docs/Games/Introduction)
The modern web has quickly become a viable platform not only for creating stunning, high quality games, but also for distributing those games. This article introduces you to the advantages of using the Web as a game platform, and the technologies that make it possible.
[Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
HTML games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the Web, rather than each version being locked into a single store controlled by one company. You can benefit from the web being truly multiplatform. This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
[Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
This page lists essential core techniques for anyone wanting to develop games using open web technologies.
[Tools for game development](https://developer.mozilla.org/en-US/docs/Games/Tools)
On this page, you can find links to our game development tools articles, which eventually aim to cover frameworks, compilers, and debugging tools.
[Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
## [Examples](https://developer.mozilla.org/en-US/docs/Games#examples)
For a list of web game examples, see our list of [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials).
## [See also](https://developer.mozilla.org/en-US/docs/Games#see_also)
[Game Programming Patterns](https://gameprogrammingpatterns.com/)
An online book, written by Bob Nystrom, which discusses programming patterns in the context of game development with the aim of helping game developers produce more effective and efficient code.
[Gamedev.js Weekly](https://gamedevjsweekly.com/)
Weekly newsletter about HTML game development, sent every Friday. Contains the latest articles, tutorials, tools, and resources.
[Tuts+ Game Development](https://code.tutsplus.com/c/game-development)
Tutorials and articles about game development in general.
[HTML5 Gamedev Starter](https://html5devstarter.enclavegames.com/)
Starter for the new game developers, a curated list of links to various useful resources around the web.
[js13kGames](https://js13kgames.com/)
JavaScript coding competition for HTML game developers with the file size limit set to 13 kilobytes. All the submitted games are available in a readable form on GitHub.
[Mozilla Hacks Blog](https://hacks.mozilla.org/category/games/)
Games category on the Mozilla Hacks blog containing interesting gamedev related articles.

115
data/developer.mozilla.org/en-US/docs/Games-1.md Normal file
View File

@ -0,0 +1,115 @@
---
title: "Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:48.925297+00:00"
instance: "kb-cron"
---
[Games section on wiki.mozilla.org](https://wiki.mozilla.org/Platform/Games)
A wiki page with information about Mozilla's involvement in platform games.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Apr 6, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/index.md?plain=1 "Folder: en-us/games \(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&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%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F09d8ff096be97b28ea415fc4c68fb1cff0ff8af9%0A*+Document+last+modified%3A+2026-04-06T19%3A43%3A24.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).

180
data/developer.mozilla.org/en-US/docs/Games/Anatomy-0.md Normal file
View File

@ -0,0 +1,180 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 1/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Anatomy#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Anatomy#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Anatomy of a video game](https://developer.mozilla.org/en-US/docs/Games/Anatomy)
# Anatomy of a video game
This article looks at the anatomy and workflow of the average video game from a technical point of view, in terms of how the main loop should run. It helps beginners to modern game development understand what is required when building a game and how web standards like JavaScript lend themselves as tools. Experienced game programmers who are new to web development could also benefit, too.
## In this article
* [Present, accept, interpret, calculate, repeat](https://developer.mozilla.org/en-US/docs/Games/Anatomy#present_accept_interpret_calculate_repeat)
* [Building a main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_main_loop_in_javascript)
* [Building a better main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_better_main_loop_in_javascript)
* [Building a more optimized main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_more_optimized_main_loop_in_javascript)
* [It is decision… time](https://developer.mozilla.org/en-US/docs/Games/Anatomy#it_is_decision%E2%80%A6_time)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Anatomy#summary)

17
data/developer.mozilla.org/en-US/docs/Games/Anatomy-1.md Normal file
View File

@ -0,0 +1,17 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 2/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
## [Present, accept, interpret, calculate, repeat](https://developer.mozilla.org/en-US/docs/Games/Anatomy#present_accept_interpret_calculate_repeat)
The goal of every video game is to **present** the user(s) with a situation, **accept** their input, **interpret** those signals into actions, and **calculate** a new situation resulting from those acts. Games are constantly looping through these stages, over and over, until some end condition occurs (such as winning, losing, or exiting to go to bed). Not surprisingly, this pattern corresponds to how a game engine is programmed. The specifics depend on the game. Some games drive this cycle by user input. Imagine that you are developing a _"find the differences between these two similar pictures"_ -type game. These games **present** two images to the user; they **accept** their click (or touch); they **interpret** the input as a success, failure, pause, menu interaction, etc.; finally, they **calculate** an updated scene resulting from that input. The game loop is advanced by the user's input and sleeps until they provide it. This is more of a turn-based approach that doesn't demand a constant update every frame, only when the player reacts. Other games demand control over each of the smallest possible individual timeslices. The same principles as above apply with a slight twist: each frame of animation progresses the cycle and any change in user input is caught at the first available turn. This once-per-frame model is implemented in something called a **main loop**. If your game loops based on time then this will be its authority that your simulations will adhere to. But it might not need per-frame control. Your game loop might be similar to the _find the differences_ example and base itself on input events. It might require both input and simulated time. It might even loop based on something else entirely. Modern JavaScript — as described in the next sections — thankfully makes it less difficult to develop an efficient, execute-once-per-frame main loop. Of course, your game will only be as optimized as you make it. If something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always). ## [Building a main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_main_loop_in_javascript)
JavaScript works best with events and callback functions. Modern browsers strive to call methods right as they are needed and idle (or do their other tasks) in the gaps. It is an excellent idea to attach your code to the moments that are appropriate for them. Think about whether your function really needs to be called on a strict interval of time, every frame, or only after something else happens. Being more specific with the browser about when your function needs to be called allows the browser to optimize when it is called. Also, it will probably make your job easier. Some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? On the Web, [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) will be the foundation of most well-programmed per-frame main loops. A callback function must be passed in to it when it is called. That callback function will be executed at a suitable time before the next repaint. Here is an example of a simple main loop:
**Note:** In each of the `main()` methods discussed here, we schedule a new `requestAnimationFrame` before performing our loop contents. That is not by accident and it is considered best practice. Calling the next `requestAnimationFrame` early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window. The above chunk of code has two statements. The first statement creates a function as a global variable called `main()`. This function does some work and also tells the browser to call itself next frame with `window.requestAnimationFrame()`. The second statement calls the `main()` function, defined in the first statement. Because `main()` is called once in the second statement and every call of it places itself in the queue of things to do next frame, `main()` is synchronized to your frame rate. Of course this loop is not perfect. Before we discuss ways to change it, let us discuss what it already does well. Timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. You are given control over each frame of animation. It is also very simple because `main()` is the only function getting looped. A First-Person Shooter (or a similar game) presents a new scene once every frame. You cannot really get more smooth and responsive than that. But do not immediately assume animations require frame-by-frame control. Simple animations can be easily performed, even GPU-accelerated, with CSS animations and other tools included in the browser. There are a lot of them and they will make your life easier. ## [Building a better main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_better_main_loop_in_javascript)
There are two obvious issues with our previous main loop: `main()` pollutes the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object (where all global variables are stored) and the example code did not leave us with a way to _stop_ the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need direct access to it, you could create it as an Immediately-Invoked Function Expression (IIFE). When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and `main` (or `main()` for methods) will be a valid unused name in the rest of the application, free to be defined as something else. **Note:** In practice, it is more common to prevent the next `requestAnimationFrame()` with an if-statement, rather than calling `cancelAnimationFrame()`. For the second issue, stopping the main loop, you will need to cancel the call to `main()` with [`window.cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame). You will need to pass `cancelAnimationFrame()` the ID token given by `requestAnimationFrame()` when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called `MyGame`. Expanding our last example, the main loop would now look like:
We now have a variable declared in our `MyGame` namespace, which we call `stopMain`, that contains the ID returned from our main loop's most recent call to `requestAnimationFrame()`. At any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token. The key to programming a main loop, in JavaScript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay. You may have multiple components driven by multiple different types of events. This feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). The problem is that you are not programming a typical main loop. In JavaScript, you are using the browser's main loop and you are trying to do so effectively. ## [Building a more optimized main loop in JavaScript](https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_more_optimized_main_loop_in_javascript)
Ultimately, in JavaScript, the browser is running its own main loop and your code exists in some of its stages.

12
data/developer.mozilla.org/en-US/docs/Games/Anatomy-2.md Normal file
View File

@ -0,0 +1,12 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 3/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
The above sections describe main loops that avoid taking control away from the browser. These main methods attach themselves to `window.requestAnimationFrame()`, which asks the browser for control over the upcoming frame. It is up to the browser how to relate these requests to its main loop. The [HTML spec](https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe) does not really define exactly when the browsers must perform the `requestAnimationFrame` callbacks. This can be a benefit because it leaves browser vendors free to experiment with the solutions that they feel are best and tweak them over time. Modern versions of Firefox and Google Chrome (and probably others) _attempt_ to connect `requestAnimationFrame` callbacks to their main thread at the very beginning of a frame's timeslice. The browser's main thread thus _tries_ to look like the following:
1. Start a new frame (while the previous frame is handled by the display). 2. Go through the list of `requestAnimationFrame` callbacks and invoke them. 3. Perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread. 4. Sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image ([VSync](https://en.wikipedia.org/wiki/Screen_tearing#Vertical_synchronization)) and repeat.

28
data/developer.mozilla.org/en-US/docs/Games/Anatomy-3.md Normal file
View File

@ -0,0 +1,28 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 4/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
You can think about developing realtime applications as having a budget of time to do work. All of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 Hz display. Browsers invoke your code as early as possible to give it maximum computation time. Your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in WebGL). Long calculations can be performed on a Web Worker or a GPU at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events.
While we are on the topic of budgeting time, many web browsers have a tool called _High Resolution Time_. The [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object is no longer the recognized method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since `navigationStart` (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a [`DOMHighResTimeStamp`](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) but, for all intents and purposes, consider it a floating point number.
**Note:** Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.
This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call `window.performance.now()` and store the result as a variable.
Back to the topic of the main loop. You will often want to know when your main function was invoked. Because this is common, `window.requestAnimationFrame()` always provides a `DOMHighResTimeStamp` to callbacks as an argument when they are executed. This leads to another enhancement to our previous main loops.
Several other optimizations are possible and it really depends on what your game attempts to accomplish. Your game genre will obviously make a difference but it could even be more subtle than that. You could draw every pixel individually on a canvas or you could layer DOM elements (including multiple WebGL canvases with transparent backgrounds if you want) into a complex hierarchy. Each of these paths will lead to different opportunities and constraints.
## [It is decision… time](https://developer.mozilla.org/en-US/docs/Games/Anatomy#it_is_decision%E2%80%A6_time)
You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.
**Note:** Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs carefully before working on your main loop.
### [What most browser games should look like](https://developer.mozilla.org/en-US/docs/Games/Anatomy#what_most_browser_games_should_look_like)
If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can update, render, and then do nothing until VSync.
If the maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. The most famous example of this concept is the game from id Software, RAGE. This game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). If computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. This (non-web) case study made a few assumptions and tradeoffs:
* Each frame of animation accounts for user input.
* No frame needs to be extrapolated (guessed) because each draw has its own update.
* Simulation systems can basically assume that each full update is ~16ms apart.
* Giving the user control over quality settings would be a nightmare.
* Different monitors input at different rates: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.
* Systems that are unable to keep up with 60 FPS lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.)

40
data/developer.mozilla.org/en-US/docs/Games/Anatomy-4.md Normal file
View File

@ -0,0 +1,40 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 5/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
### [Other ways to handle variable refresh rate needs](https://developer.mozilla.org/en-US/docs/Games/Anatomy#other_ways_to_handle_variable_refresh_rate_needs)
Other methods of tackling the problem exist.
One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:
* Draw on `requestAnimationFrame()` and update on a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval "setInterval\(\)") or [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout "setTimeout\(\)").
* This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.)
* Draw on `requestAnimationFrame()` and update on a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/setInterval "setInterval\(\)") or [`setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/setTimeout "setTimeout\(\)") in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers).
* This is the same as above, except update does not hog the main thread (nor does the main thread hog it). This is a more complex solution, and might be too much overhead for simple updates.
* Draw on `requestAnimationFrame()` and use it to poke a Web Worker containing the update method with the number of ticks to compute, if any.
* This sleeps until `requestAnimationFrame()` is called and does not pollute the main thread, plus you are not relying on old-fashioned methods. Again, this is a bit more complex than the previous two options, and _starting_ each update will be blocked until the browser decides to fire rAF callbacks.
Each of these methods have similar tradeoffs:
* Users can skip rendering frames or interpolate extra ones depending on their performance.
* You can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups.
* Much more complicated to program than the basic loops we saw earlier.
* User input is completely ignored until the next update (even if the user has a fast device).
* The mandatory interpolation has a performance penalty.
A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writability).
**Warning:** This example, specifically, is in need of technical review.
Another alternative is to do certain things less often. If a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. An implicit example of this was found over at The Artillery Blog for Artillery Games, where they [adjust their rate of garbage generation](https://web.archive.org/web/20161021030645/http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html) to optimize garbage collection. Obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).
This may also apply to some of your own tasks. Those are good candidates to throttle when available resources become a concern.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Anatomy#summary)
I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this, but I have heard it is an excruciating exercise in chasing regressions.
An important thing to remember for managed platforms, like the web, is that your loop may stop execution for significant periods of time. This could occur when the user unselects your tab and the browser sleeps (or slows) its `requestAnimationFrame` callback interval. You have many ways to deal with this situation and this could depend on whether your game is single player or multiplayer. Some choices are:
* Consider the gap "a pause" and skip the time.
* You can probably see how this is problematic for most multiplayer games.
* You can simulate the gap to catch up.
* This can be a problem for long drops and/or complex updates.
* You can recover the game state from a peer or the server.
* This is ineffective if your peers or server are out-of-date too, or they don't exist because the game is single player and doesn't have a server.

113
data/developer.mozilla.org/en-US/docs/Games/Anatomy-5.md Normal file
View File

@ -0,0 +1,113 @@
---
title: "Anatomy of a video game - Game development | MDN"
chunk: 6/6
source: "https://developer.mozilla.org/en-US/docs/Games/Anatomy"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:51.278426+00:00"
instance: "kb-cron"
---
Once your main loop has been developed and you have decided on a set of assumptions and tradeoffs which suit your game, it is now just a matter of using your decisions to calculate any applicable physics, AI, sounds, network synchronization, and whatever else your game may require.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Feb 27, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Anatomy/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/anatomy/index.md?plain=1 "Folder: en-us/games/anatomy \(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%2FAnatomy&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%2Fanatomy%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FAnatomy%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fanatomy%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F4833ab42e0aee7611fff57f70e38c4be1df9d11b%0A*+Document+last+modified%3A+2026-02-27T08%3A31%3A01.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).

199
data/developer.mozilla.org/en-US/docs/Games/Introduction-0.md Normal file
View File

@ -0,0 +1,199 @@
---
title: "Introduction to game development for the Web - Game development | MDN"
chunk: 1/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"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Introduction#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Introduction#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Introduction to game development for the Web](https://developer.mozilla.org/en-US/docs/Games/Introduction)
# Introduction to game development for the Web
The modern web has quickly become a viable platform not only for creating stunning, high quality games, but also for distributing those games. This article introduces you to the advantages of using the Web as a game platform, and the technologies that make it possible.
The range of games that can be created is on par with desktop and native OS counterparts. With modern Web technologies and a recent browser, it's entirely possible to make stunning, top-notch games for the Web. And we're not talking about simple card games or multiplayer social games that have in the olden days been done using Flash®. We're talking about 3D action shooters, RPGs, and more. Thanks to massive performance improvements in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) just-in-time compiler technology and new APIs, you can build games that run in the browser (or on [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)-powered devices) without making compromises.
## In this article
* [The HTML game platform](https://developer.mozilla.org/en-US/docs/Games/Introduction#the_html_game_platform)
* [The business case](https://developer.mozilla.org/en-US/docs/Games/Introduction#the_business_case)
* [Web technologies for game developers](https://developer.mozilla.org/en-US/docs/Games/Introduction#web_technologies_for_game_developers)
## [The HTML game platform](https://developer.mozilla.org/en-US/docs/Games/Introduction#the_html_game_platform)
You can truly think of the Web as a better target platform for your game. As we like to say, "the Web is the platform." Let's take a look at the core of the Web platform:
| Function | Technology |
| --- | --- |
| **Audio** | [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) |
| **Graphics** | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) ([OpenGL ES](https://www.khronos.org/opengles/) 2.0) |
| **Input** | [Touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events), [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), device sensors, [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API), [Full Screen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) |
| **Language** | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (or C/C++ using [Emscripten](https://github.com/emscripten-core/emscripten/wiki) to compile to JavaScript) |
| **Networking** | [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) and/or [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) |
| **Storage** | [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) or the "cloud" |
| **Web** | [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (and much more!) |
## [The business case](https://developer.mozilla.org/en-US/docs/Games/Introduction#the_business_case)
As a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the Web with your next game project. Let's look at how the Web can help you.
1. The reach of the Web is enormous; it's everywhere. Games built with HTML work on smartphones, tablets, PCs and Smart TVs.
2. Marketing and discoverability are improved. You're not limited to promoting your app on someone else's app store. Instead, you can advertise and promote your game all over the Web as well as other media, taking advantage of the Web's inherent linkability and shareability to reach new customers.
3. You have control where it matters: Payments. You don't have to hand over 30% of your revenues to someone else just because your game is in their ecosystem. Instead, charge what you want and use whatever payment processing service you like.
4. Again with more control, you can update your game whenever you want. No waiting breathlessly for approval while someone hidden within another company decides whether your critical bug fix will ship today or tomorrow.
5. Control your analytics! Instead of relying on someone else to make all the decisions about what analytics you need, you can collect your own — or choose the third party that you like the best — to gather information about your sales and your game's reach.
6. You get to manage your customer relationship more closely, in your own way. No more having customer feedback filtered through an app store's limited mechanisms. Engage with your customers the way you want to, without a middleman.
7. Your players can play your game anywhere, anytime. Because the Web is ubiquitous, your customers can check their game's status on their phones, tablets, their home laptops, their work desktops, or anything else.

174
data/developer.mozilla.org/en-US/docs/Games/Introduction-1.md Normal file
View File

@ -0,0 +1,174 @@
---
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).

328
data/developer.mozilla.org/en-US/docs/Games/Publishing_games-0.md Normal file
View File

@ -0,0 +1,328 @@
---
title: "Publishing games - Game development | MDN"
chunk: 1/1
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:55.648908+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
# Publishing games
HTML games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the Web, rather than each version being locked into a single store controlled by one company. You can benefit from the web being truly multiplatform. This series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
## In this article
* [Game distribution](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_distribution)
* [Game promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_promotion)
* [Game monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_monetization)
## [Game distribution](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_distribution)
So you've followed a [tutorial](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) or [two](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser) and created an HTML game — that's great! [Game distribution](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution) provides all you need to know about the ways you can distribute your newly created game into the wild — including hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like Google Play or the iOS App Store.
## [Game promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_promotion)
Developing and finishing the game is not enough. You have to let the world know that you have made something interesting available, which people will enjoy playing. There are many [Game promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) techniques — many of them free — so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. Promoting the game helps a lot in monetizing it later on too, so it's important to do it effectively.
## [Game monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games#game_monetization)
When you spend your time building, publishing and promoting your game, you will at some point consider earning money out of it. [Game monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization) is essential to anyone who considers their game development work a serious endeavor on the path to becoming an independent game developer able to make a living, so read on and see what your options are. The technology is mature enough; it's just a matter of choosing the right approach.
## 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/Publishing_games/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/publishing_games/index.md?plain=1 "Folder: en-us/games/publishing_games \(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%2FPublishing_games&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%2Fpublishing_games%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FPublishing_games%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fpublishing_games%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).

181
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution-0.md Normal file
View File

@ -0,0 +1,181 @@
---
title: "Game distribution - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:57.815188+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
3. [Game distribution](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution)
# Game distribution
You've followed a [tutorial](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) or [two](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser) and created an HTML game — that's great! This article covers all you need to know about the ways in which you can distribute your newly created game into the wild. This includes hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like Google Play or the iOS App Store.
## In this article
* [Benefits of HTML over native](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#benefits_of_html_over_native)
* [Desktop vs. mobile](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#desktop_vs._mobile)
* [Publishing the game](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#publishing_the_game)
* [Marketplaces — Distribution platforms](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#marketplaces_%E2%80%94_distribution_platforms)
* [Packaging games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#packaging_games)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#summary)

28
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution-1.md Normal file
View File

@ -0,0 +1,28 @@
---
title: "Game distribution - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:57.815188+00:00"
instance: "kb-cron"
---
## [Benefits of HTML over native](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#benefits_of_html_over_native)
Building games with HTML gives you extra advantages, such as:
### [Multiplatform bliss](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#multiplatform_bliss)
The technology itself is multiplatform, so you can write the code once and target multiple devices. This can range from low-end smartphones or tablets, through laptops and desktop computers, to smart TVs, watches or even a fridge if it can handle a modern enough browser.
You don't need to have separate teams to work on the same title targeting different platforms with only one code base to worry about. You can spend more time and money on [Promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) and [Monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization).
### [Instant updates](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#instant_updates)
You don't have to wait several days to have your game's code updated. If your user finds a bug, you can quickly fix it, update the system and refresh the game on your server to provide players with the updated code almost instantly.
### [Direct link distribution and instant play](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#direct_link_distribution_and_instant_play)
You don't have to tell people to search for your game in an app store with HTML games. You can just send them a direct URL to access the game, which they can then click to play the game right away without the need to use third party plugins or download and install a large package. Bear in mind that downloading the game might still take a bit of time depending on the size of the game and your network speed. In any case, it's a lot easier to promote the game if you can drive traffic directly where you want it and don't have to jump through lots of hoops to play.
## [Desktop vs. mobile](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#desktop_vs._mobile)
The vast majority of the traffic we are interested in — people playing HTML games — comes from mobile devices so that's something you will have to focus on if you truly want to succeed. Mobile devices are where HTML technology can truly shine and show its advantages. There's no Flash, and HTML is fully multiplatform.
Trying to compete with desktop games directly is very difficult. You can put your HTML games into the same arena (see [Native desktop](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#native_desktop), later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels. Many HTML games will target different market segments than native desktop games, e.g., simple time killer games to be played while on the move rather than huge immersive experiences. Such games are often designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need.
Saying this, desktop platforms can be used for distribution quite easily with the availability of wrappers that can help you prepare native builds of your game see [Packaging games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#packaging_games). It's also nice to provide desktop controls for your games even if you're mostly targeting mobile. Players are enjoying your games on any platform available, and desktop is one of them. Plus, it is usually easier to build and test the game first on desktop, and then move on to debugging mobile.
## [Publishing the game](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#publishing_the_game)
There are three main options when it comes to publishing a game:
* Self-hosting
* Publishers
* Stores

32
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution-2.md Normal file
View File

@ -0,0 +1,32 @@
---
title: "Game distribution - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:57.815188+00:00"
instance: "kb-cron"
---
Remember that the name of your game should be unique enough to be quickly [promoted](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) later on, but also catchy enough, so people don't forget it.
### [Self-hosting](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#self-hosting)
If you are a front-end developer, you may already know what to do. An HTML game is just another website. You can upload it to a remote server, grab a catchy domain name, and host it yourself.
If you want to make money out of game dev, you should secure your source code one way or another against people who could easily take it and sell it as their own. You can concatenate and minify the code to make it smaller and uglify it so it's a lot harder to reverse engineer your game. Another good measure to take is to provide an online demo if you're planning on packaging it and selling it in a closed store like iTunes or Steam.
If you're working on a side project just for fun, then leaving the source open will benefit those who would like to learn from what you've created. You don't even have to worry about looking for a hosting provider as it's possible to [host games on GitHub Pages](https://end3r.com/blog/host-your-html5-games-on-github-pages). You'll get free hosting, version control and possible contributors if your project is interesting enough.
### [Publishers and portals](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#publishers_and_portals)
As the name may suggest, publishers can handle the publishing of your game for you. Whether you should go that way or not depends on what your plan is for having your game distributed: Do you want to send it wherever possible, or do you want to restrict its presence to those who've bought an [exclusive license](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization)? It's up to you. Consider various options, experiment and conclude. Publishers will be explained in more detail in the [monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization) article.
There are also independent portals collecting interesting games like [HTML5Games.com](https://html5games.com/), [GameArter.com](https://www.gamearter.com/), [MarketJS.com](https://www.marketjs.com/), [GameFlare](https://distribution.gameflare.com/), [GameDistribution.com](https://gamedistribution.com/), [GameSaturn.com](https://gamesaturn.com/), [Playmox.com](https://www.playmox.com/), [Poki](https://developers.poki.com/), or [CrazyGames](https://developer.crazygames.com/) where you can send your game in and it will get some natural promotion because of the big traffic those sites attract. Some of these take your files and host them on their server, whereas others only link to your website or embed your game on their site. Such exposure may just provide [promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) for your game, or if you have adverts shown beside your game (or other money making options) it may also provide monetization.
### [Web and native stores](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#web_and_native_stores)
You can also upload and publish your game directly to different types of stores, or marketplaces. To do that you'll have to prepare and package it to a build format specific for every app ecosystem you want to target it at. See [Marketplaces — distribution platforms](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#marketplaces_%E2%80%94_distribution_platforms) for more details of what marketplace types are available.
## [Marketplaces — Distribution platforms](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#marketplaces_%E2%80%94_distribution_platforms)
Let's see what the available options are regarding the marketplaces/stores available for different platforms and operating systems.
**Note:** These are the most popular distribution platforms, but this is not to say these are the only options. Instead of trying to add your game to the thousands of others in the iOS store say, you can also try to find a niche and promote directly to the audience who would be interested in your games. Your creativity is critical here.
### [Web stores](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#web_stores)
The best platforms for HTML games are Web-based stores. You can prepare games for web stores by adding a manifest file and other data, such as resources, in a zipped package. Not many modifications of the game itself are required.
* [The Chrome Web Store](https://chromewebstore.google.com/) is also an attractive option — again, having a manifest file ready, zipping your game and filling in the online submission form is about all that's required.
### [Native mobile stores](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#native_mobile_stores)
When it comes to the mobile market, there's the Apple App Store for iOS, Google Play for Android and all the rest of the competition. Native stores are already filled with established devs selling great games, so you have to be talented and lucky to get noticed.
* The iOS App Store is quite hard to get into as there are strict requirements games have to meet, and you'll have to wait a week or two to get accepted. Plus, it's the most prominent mobile store, with hundreds of thousands of apps, so it's extremely hard to stand out from the crowd.
* Google Play's requirements are less strict, so the store is polluted with low quality games. It's still quite hard to be noticed there as the number of apps submitted daily is huge. It's harder to earn money here too — most of the paid games from iOS are published as free games on Android, with monetization coming from in-app purchases (IAPs) or ads.
* Other stores for native mobile platforms like Windows Phone or Blackberry are working hard to get a piece of the cake, and are way behind the competition. It can be good to submit your game there as it will be a lot easier to be noticed.

130
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution-3.md Normal file
View File

@ -0,0 +1,130 @@
---
title: "Game distribution - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:20:57.815188+00:00"
instance: "kb-cron"
---
If you're looking for more information about the different types of app stores you can check the [List of mobile software distribution platforms](https://en.wikipedia.org/wiki/List_of_mobile_software_distribution_platforms) article on Wikipedia.
### [Native desktop](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#native_desktop)
To broaden your audience you can hit the desktop ecosystem with your HTML games too — just remember all the popular AAA games that take most of the market share, and think carefully about whether this suits your strategy. To do the desktop thing properly you should support all three operating systems: Windows, macOS and Linux. The biggest desktop store for games is definitely [Steam](https://steamcommunity.com/) — indie developers can get on Steam via the [Steam Direct](https://partner.steamgames.com/steamdirect) program. Remember that you have to deal with the cross-platform issues yourself by uploading separate versions for different platforms.
After you've covered Steam, there's plenty of buzz around initiatives like [Humble Bundle](https://www.humblebundle.com/) where the most popular indie games get presented to a broader audience. It's more like an excellent promotional opportunity than a way to earn a lot of money, however, as the prices paid for the games in a bundle are usually quite low.
## [Packaging games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#packaging_games)
The web is the first and the best choice for HTML games, but if you want to reach a broader audience and distribute your game in a closed ecosystem, you still can do that by packaging it. The good thing is that you don't need a few separate teams working on the same game for different platforms — you can build it once and use tools to package the game for native stores. The resulting packages are usually pretty reliable, but you should still test them and be on the lookout for small issues or bugs to fix.
### [Available tools](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#available_tools)
There are various tools to choose from depending on your skills, preferred frameworks or target platforms. It's all about picking the best tool for your particular task.
* [Ejecta](https://impactjs.com/ejecta) — a tool specifically for packaging games created with [the ImpactJS](https://impactjs.com/) framework for iOS, built by the ImpactJS author. It provides seamless integration with ImpactJS, but it supports only one framework and app store.
* [NW.js](https://nwjs.io/) — formerly known as Node-WebKit, this is the first choice when it comes to building a desktop game that works on Windows, Mac and Linux. The distributions are packaged with the WebKit engine to provide rendering on any platform.
Other alternative tools are:
* [Intel XDK](https://www.intel.com/content/www/us/en/developer/tools/overview.html) — an exciting alternative, similar to CocoonIO.
* [Electron](https://www.electronjs.org/) — known as Atom Shell — is an open-sourced and cross-platform tool from GitHub.
* [Manifold.js](https://www.manifoldjs.com/) — this tool from the Microsoft team can create native distributions of HTML games from iOS, Android, and Windows.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution#summary)
Distribution is the way to give the world access to your game. There are many options available and there's no single good answer as to which is the best. When you've published the game it's time to focus on [promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) — letting people know your game exists. Without promotion, they wouldn't even be able to learn about it and play it.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Oct 28, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/publishing_games/game_distribution/index.md?plain=1 "Folder: en-us/games/publishing_games/game_distribution \(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%2FPublishing_games%2FGame_distribution&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%2Fpublishing_games%2Fgame_distribution%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FPublishing_games%2FGame_distribution%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fpublishing_games%2Fgame_distribution%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Ff8939dd06d7b120f77c4b4c70cac591d0eb20beb%0A*+Document+last+modified%3A+2025-10-28T03%3A23%3A19.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).

181
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization-0.md Normal file
View File

@ -0,0 +1,181 @@
---
title: "Game monetization - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:00.012938+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
3. [Game monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization)
# Game monetization
When you've spent your time building a game, [distributing](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_distribution) it and [promoting](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) it you should consider earning some money out of it. If your work is a serious endeavor on the path to becoming an independent game developer able to make a living, read on and see what your options are. The technology is mature enough; now it's just about choosing the right approach.
## In this article
* [Paid games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#paid_games)
* [In-app purchases](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#in-app_purchases)
* [Advertisements](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#advertisements)
* [Licensing](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#licensing)
* [Other non-game focused monetization strategies](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#other_non-game_focused_monetization_strategies)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#summary)

19
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization-1.md Normal file
View File

@ -0,0 +1,19 @@
---
title: "Game monetization - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:00.012938+00:00"
instance: "kb-cron"
---
## [Paid games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#paid_games)
The first, most obvious choice that may come to your mind might be selling the games the way it is done for huge AAA titles — with a fixed, up front price. Even though the digital market is key and you don't need to print covers and put your game in a physical store in boxes, to earn decent money on selling your games for a fixed price you have to invest your time and money in marketing. Only the best games will break even or earn more than they cost to make, and you still need a lot of luck for that. How much you charge for your game depends on the market, quality of your game and a lot of other small factors. An arcade iOS title can be sold for 0.99 USD, but a longer RPG-style desktop game on Steam can cost 20 USD; both prices are OK. You have to follow the market and do your own research — learning from your mistakes quickly is important. ## [In-app purchases](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#in-app_purchases)
Instead of having people pay for your game up front, you can offer a free game with in-app purchases (IAPs.) In this case the game can be acquired without spending a dime — give the game to the players, but offer in-game currency, bonuses or benefits for real money. Specific examples can include bonus levels, better weapons or spells, or refilling the energy needed to play. Designing a good IAP system is an art of its own. Remember that you need thousands of downloads of your game to make IAPs effective — only a small fraction of players will actually pay for IAPs. How small? It varies, but around one person in every thousand is about average. The more people that play your game, the higher the chance someone will pay, so your earnings heavily depend on your [promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) activities. ### [Freemium](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#freemium)
Games that feature IAPs are often referred to a **freemium** — a freemium game can be acquired and played for free, but you can pay for extra (premium) features, virtual goods or other benefits. The word itself acquired negative connotations after big companies focused on creating games, the main purpose of which was to get as much money from the players as possible instead of delivering a fun experience. The worst cases were when you could use real money to pay for getting advantages over other players, or when they restricted access to the next stages of the game unless the players paid. The term "pay to win" was coined and this approach is disliked by many players and devs. If you want to implement IAPs try to add value to the game with something players will enjoy instead of taking it out and then charging for it. ### [Add-ons and DLCs](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#add-ons_and_dlcs)
Add-ons and downloadable content are a good way to provide extra value to an already released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it. A totally new set of levels with new characters, weapons and story is a good material for DLC, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard-earned money on it. ## [Advertisements](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#advertisements)
Instead of actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to [promoting](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. You still need to plan it out, and at some point you'll need a bit of luck too. If your game goes viral and people start sharing it, you can get a lot of downloads and money out of adverts. There are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings. Google AdSense is said to be the most effective one, but it's not designed for games and it's a pretty bad practice to use it for that purpose. Instead of risking of having your account closed and all the money blocked try to use the usual, gamedev targeted portals like [LeadBolt](https://www.leadboltapps.com/). They offer easy to implement systems to show the adverts in your games and split the earnings with you. Video ads are getting more and more popular, especially in the form of a pre-roll — they are shown at the beginning of your game while it's still loading. And on the topic of where to put the advertisements in your game it really depends on you. It should be as subtle as possible to not annoy the players too much, but visible enough to make them click it or at least take notice. Adding adverts between game sessions on game over screens is a popular approach. ## [Licensing](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#licensing)
There's an approach that can work as a monetization model on its own, and that's selling licenses for distribution of your game. There are more and more portals interested in showing your games on their websites. They follow various strategies to earn money via your games, but you don't have to worry about all that as selling the license is usually a one-time deal. You get the money and they can get creative with using your game to make money. Finding publishers might be hard at first — try to look for them at the [HTML5 Gamedevs forums](https://www.html5gamedevs.com/). If you're well known they may reach out to you. Most of the deals are done through emails when talking to a dedicated person on the publisher side. Some publisher websites have that information easily available, while some others are harder to find. When reaching a publisher try to be nice and straight to the point — they are busy people. ### [Exclusive licenses](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#exclusive_licenses)
The exclusive license is a type of license for one publisher — you've built a game and you're selling all the rights to it to a single entity along with the rights to redistribute it — [Softgames](https://www.softgames.com/) are an example of such a publisher. You can't sell it again in any form while that publisher has the rights — that's why exclusive deals are worth quite a lot of money. How much exactly? It depends on the quality of the game, its genre, its publisher, and many others, but usually it will be something between 2000 and 5000 USD. Once you've sold an exclusive license you can forget about promoting that particular game as you won't earn more, so go into such a deal only if you're sure it's profitable enough. ### [Non-exclusive licenses](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#non-exclusive_licenses)
This approach is less strict — you can sell a license to multiple publishers. This is the most popular approach as with every new publisher (and they are constantly showing up) you can sell your games on non-exclusive terms. Remember that with this license the publisher can't redistribute it further — it's often called a site-locked deal as they buy the right to publish the game on their own given portal. The usual cost of a non-exclusive license is around 500 USD.

120
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization-2.md Normal file
View File

@ -0,0 +1,120 @@
---
title: "Game monetization - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:00.012938+00:00"
instance: "kb-cron"
---
### [Subscriptions](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#subscriptions)
There's also an option to get a passive, monthly revenue via a subscription deal. Instead of getting a one-time payment you can get a small amount of money per game, per month — it can be something around 20-50 USD per month, per game. It's normally up to you if you want to get all the money in a lump sum or get it per month. Remember that it can be cancelled, so it's not an indefinitely working solution. ### [Ad revenue](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#ad_revenue)
You can implement advertisements in your game on your own and try to find the traffic to earn a bit, but you can also do a revenue share deal with a publisher. They will take care of driving the traffic and will split the earnings — usually in a 70/30 or 50/50 deal, collected per month. Remember that many new, low quality publishers will want to get your game for ad revenue instead of licensing because it will be cheaper for them and you might end up with earnings around 2 USD per game for the whole deal. Be careful when dealing with new publishers — sometimes it's better to lower the license cost for a known one rather than risking fraud with an unknown publisher for more money. Publishers taking your games for revenue share, and/or licensing may require implementing their own APIs, which could take extra work, so consider that in your rates too. ### [Branding](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#branding)
You can sell rights to use your game for branding, or do it yourself. In the first case it's almost like non-exclusive licensing, but the client will usually buy rights for the code and implement their own graphics. In the second case it's like a freelance deal, but you're reusing the code and adding graphics provided by the client, sometimes implementing them as they instruct you. As an example if you've got a game where a player taps items of food, you could change the food to the client's products to give them advertising. Prices in this model vary greatly depending on the brand, client, and amount of work you put in. ## [Other non-game focused monetization strategies](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#other_non-game_focused_monetization_strategies)
There are other ways you can earn money when building HTML games, and it doesn't even have to be game-related. ### [Selling resources](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#selling_resources)
If you're a graphic designer, you can sell the assets from the games you've created, or something brand new exclusively for that purpose at online shops like [Envato Market](https://themeforest.net/). It's not much, but if you're a known designer it can be an extra passive stream of income. ### [Writing articles and tutorials](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#writing_articles_and_tutorials)
It is possible to write articles about your games and even get paid for them. Game [promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion) and monetization at the same time is a win-win, and if you don't abuse it with too much advertising the readers will enjoy reading them and as well as learning a thing or two. If you focus on sharing the knowledge first and use your games just as the examples it should be OK. Check out [Tuts+ Game Development](https://code.tutsplus.com/c/game-development) or similar websites for writing opportunities. ### [Merchandise](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#merchandise)
You can sell t-shirts, [stickers](https://www.stickermule.com/custom-stickers) or other gadgets — some devs make more money from the merchandise than from the games themselves, but it only works on very popular and recognizable games like Angry Birds. Still, it could be another small stream of passive income. The more diversified your earnings are, the better your business stability. ### [Donations](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#donations)
When all else fails you can try putting a donate button on your game's page and asking for support from the community. Sometimes it works, but only if the player knows you and feels that it will help you in your situation. That's why carefully managing your community is so important. It worked with the [js13kGames](https://js13kgames.com/) competition — every participant got a free t-shirt, and some even gave back a few bucks to help keep it going in years to come. ## [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#summary)
There are many ways to earn money — everything that applies to the "normal" AAA gaming world can be, more or less, applied to casual HTML games. You might however also focus on selling licenses, doing branding, or earning on a revenue share basis from the advertisements. It's totally up to you which path you're going to follow. ## 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/Publishing_games/Game_monetization/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/publishing_games/game_monetization/index.md?plain=1 "Folder: en-us/games/publishing_games/game_monetization \(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%2FPublishing_games%2FGame_monetization&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%2Fpublishing_games%2Fgame_monetization%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FPublishing_games%2FGame_monetization%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fpublishing_games%2Fgame_monetization%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).

185
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion-0.md Normal file
View File

@ -0,0 +1,185 @@
---
title: "Game promotion - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:02.118981+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Publishing games](https://developer.mozilla.org/en-US/docs/Games/Publishing_games)
3. [Game promotion](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion)
# Game promotion
Developing and publishing your game is not enough. You have to let the world know that you have something interesting available that people will enjoy playing. There are many ways to promote your game — most of them being free, so even if you're struggling to make a living as an indie dev with zero budget you can still do a lot to let people know about your great new game. Promoting the game helps a lot when [monetizing](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization) it later on too, so it's important to do it correctly.
## In this article
* [Competitions](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#competitions)
* [Website and blog](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#website_and_blog)
* [Social media](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#social_media)
* [Game portals](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#game_portals)
* [Press](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#press)
* [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#tutorials)
* [Events](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#events)
* [Promo codes](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#promo_codes)
* [Fostering the community](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#fostering_the_community)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#summary)

19
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion-1.md Normal file
View File

@ -0,0 +1,19 @@
---
title: "Game promotion - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:02.118981+00:00"
instance: "kb-cron"
---
## [Competitions](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#competitions)
Taking part in competitions will not only level up your gamedev skills and let you meet new devs to befriend and learn from — and it will also get you involved in the community. If you make a good game for a competition and win some prizes in the process your game will automatically be promoted by the organizers and other attendees. You'll be rich and famous, or so they say. Many great games get started as a quick, sloppy demo submitted to a competition. If both the idea and the execution are good enough, you will succeed. Plus competitions generally require games to follow a mandatory theme, so you can get creative around a theme if you are stuck for ideas. ## [Website and blog](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#website_and_blog)
You should definitely create your own website containing all the information about your games, so people can see what you've worked on. The more information you can include the better — you should include screenshots, description, trailer, press kit, requirements, available platforms, support details and more. You'll get bonus points for allowing your users to directly play your games online — at least in demo form. Also, you should do some work on SEO to allow people to find your games more easily. You should also blog about everything related to your gamedev activities. Write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game developer. Continually publishing information about your games will help educate others, increase your reputation in the community, and further improve SEO. A further option is to publish [monthly reports](https://end3r.com/blog?s=monthly+report) that summarize all your progress — it helps you see what you've accomplished throughout the month and what's still left to do, and it keeps reminding people that your game is coming out soon — building buzz is always good. While you can create your website from scratch, there are also tools that can help make the process easier. [ManaKeep](https://manakeep.com/) is a website builder made for indie game developers and provides a great starting point to create your website. [Presskit()](https://dopresskit.com/) is a press kit builder that helps you create a press page to share with the media. ## [Social media](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#social_media)
Your social media presence is very important. The `#gamedev` hashtag can help find friends and allow you to engage with the community and help other devs in need. Honesty is key and you should be authentic; nobody likes boring press releases or pushy advertisements. When the time comes, your community will help you spread the word about your shiny new game! Keep an eye on gamers who stream on YouTube and Twitch, and be active on forums such as [HTML5GameDevs.com](https://www.html5gamedevs.com/). Share your news and answer questions so that people will value what you're doing and will know that you're trustworthy. Remember to not be too pushy when it comes to telling everyone about your games — you're not a walking advertisement. Grow your audience by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy browser you have to deal with. Be generous, be yourself and be there for others, and you'll be treated with respect. ## [Game portals](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#game_portals)
Using game portals is mostly concerned with [monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization), but if you're not planning to [sell licenses](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#licensing) to allow people to purchase your game and intend to [implement adverts](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization#advertisements) or in-app purchases instead, promoting your game across free portals can be effective. There are a number of different game portals to which you can send your games for publication. Some portals have their own APIs that allow you to authorize users, save their progress and process in-app purchases. You can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. Most portals offer revenue share deals or will buy nonexclusive licenses. Free portals offer traffic, but only the best ones are popular enough to generate revenues from advertisements on in-app purchases. On the other hand, they are a perfect tool to make games visible to a broader audience if you have no budget and limited time. ## [Press](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#press)
You can try and reach the [press](https://indiegamesplus.com/) about your game, but bear in mind that they get a tonne of requests like this every single day, so be humble and patient if they don't answer right away, and be polite when talking to them. Be sure to check first if they are dealing with specific genres of games or platforms, so you don't send them something that is not relevant to them in the first place. If you're honest with your approach and your game is good, then you've got more of a chance of success. If you want to learn more about the etiquette of contacting the press you should check out [How To Contact Press](https://app.box.com/s/p0ft5zdolpi0ydkrykab) - a great guide from Pixel Prospector. ## [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#tutorials)
It's good to share your knowledge with other devs — after all, you probably learned a thing or two from online articles, so you take the time to pay that knowledge forward. Talking or writing about something you achieved or problems you overcame is something people would be interested in. Also, you can use your own game as an example, especially in a tutorial when you're [showing how to do something you've implemented already](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API). That way everyone benefits — people learn new skills, your game gets promoted, and if you're lucky you can even get paid for writing a tutorial if it's good enough. There are portals like [Tuts+ Game Development](https://code.tutsplus.com/c/game-development) which will be more than happy if you write for them - they pay for the content, but not all topic ideas will be accepted. When writing a tutorial remember to focus on delivering something valuable to the reader. They want to learn something - offer your expertise and use your game as a case study. Focus on one aspect and try to explain it throughout and in detail. Also, remember to follow up on discussions in your comments if people have any questions. If portals you contact are not interested in your content because you don't have any experience yet, try writing tutorials and then publish them on [your own blog](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#website_and_blog) first. It's the easiest way to train your writing skills on your own. ## [Events](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#events)
If you've gone through all the options listed above you can still find new, creative ways to promote your game — events are another good example. Attending events, both local and global, gives you the ability to meet your fans face to face, as well as other members of the development community. Value the fact that they spent their time seeing you. ### [Conferences](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#conferences)
There are many conferences where you can give a talk explaining some technical difficulties you overcame, or how you implemented specific APIs; again — use your games as examples for that.

115
data/developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion-2.md Normal file
View File

@ -0,0 +1,115 @@
---
title: "Game promotion - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:02.118981+00:00"
instance: "kb-cron"
---
It's important to focus on the knowledge part and tone down the marketing — devs are sensitive on this matter and you may end up with an angry crowd if you just try to sell them something. ### [Fairs](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#fairs)
The other event-related option is fairs (or expos) — at such an event you can get a booth among other devs and promote your game to all the attendees passing by. If you do so, try to be unique and original, so you easily stand out from the crowd. Do it the right way and everybody will be talking about you and your game. Having a booth gives you the possibility to interact with your fans directly — besides the promotion part, you can also test new builds of your game on regular people and fix any bugs (or incorporate any feedback) they uncover. You can't imagine what people may come up with when playing your game, and what obvious issues you've missed while spending hours polishing it. ## [Promo codes](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#promo_codes)
If you're selling the game, then create the ability to distribute promo codes allowing people to access your game for free (or at least a demo or time-limited version), and send them all over the place — to press, YouTubers, as competition prizes, etc. If the game reaches certain people you'll get a free advert to thousands of players. It can boost interest in your game more than anything else if you get lucky. ## [Fostering the community](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#fostering_the_community)
You can help community grow and promote yourself and your games at the same time. Sending out [weekly newsletters](https://gamedevjsweekly.com/) and organizing [online competitions](https://js13kgames.com/) or [local meetups](https://gamedevjs.com/) will show others that you're passionate about what you do and that they can rely on you. Then when you need any help they will be there for you. ## [Summary](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_promotion#summary)
Any way of promoting your game is good. You have a lot of options to choose from with most of them being free, so it's only about your enthusiasm and available time. Sometimes you have to spend more time promoting a game than actually developing it. Remember that it's no use to have the best game in the world if no one knows it exists. Now, let's get on with that [monetization](https://developer.mozilla.org/en-US/docs/Games/Publishing_games/Game_monetization) part, and earn something for a living. ## 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/Publishing_games/Game_promotion/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/publishing_games/game_promotion/index.md?plain=1 "Folder: en-us/games/publishing_games/game_promotion \(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%2FPublishing_games%2FGame_promotion&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%2Fpublishing_games%2Fgame_promotion%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FPublishing_games%2FGame_promotion%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Fpublishing_games%2Fgame_promotion%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).

209
data/developer.mozilla.org/en-US/docs/Games/Techniques-0.md Normal file
View File

@ -0,0 +1,209 @@
---
title: "Techniques for game development - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:04.390633+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
# Techniques for game development
This page lists essential core techniques for anyone wanting to develop games using open web technologies.
[2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)
Algorithms to detect collision in 2D games depend on the type of shapes that can collide (e.g., Rectangle to Rectangle, Rectangle to Circle, Circle to Circle). Generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities. This article provides a review of the most common techniques used to provide collision detection in 2D games.
[3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
This article provides an introduction to the different bounding volume techniques used to implement collision detection in 3D environments. Followup articles will cover implementations in specific 3D libraries.
[3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
For rich gaming experiences on the web, the weapon of choice is WebGL, which is rendered on HTML `canvas`. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course, also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.
[Async scripts for asm.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts)
Every medium or large game should compile [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js) code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. In Gecko, async compilation allows the JavaScript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in Firefox 28). To see the difference, toggle `javascript.options.parallel_parsing` in `about:config`.
[Audio for Web games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games)
Audio is an important part of any game; it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to navigate. We often need to decide which audio parts are essential to our games' experience and which are nice to have but not essential, and devise a strategy accordingly. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.
[Crisp pixel art look with image-rendering](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look)
This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art look, even on high definition monitors.
[Implementing controls using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)
This article looks at implementing an effective, cross-browser control system for web games using the Gamepad API, allowing you to control your web games using console game controllers. It features a case study game — Hungry Fridge, created by [Enclave Games](https://enclavegames.com/).
[Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
One of HTML5's main advantages as a game development platform is the ability to run on various platforms and devices. Streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. In this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
[Tiles and tilemaps overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps)
Tilemaps are a very popular technique in 2D game development, consisting of building the game world or level map out of small, regular-shaped images called **tiles**. This results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. This set of articles covers the basics of creating tile maps using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) (although the same high level techniques could be used in any programming language.)

115
data/developer.mozilla.org/en-US/docs/Games/Techniques-1.md Normal file
View File

@ -0,0 +1,115 @@
---
title: "Techniques for game development - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:04.390633+00:00"
instance: "kb-cron"
---
[WebRTC data channels](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels)
The [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) (Web Real-Time Communications) API is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. This article explains more about this, and shows you how to use libraries to implement data channels in your game.
## 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/Techniques/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/index.md?plain=1 "Folder: en-us/games/techniques \(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%2FTechniques&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%2Ftechniques%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%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).

196
data/developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection-0.md Normal file
View File

@ -0,0 +1,196 @@
---
title: "2D collision detection - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:06.691785+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)
# 2D collision detection
Algorithms to detect collision in 2D games depend on the type of shapes that can collide (e.g., Rectangle to Rectangle, Rectangle to Circle, Circle to Circle). Generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be performant across multiple entities. This article provides a review of the most common techniques used to provide collision detection in 2D games.
## In this article
* [Engine code](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#engine_code)
* [Axis-aligned bounding box](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#axis-aligned_bounding_box)
* [Circle collision](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#circle_collision)
* [Separating Axis Theorem](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#separating_axis_theorem)
* [Collision performance](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#collision_performance)
## [Engine code](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#engine_code)
The demos in this page don't rely on any external library, so we implement all the orchestration ourselves, which includes rendering, handling user input, and invoking behaviors of each entity. The code is shown below (it won't be repeated for each example):
## [Axis-aligned bounding box](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#axis-aligned_bounding_box)
One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.
## [Circle collision](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#circle_collision)
Another simple shape for collision detection is between two circles. This algorithm works by taking the center points of the two circles and ensuring the distance between the center points are less than the two radii added together.
**Note:** The circles' `x` and `y` coordinates refer to their top left corners, so we need to add the radius to compare their centers.
## [Separating Axis Theorem](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#separating_axis_theorem)
This is a collision algorithm that can detect a collision between any two _convex_ polygons. It's more complicated to implement than the above methods but is more powerful. The complexity of an algorithm like this means we will need to consider performance optimization, covered in the next section.
Implementing SAT is out of scope for this page so see the recommended tutorials below:
1. [Separating Axis Theorem (SAT) explanation](https://www.sevenson.com.au/blog/sat/)
2. [Collision detection and response](https://www.metanetsoftware.com/technique/tutorialA.html)
3. [Collision detection Using the Separating Axis Theorem](https://code.tutsplus.com/collision-detection-using-the-separating-axis-theorem--gamedev-169t)
4. [SAT (Separating Axis Theorem)](https://dyn4j.org/2010/01/sat/)
5. [Separating Axis Theorem](https://programmerart.weebly.com/separating-axis-theorem.html)

118
data/developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection-1.md Normal file
View File

@ -0,0 +1,118 @@
---
title: "2D collision detection - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:06.691785+00:00"
instance: "kb-cron"
---
## [Collision performance](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#collision_performance)
While some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test _every_ entity with every other entity. Usually games will split collision into two phases, broad and narrow.
### [Broad phase](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#broad_phase)
Broad phase should give you a list of entities that _could_ be colliding. This can be implemented with a spatial data structure that will give you a rough idea of where the entity exists and what exist around it. Some examples of spatial data structures are Quad Trees, R-Trees or a Spatial Hashmap.
### [Narrow phase](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#narrow_phase)
When you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on May 4, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/2d_collision_detection/index.md?plain=1 "Folder: en-us/games/techniques/2d_collision_detection \(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%2FTechniques%2F2D_collision_detection&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%2Ftechniques%2F2d_collision_detection%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F2D_collision_detection%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F2d_collision_detection%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fc53bfa01f3bf436d486f4032c16f592855a2af2c%0A*+Document+last+modified%3A+2026-05-04T02%3A41%3A10.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).

179
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection-0.md Normal file
View File

@ -0,0 +1,179 @@
---
title: "3D collision detection - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:09.061133+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
# 3D collision detection
This article provides an introduction to the different bounding volume techniques used to implement collision detection in 3D environments. Followup articles will cover implementations in specific 3D libraries.
## In this article
* [Axis-aligned bounding boxes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#axis-aligned_bounding_boxes)
* [Bounding spheres](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#bounding_spheres)
* [Using a physics engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#using_a_physics_engine)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#see_also)

52
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection-1.md Normal file
View File

@ -0,0 +1,52 @@
---
title: "3D collision detection - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:09.061133+00:00"
instance: "kb-cron"
---
## [Axis-aligned bounding boxes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#axis-aligned_bounding_boxes)
As with 2D collision detection, **axis-aligned bounding boxes** (AABB) are the quickest algorithm to determine whether the two game entities are overlapping or not. This consists of wrapping game entities in a non-rotated (thus axis-aligned) box and checking the positions of these boxes in the 3D coordinate space to see if they are overlapping.
![Two 3-D non-square objects floating in space encompassed by virtual rectangular boxes.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/screen_shot_2015-10-16_at_15.11.21.png)
The **axis-aligned constraint** is there because of performance reasons. The overlapping area between two non-rotated boxes can be checked with logical comparisons alone, whereas rotated boxes require additional trigonometric operations, which are slower to calculate. If you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object, or opt to use another bounding geometry type, such as spheres (which are invariant to rotation.) The animated GIF below shows a graphic example of an AABB that adapts its size to fit the rotating entity. The box constantly changes dimensions to snugly fit the entity contained inside.
![Animated rotating knot showing the virtual rectangular box shrink and grow as the knots rotates within it. The box does not rotate.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/rotating_knot.gif)
**Note:** Check out the [Bounding Volumes with Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) article to see a practical implementation of this technique.
### [Point vs. AABB](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#point_vs._aabb)
Checking if a point is inside an AABB is pretty simple — we just need to check whether the point's coordinates fall inside the AABB; considering each axis separately. If we assume that _P x_, _P y_ and _P z_ are the point's coordinates, and _B minX_– _B maxX_, _B minY_– _B maxY_, and _B minZ_– _B maxZ_ are the ranges of each axis of the AABB, we can calculate whether a collision has occurred between the two using the following formula:
f(P,B)=(Px≥BminX∧Px≤BmaxX)∧(Py≥BminY∧Py≤BmaxY)∧(Pz≥BminZ∧Pz≤BmaxZ)f(P, B)= (P_x \ge B_{minX} \wedge P_x \le B_{maxX}) \wedge (P_y \ge B_{minY} \wedge P_y \le B_{maxY}) \wedge (P_z \ge B_{minZ} \wedge P_z \le B_{maxZ})
Or in JavaScript:
### [AABB vs. AABB](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#aabb_vs._aabb)
Checking whether an AABB intersects another AABB is similar to the point test. We just need to do one test per axis, using the boxes' boundaries. The diagram below shows the test we'd perform over the X-axis — basically, do the ranges _A minX_– _A maxX_ and _B minX_– _B maxX_ overlap?
![Hand drawing of two rectangles showing the upper right corner of A overlapping the bottom left corner of B, as A's largest x coordinate is greater than B's smallest x coordinate.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/aabb_test.png)
Mathematically this would look like so:
f(A,B)=(AminX≤BmaxX∧AmaxX≥BminX)∧(AminY≤BmaxY∧AmaxY≥BminY)∧(AminZ≤BmaxZ∧AmaxZ≥BminZ)f(A, B) = (A_{minX} \le B_{maxX} \wedge A_{maxX} \ge B_{minX}) \wedge ( A_{minY} \le B_{maxY} \wedge A_{maxY} \ge B_{minY}) \wedge (A_{minZ} \le B_{maxZ} \wedge A_{maxZ} \ge B_{minZ})
And in JavaScript, we'd use this:
## [Bounding spheres](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#bounding_spheres)
Using bounding spheres to detect collisions is a bit more complex than AABB, but still fairly quick to test. The main advantage of spheres is that they are invariant to rotation, so if the wrapped entity rotates, the bounding sphere would still be the same. Their main disadvantage is that unless the entity they are wrapping is actually spherical, the wrapping is usually not a good fit (i.e., wrapping a person with a bounding sphere will cause a lot of false positives, whereas an AABB would be a better match).
### [Point vs. sphere](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#point_vs._sphere)
To check whether a sphere contains a point we need to calculate the distance between the point and the sphere's center. If this distance is smaller than or equal to the radius of the sphere, the point is inside the sphere.
![Hand drawing of a 2D projection of a sphere and a point in a Cartesian coordinate system. The point is outside of the circle, to the lower right of it. The distance is denoted by a dashed line, labeled D, from the circle's center to the point. A lighter line shows the radius, labeled R, going from the center of the circle to the border of the circle.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/point_vs_sphere.png)
Taking into account that the Euclidean distance between two points _A_ and _B_ is (Ax−Bx)2+(Ay−By)2+(Az−Bz)2\sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2}, our formula for point vs. sphere collision detection would work out like so:
f(P,S)=Sradius≥(Px−Sx)2+(Py−Sy)2+(Pz−Sz)2f(P,S) = S_{radius} \ge \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2}
Or in JavaScript:
**Note:** The code above features a square root, which can be expensive to calculate. An effective optimization to avoid it consists of comparing the squared distance with the squared radius, so the optimized equation would instead involve `distanceSqr < sphere.radius * sphere.radius`.
### [Sphere vs. sphere](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#sphere_vs._sphere)
The sphere vs. sphere test is similar to the point vs. sphere test. What we need to test here is that the distance between the sphere's centers is less than or equal to the sum of their radii.
![Hand drawing of two partially overlapping circles. Each circle \(of different sizes\) has a light radius line going from its center to its border, labeled R. The distance is denoted by a dotted line, labeled D, connecting the center points of both circles.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/sphere_vs_sphere.png)
Mathematically, this looks like:
f(A,B)=(Ax−Bx)2+(Ay−By)2+(Az−Bz)2≤Aradius+Bradiusf(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} \le A_{radius} + B_{radius}
Or in JavaScript:
### [Sphere vs. AABB](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#sphere_vs._aabb)
Testing whether a sphere and an AABB are colliding is slightly more complicated, but still simple and fast. A logical approach would be to check every vertex of the AABB, doing a point vs. sphere test for each one. This is overkill, however — testing all the vertices is unnecessary, as we can get away with just calculating the distance between the AABB's _closest point_ (not necessarily a vertex) and the sphere's center, seeing if it is less than or equal to the sphere's radius. We can get this value by clamping the sphere's center to the AABB's limits.
![Hand drawing of a square partially overlapping the top of a circle. The radius is denoted by a light line labeled R. The distance line goes from the circle's center to the closest point of the square.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/sphere_vs_aabb.png)
In JavaScript, we'd do this test like so:
## [Using a physics engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#using_a_physics_engine)
**3D physics engines** provide collision detection algorithms, most of them based on bounding volumes as well. The way a physics engine works is by creating a **physical body** , usually attached to a visual representation of it. This body has properties such as velocity, position, rotation, torque, etc., and also a **physical shape**. This shape is the one that is considered in the collision detection calculations.
We have prepared a [live collision detection demo](https://mozdevs.github.io/gamedev-js-3d-aabb/physics.html) (with [source code](https://github.com/mozdevs/gamedev-js-3d-aabb)) that you can take a look at to see such techniques in action — this uses the open-source 3D physics engine [cannon.js](https://github.com/schteppe/cannon.js).
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection#see_also)
Related articles on MDN:
* [Bounding volumes collision detection with Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js)
* [2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)

116
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection-2.md Normal file
View File

@ -0,0 +1,116 @@
---
title: "3D collision detection - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:09.061133+00:00"
instance: "kb-cron"
---
External resources:
* [Simple intersection tests for games](https://www.gamedeveloper.com/game-platforms/simple-intersection-tests-for-games) on Game Developer
* [Bounding volume](https://en.wikipedia.org/wiki/Bounding_volume) on Wikipedia
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_collision_detection/index.md?plain=1 "Folder: en-us/games/techniques/3d_collision_detection \(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%2FTechniques%2F3D_collision_detection&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%2Ftechniques%2F3d_collision_detection%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_collision_detection%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_collision_detection%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

203
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js-0.md Normal file
View File

@ -0,0 +1,203 @@
---
title: "Bounding volume collision detection with THREE.js - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:11.582528+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)
4. [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)
# Bounding volume collision detection with THREE.js
This article shows how to implement **collision detection between bounding boxes and spheres using the Three.js** library. It is assumed that before reading this you have read our [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection) introductory article first, and have basic knowledge about Three.js.
## In this article
* [Using `Box3` and `Sphere`](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#using_box3_and_sphere)
* [Using `BoxHelper`](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#using_boxhelper)
## [Using `Box3` and `Sphere`](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#using_box3_and_sphere)
Three.js has objects that represent **mathematical volumes** and shapes — for 3D AABB and bounding spheres we can use the **[`Box3`](https://threejs.org/docs/#api/math/Box3)**and**[`Sphere`](https://threejs.org/docs/#api/math/Sphere)**objects. Once instantiated, they have methods available to do intersection tests against other volumes.
### [Instantiating boxes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#instantiating_boxes)
To create a **`Box3`instance** , we need to provide the **lower and upper boundaries** of the box. Usually we will want this AABB to be "linked" to an object in our 3D world (like a character.) In Three.js, `Geometry` instances have a `boundingBox` property with `min` and `max` boundaries for the object. Keep in mind that in order for this property to be defined, you need to manually call `Geometry.computeBoundingBox` beforehand.
**Note:** The `boundingBox` property takes the `Geometry` itself as reference, and not the `Mesh`. So any transformations such as scale, position, etc. applied to the `Mesh` will be ignored while computing the calculating box.
A more simple alternative that fixes the previous issue is to set those boundaries later on with `Box3.setFromObject`, which will compute the dimensions taking into account a 3D entity's **transformations _and_ any child meshes** as well.
### [Instantiating spheres](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#instantiating_spheres)
Instantiating **`Sphere`objects** is similar. We need to provide the sphere's center and radius, which can be added to the `boundingSphere` property available in `Geometry`.
Unfortunately, there is no equivalent of `Box3.setFromObject` for Sphere instances. So if we apply transformations or change the position of the `Mesh`, we need to manually update the bounding sphere. For instance:
### [Intersection tests](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#intersection_tests)
#### Point vs. `Box3` / `Sphere`
Both `Box3` and `Sphere` have a **`containsPoint`**method to do this test.
#### `Box3` vs. `Box3`
The **`Box3.intersectsBox`**method is available for performing this test.
**Note:** This is different from the `Box3.containsBox` method, which checks whether the Box3 _fully_ wraps another one.
#### `Sphere` vs. `Sphere`
In a similar fashion as before, there is a **`Sphere.intersectsSphere`**method to perform this test.
#### `Sphere` vs. `Box3`
Unfortunately this test is not implemented in Three.js, but we can patch Sphere to implement a [Sphere vs. AABB intersection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection) algorithm.
### [Demos](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#demos)
We have prepared some [live demos](https://mozdevs.github.io/gamedev-js-3d-aabb/) to demonstrate these techniques, with [source code](https://github.com/mozdevs/gamedev-js-3d-aabb) to examine.
* [Point vs. Box and Sphere](https://mozdevs.github.io/gamedev-js-3d-aabb/raw_point.html)
* [Box vs. Box and Sphere](https://mozdevs.github.io/gamedev-js-3d-aabb/raw_box.html)
* [Sphere vs. Box and Sphere](https://mozdevs.github.io/gamedev-js-3d-aabb/raw_sphere.html)

129
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js-1.md Normal file
View File

@ -0,0 +1,129 @@
---
title: "Bounding volume collision detection with THREE.js - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:11.582528+00:00"
instance: "kb-cron"
---
![A knot object, a large sphere object and a small sphere object in 3-D space. Three vectors are drawn on the small sphere. The vectors point in the directions of the three axes that define the space. Text at the bottom reads: Drag the ball around.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js/screen_shot_2015-10-20_at_15.19.16.png)
## [Using `BoxHelper`](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#using_boxhelper)
As an alternative to using raw `Box3` and `Sphere` objects, Three.js has a useful object to make handling **bounding boxes easier:[`BoxHelper`](https://threejs.org/docs/#api/helpers/BoxHelper)** (previously `BoundingBoxHelper`, which has been deprecated). This helper takes a `Mesh` and calculates a bounding box volume for it (including its child meshes). This results in a new box `Mesh` representing the bounding box, which shows the bounding box's shape, and can be passed to the previously seen `setFromObject` method in order to have a bounding box matching the `Mesh`.
`BoxHelper` is the **recommended** way to handle 3D collisions with bounding volumes in Three.js. You will miss sphere tests, but the tradeoffs are well worth it.
The advantages of using this helper are:
* It has an `update()` method that will **resize** its bounding box Mesh if the linked Mesh rotates or changes its dimensions, and update its **position**.
* It **takes into account the child meshes** when computing the size of the bounding box, so the original mesh and all its children are wrapped.
* We can easily debug collisions by **rendering** the `Mesh`es that `BoxHelper` creates. By default they are created with a `LineBasicMaterial` material (a three.js material for drawing wireframe-style geometries).
The main disadvantage is that it **only creates box bounding volumes** , so if you need spheres vs. AABB tests you need to create your own `Sphere` objects.
To use it, we need to create a new `BoxHelper` instance and supply the geometry and — optionally — a color that will be used for the wireframe material. We also need to add the newly created object to the `three.js` scene in order to render it. We assume our scene variable to be called `scene`.
In order to also have our actual `Box3` bounding box, we create a new `Box3` object and make it assume the `BoxHelper`'s shape and position.
If we change the `Mesh` position, rotation, scale, etc. we need to call the `update()` method so the `BoxHelper` instance matches its linked `Mesh`. We also need to call `setFromObject` again in order to make the `Box3` follow the `Mesh`.
Performing **collision tests** is done in the same way as explained in the above section — we use our Box3 object in the same way as described above.
### [Demos](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js#demos_2)
There are **two demos** you can take a look at on our [live demos page](https://mozdevs.github.io/gamedev-js-3d-aabb/). The [first one](https://mozdevs.github.io/gamedev-js-3d-aabb/api_point.html) showcases point vs. box collisions using `BoxHelper`. The [second one](https://mozdevs.github.io/gamedev-js-3d-aabb/api_box.html) performs box vs. box tests.
![A knot object, a sphere object and a cube object in 3-D space. The knot and the sphere are encompassed by a virtual bounding box. The cube is intersecting the bounding box of the sphere. Text at the bottom reads: Drag the cube around. Press Esc to toggle B-Boxes.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js/screen_shot_2015-10-19_at_12.10.06.png)
## 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/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md?plain=1 "Folder: en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js \(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%2FTechniques%2F3D_collision_detection%2FBounding_volume_collision_detection_with_THREE.js&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%2Ftechniques%2F3d_collision_detection%2Fbounding_volume_collision_detection_with_three.js%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_collision_detection%2FBounding_volume_collision_detection_with_THREE.js%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_collision_detection%2Fbounding_volume_collision_detection_with_three.js%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).

194
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web-0.md Normal file
View File

@ -0,0 +1,194 @@
---
title: "3D games on the Web - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:13.935266+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
# 3D games on the Web
For rich gaming experiences on the web, the weapon of choice is WebGL, which is rendered on HTML [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas). WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course, also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.
## In this article
* [Documentation and browser support](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#documentation_and_browser_support)
* [Explaining the basic 3D theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#explaining_the_basic_3d_theory)
* [Advanced concepts](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#advanced_concepts)
* [The rise of libraries and frameworks](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#the_rise_of_libraries_and_frameworks)
* [Where to go next](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#where_to_go_next)
## [Documentation and browser support](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#documentation_and_browser_support)
The [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) project documentation and specification is maintained by the [Khronos Group](https://www.khronos.org/), not the W3C as with most of the web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.
There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern web using current, powerful hardware.
## [Explaining the basic 3D theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#explaining_the_basic_3d_theory)
The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our [Explaining basic 3D theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory) article for all the information you need.
## [Advanced concepts](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#advanced_concepts)
You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic: virtual reality on the web.
### [Shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#shaders)
It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL shading language, with syntax similar to C, that is executed directly by the graphics pipeline. They can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out [GLSL Shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) article to learn more about them.
### [Collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#collision_detection)
It's hard to imagine a game without collision detection — we always need to work out when something is hitting something else. We have information available for you to learn from:
* [2D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)
* [3D collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection)

150
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web-1.md Normal file
View File

@ -0,0 +1,150 @@
---
title: "3D games on the Web - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:13.935266+00:00"
instance: "kb-cron"
---
### [WebXR](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#webxr)
The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the [Meta Quest](https://www.meta.com/quest/), and the (currently experimental) [WebXR API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) for capturing information from XR hardware and making it available for use in JavaScript applications. For more, read [WebXR — Virtual and Augmented Reality for the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR).
There's also the [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) article showing you how to build 3D environments for virtual reality using the [A-Frame](https://aframe.io/) framework.
## [The rise of libraries and frameworks](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#the_rise_of_libraries_and_frameworks)
Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our [WebGL documentation](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) to get started.) For real-world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.
The most popular JavaScript 3D library is [Three.js](https://threejs.org/), a multipurpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; [A-Frame](https://aframe.io/), [PlayCanvas](https://playcanvas.com/) and [Babylon.js](https://www.babylonjs.com/) are among the most recognizable ones with rich documentation, online editors and active communities.
### [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)
A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a Three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the [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) subpage for the step-by-step process of creating the demo.
### [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)
Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library, it provides built-in functions to help you implement common 3D functionality more quickly. See the [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) subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.
### [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)
PlayCanvas is a popular 3D WebGL game engine open-sourced on GitHub, with an editor available online and good documentation. See the [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) subpage for higher-level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.
### [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)
Three.js, like any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot faster. See the [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) subpage for the step-by-step process of creating the demo.
### [Other tools](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#other_tools)
Both [Unity](https://unity.com/) and [Unreal](https://www.unrealengine.com/en-US) can export your game to [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) with [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js), so you're free to use their tools and techniques to build games that will be exported to the web.
![Illustration of three 3D geometry shapes: a grey torus, a blue cube, and a yellow cylinder.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/shapes.png)
## [Where to go next](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#where_to_go_next)
With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.
### [Source code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#source_code)
You can find all the source code for this series [demos on GitHub](https://end3r.github.io/MDN-Games-3D/).
### [APIs](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#apis)
* [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
* [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
* [WebVR API](https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API)
### [Frameworks](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#frameworks)
* [Three.js](https://threejs.org/)
* [PlayCanvas](https://playcanvas.com/)
* [Babylon.js](https://www.babylonjs.com/)
* [A-Frame](https://aframe.io/)
### [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web#tutorials)
* [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)
* [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)
* [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)
* [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)
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web \(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%2FTechniques%2F3D_on_the_web&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%2Ftechniques%2F3d_on_the_web%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

206
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory-0.md Normal file
View File

@ -0,0 +1,206 @@
---
title: "Explaining basic 3D theory - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:16.060914+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [Explaining basic 3D theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory)
# Explaining basic 3D theory
This article explains all of the basic theory that's useful to know when you are getting started working with 3D.
## In this article
* [Coordinate system](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#coordinate_system)
* [Objects](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#objects)
* [Rendering pipeline](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#rendering_pipeline)
* [Vertex processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing)
* [Rasterization](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#rasterization)
* [Fragment processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#fragment_processing)
* [Output merging](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#output_merging)
* [Conclusion](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#conclusion)
## [Coordinate system](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#coordinate_system)
3D essentially is all about representations of shapes in a 3D space, with a coordinate system used to calculate their position.
![Coordinate system](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-coordinate-system.png)
WebGL uses the right-hand coordinate system — the `x` axis points to the right, the `y` axis points up, and the `z` axis points out of the screen, as seen in the above diagram.
## [Objects](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#objects)
Different types of objects are built using vertices. A **Vertex** is a point in space having its own 3D position in the coordinate system and usually some additional information that defines it. Every vertex is described by these attributes:
* **Position** : Identifies it in a 3D space (`x`, `y`, `z`).
* **Color** : Holds an RGBA value (R, G and B for the red, green, and blue channels, alpha for transparency — all values range from `0.0` to `1.0`).
* **Normal:** A way to describe the direction the vertex is facing.
* **Texture** : A 2D image that the vertex can use to decorate the surface it is part of instead of a simple color.
You can build geometry using this information — here is an example of a cube:
![Cube](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-cube.png)
A face of the given shape is a plane between vertices. For example, a cube has 8 different vertices (points in space) and 6 different faces, each constructed out of 4 vertices. A normal defines which way the face is directed in. Also, by connecting the points we're creating the edges of the cube. The geometry is built from a vertex and the face, while material is a texture, which uses a color or an image. If we connect the geometry with the material we will get a mesh.
## [Rendering pipeline](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#rendering_pipeline)
The rendering pipeline is the process by which images are prepared and output onto the screen. The graphics rendering pipeline takes the 3D objects built from **primitives** described using **vertices** , applies processing, calculates the **fragments** and renders them on the 2D screen as **pixels**.
![Rendering pipeline](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-rendering-pipeline.png)
Terminology used in the diagram above is as follows:
* A **Primitive** : An input to the pipeline — it's built from vertices and can be a triangle, point or line.
* A **Fragment** : A 3D projection of a pixel, which has all the same attributes as a pixel.
* A **Pixel** : A point on the screen arranged in the 2D grid, which holds an RGBA color.

150
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory-1.md Normal file
View File

@ -0,0 +1,150 @@
---
title: "Explaining basic 3D theory - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:16.060914+00:00"
instance: "kb-cron"
---
Vertex and fragment processing are programmable — you can [write your own shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) that manipulate the output.
## [Vertex processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing)
Vertex processing is about combining the information about individual vertices into primitives and setting their coordinates in the 3D space for the viewer to see. It's like taking a photo of the given scenery you have prepared — you have to place the objects first, configure the camera, and then take the shot.
![Vertex processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-vertex-processing.png)
There are four stages to this processing: the first one involves arranging the objects in the world, and is called **model transformation**. Then there's **view transformation** which takes care of positioning and setting the orientation of the camera in the 3D space. The camera has three parameters — location, direction, and orientation — which have to be defined for the newly created scene.
![Camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-camera.png)
**Projection transformation** (also called perspective transformation) then defines the camera settings. It sets up what can be seen by the camera — the configuration includes _field of view_ , _aspect ratio_ and optional _near_ and _far planes_. Read the [Camera paragraph](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera) in the Three.js article to learn about those.
![Camera settings](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-camera-settings.png)
The last step is **viewport transformation** , which involves outputting everything for the next step in the rendering pipeline.
## [Rasterization](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#rasterization)
Rasterization converts primitives (which are connected vertices) to a set of fragments.
![Rasterization](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-rasterization.png)
Those fragments — which are 3D projections of the 2D pixels — are aligned to the pixel grid, so eventually they can be printed out as pixels on a 2D screen display during the output merging stage.
## [Fragment processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#fragment_processing)
Fragment processing focuses on textures and lighting — it calculates final colors based on the given parameters.
![Fragment processing](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-fragment-processing.png)
### [Textures](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#textures)
Textures are 2D images used in the 3D space to make the objects look better and more realistic. Textures are combined from single texture elements called texels the same way picture elements are combined from pixels. Applying textures onto objects during the fragment processing stage of the rendering pipeline allows us to adjust it by wrapping and filtering it if necessary.
Texture wrapping allows us to repeat the 2D image around the 3D object. Texture filtering is applied when the original resolution or the texture image is different from the displayed fragment — it will be minified or magnified accordingly.
### [Lighting](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#lighting)
The colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. Light might be absorbed or reflected. The standard **Phong Lighting Model** implemented in WebGL has four basic types of lighting:
* **Diffuse** : A distant directional light, like the sun.
* **Specular** : A point of light, just like a light bulb in a room or a flashlight.
* **Ambient** : The constant light applied to everything on the scene.
* **Emissive** : The light emitted directly by the object.
## [Output merging](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#output_merging)
During the output manipulation stage all the fragments of the primitives from the 3D space are transformed into a 2D grid of pixels that are then printed out on the screen display.
![Output merging](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory/mdn-games-3d-output-merging.png)
During output merging some processing is also applied to ignore information that is not needed — for example the parameters of objects that are outside the screen or behind other objects, and thus not visible, are not calculated.
## [Conclusion](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#conclusion)
Now you know the basic theory behind 3D manipulation. If you want to move on to practice and see some demos in action, follow up with the tutorials below:
* [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)
* [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)
* [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)
* [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)
Go ahead and create some cool cutting-edge 3D experiments yourself!
## 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/Techniques/3D_on_the_web/Basic_theory/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/basic_theory/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/basic_theory \(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%2FTechniques%2F3D_on_the_web%2FBasic_theory&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%2Ftechniques%2F3d_on_the_web%2Fbasic_theory%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBasic_theory%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbasic_theory%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).

185
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame-0.md Normal file
View File

@ -0,0 +1,185 @@
---
title: "Building up a basic demo with A-Frame - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:18.565916+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [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)
# Building up a basic demo with A-Frame
The [WebXR](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR) and [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) APIs already enable us to start creating virtual reality (VR) and augmented reality (AR) experiences inside web browsers. To make this easier, Mozilla's [A-Frame](https://aframe.io/) framework provides a markup language that allows web developers to build 3D VR landscapes using a familiar approach, and which follows game development coding principles. This is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.
**Note:** This guide was last updated in November 2024, and is compatible with A-Frame version `1.6.0`.
## In this article
* [High level overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#high_level_overview)
* [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#development_setup)
* [A-Frame shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#a-frame_shape_example)
* [Adding some JavaScript to the mix](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_some_javascript_to_the_mix)
* [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#animation)
* [A-Frame example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#a-frame_example_with_animation)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#summary)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#see_also)

34
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame-1.md Normal file
View File

@ -0,0 +1,34 @@
---
title: "Building up a basic demo with A-Frame - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:18.565916+00:00"
instance: "kb-cron"
---
## [High level overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#high_level_overview)
A-Frame runs on most environments, such as desktop, mobile (iOS and Android), and devices such as Oculus Rift, Gear VR and HTC Vive.
A-Frame is built on top of [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), and provides pre-built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc. It is based on the [entity component system](https://en.wikipedia.org/wiki/Entity_component_system), which is known in the game development world, but it targets web developers with a familiar markup structure that can be manipulated with JavaScript. The end result is 3D web experiences, which are VR-enabled by default.
## [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#development_setup)
To start developing with A-Frame, you should make sure you are using a modern browser with good [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) support. One option is to set up a VR device such as Oculus Rift or Google Cardboard for the experiments.
If you're developing locally in an IDE, make a directory to store your experiments in and save a copy of the [latest A-Frame engine](https://aframe.io/docs/1.6.0/introduction/installation.html) inside that directory. Alternatively, you can load A-Frame from a CDN:
Whichever way you choose to get started, make sure you have the [A-Frame documentation](https://aframe.io/docs/) open somewhere while you're working for reference.
### [HTML starter for A-Frame](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#html_starter_for_a-frame)
If you're building your project locally in an IDE, here's the HTML structure to get started:
This contains some basic information like the document `charset` and [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title). The [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element includes the A-Frame framework in the page; we will write our example code inside the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body) element.
### [Initializing a scene in A-Frame](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#initializing_a_scene_in_a-frame)
A scene is the place where everything happens. When creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. In A-Frame, the scene is represented by a [Scene entity](https://aframe.io/docs/core/scene.html). An Entity is any element — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source.
Let's create the scene by adding an `<a-scene>` element inside the `<body>` element:
### [Adding a cube](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_a_cube)
Adding the cube to the scene is done by adding a simple [`<a-box>`](https://aframe.io/docs/primitives/a-box.html) element inside the `<a-scene>` element. Add it now:
It contains a few parameters already defined: `color`, `position` and `rotation` — these are fairly obvious, and define the base color of the cube, the position inside the 3D scene, and the rotation of the cube. The distance values (e.g., for the cube y position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you.
### [Adding a background: Sky box](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_a_background_sky_box)
A sky box is a background for the 3D world, represented by an [`<a-sky>`](https://aframe.io/docs/primitives/a-sky.html) element. In our case we will use a simple color, but it could also be an image, etc. Looking around would give an impression of being inside an open sky, a wooden barn — wherever you like! Add the following HTML before the `<a-cube>` element:
## [A-Frame shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#a-frame_shape_example)
At this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background:
A-Frame takes care of setting up everything you need:
* A default light source and camera are included, so the cube is visible.
* The controls are already working: you can use the mouse for looking around and the keyboard for movement. Try the `W`, `A`, `S`, and `D` keys).
* There's an "Enter VR mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necessary VR hardware set up and ready.

45
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame-2.md Normal file
View File

@ -0,0 +1,45 @@
---
title: "Building up a basic demo with A-Frame - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:18.565916+00:00"
instance: "kb-cron"
---
### [Specifying a camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#specifying_a_camera)
A camera entity can be created by adding an [`<a-camera>`](https://aframe.io/docs/primitives/a-camera.html) element to the scene. We can set the position of the camera explicitly and move it back a little bit from the center of the scene, so we'll be able to see the shapes. Add this just before the closing `</a-scene>` tag:
We've also defined a cursor for the given camera, using the `cursor-*` attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely cover the objects behind it.
### [Adding lights](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_lights)
The basic light types in A-Frame are directional and ambient. The first type is a directional light placed somewhere on the scene while the second one reflects the light from the first type, so it looks more natural; this can be set globally. Add the new code below your previous additions — this uses the standard `<a-light>` element:
The directional light has a white color, its intensity is set to `0.5`, and it is placed at position `-1 1 2`. The ambient light only needs a color, which is also white.
### [Adding some advanced geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_some_advanced_geometry)
We have a cube on the scene already; now let's try adding more shapes. We are not limited to the default entities like `<a-cube>` — using `<a-entity>` we can create custom advanced shapes. Let's try adding a torus — add this element below the previous code:
Our entity has a [torus primitive](https://aframe.io/docs/components/geometry.html#Torus), which represents its shape. We are passing some initial variables to that shape: the radius of the outer edge of the torus, the radius of the tube, and number of segments along the circumference of the tube face respectively. Rotation and position are set in the same way as we saw earlier.
### [Defining a material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#defining_a_material)
The torus is now visible on the scene, but its color doesn't look very good — this is because we have to create a [material](https://aframe.io/docs/components/material.html) to define the appearance of the entity. Edit the `<a-entity>` defining the torus to look like the following:
In the new `material` attribute, we set up the `color` of the material, then its `roughness` (a rougher material will scatter reflected light in more directions than a smooth material) and `metalness` (how metallic the material is).
## [Adding some JavaScript to the mix](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#adding_some_javascript_to_the_mix)
It is possible to populate the scene with entities created using JavaScript too, so let's use it to add a third shape, a cylinder. Add a new [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element at the end of the `<body>` element, just after the `<a-scene>` element, then add the following JavaScript code inside it:
We're getting a reference to the scene handler first, then we create the cylinder element as an A-Frame entity. After that it's all about setting the proper attributes: `color`, `height`, `radius` and `position`. The last line adds the newly created cylinder to the scene. That's it — you've created three different shapes with A-Frame! It is impressive to be able to create such a scene with just a few lines of HTML and JavaScript.
## [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#animation)
We've already used `rotation` and `position` to move the shapes on the scene, and we can also scale them. These attributes can be manipulated to create the illusion of [animation](https://aframe.io/docs/1.6.0/components/animation.html).
### [Rotation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#rotation)
There's a special [`animation`](https://aframe.io/docs/1.6.0/components/animation.html) component that can help us animate elements. Add the `animation` component seen below to the `<a-box>` element as a property, as shown:
As with any other entities, you can define key properties for the animation. We'll be animating the `rotation` attribute from `20 0 0` to `20 360 0`, so it will do a full spin. The animation direction is set to alternate so the animation will be played forward, and then back. The duration is set to 4 seconds, and it will be repeated indefinitely. The animation uses `easing` for easing, with [tween.js](https://github.com/tweenjs/tween.js/) being implemented internally.
### [Scaling](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#scaling)
We can also add animation to entities with custom geometry like the torus, in much the same way. Add the following `animation` component to your torus:
The attribute we want to animate for the torus is `scale`. The initial, default scale is `1 1 1`, and we're going to animate it to `1 0.5 1`, so the `y` axis will be scaled from `1` to `0.5`. The easing we're going to use is `linear`. By setting the direction to `alternate` the scale will be animated to `0.5`, and then animated back to `1` during 2 seconds. Again, the animation is being repeated indefinitely.
### [Moving](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#moving)
We could use the `animation` to change the position of the third shape, or we could use JavaScript instead. Add this code at the end of the `<script>` tag:
We're using the `render()` function to update the cylinder's position on every frame. Try changing the given values on the `y` axis and see how it affects the movement.
## [A-Frame example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#a-frame_example_with_animation)
Everything is rendered properly and animating — congratulations on building your first A-Frame scene! Here's how the final version looks and works:
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#summary)
A-Frame targets web developers by offering web markup with advantages such as JavaScript manipulation. It provides a powerful API for advanced concepts, as well as dealing with cross browser differences. It's a great time to start experimenting with such frameworks.
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#see_also)
* [A-Frame website](https://aframe.io/)
* [Introducing A-Frame 0.1.0 article](https://aframe.io/blog/2015/12/16/introducing-aframe/)
* [A-Frame physics plugin](https://github.com/ngokevin/aframe-physics-components)
* [A-Frame gamepad controls plugin](https://github.com/donmccurdy/aframe-gamepad-controls)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame-3.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "Building up a basic demo with A-Frame - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:18.565916+00:00"
instance: "kb-cron"
---
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_A-Frame&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_a-frame%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_A-Frame%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_a-frame%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

190
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js-0.md Normal file
View File

@ -0,0 +1,190 @@
---
title: "Building up a basic demo with Babylon.js - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:21.028759+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [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)
# Building up a basic demo with Babylon.js
[Babylon.js](https://www.babylonjs.com/) is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. In this article we'll take you through the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.
We will create a basic demo first — a cube rendered on the screen. If you have already worked through our _Building up a basic demo_ [series](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web) with [Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js), [PlayCanvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) or [A-Frame](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) (or you are familiar with other 3D libraries) you'll notice that Babylon.js works using similar concepts: camera, light and objects.
**Note:** This guide was last updated in November 2024, and is compatible with Babylon.js version `7.34.1`.
## In this article
* [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#development_setup)
* [Initializing the Babylon.js engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#initializing_the_babylon.js_engine)
* [Creating a scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_scene)
* [Creating a rendering loop](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_rendering_loop)
* [Creating a camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_camera)
* [Let there be light](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#let_there_be_light)
* [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#geometry)
* [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#material)
* [Babylon.js shapes example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#babylon.js_shapes_example)
* [More shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#more_shapes)
* [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#animation)
* [Babylon.js example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#babylon.js_example_with_animation)

36
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js-1.md Normal file
View File

@ -0,0 +1,36 @@
---
title: "Building up a basic demo with Babylon.js - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:21.028759+00:00"
instance: "kb-cron"
---
## [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#development_setup)
To start developing with Babylon.js, you don't need much. Make sure you are using a modern browser with good [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) support. It's useful to keep the [Babylon.js documentation](https://doc.babylonjs.com/) in a separate tab while you're working. If you're developing locally in an IDE, make a directory to store your experiments in and save a copy of the [latest Babylon.js engine](https://doc.babylonjs.com/setup/frameworkPackages/frameworkVers/) inside that directory. Alternatively, you can load Babylon.js from a CDN:
If you don't want to develop locally, you can use an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). With these editors, you can add `https://cdn.babylonjs.com/v7.34.1/babylon.js` as a JavaScript source so it's available in your code. ### [HTML starter for Babylon.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#html_starter_for_babylon.js)
If you're building your project locally in an IDE, here's the HTML structure to get started:
It contains some basic information like the document [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title), and some CSS to set the width and height of the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element (which Babylon.js will use to render the content on) to fill the entire available viewport space. The first [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element includes the Babylon.js library in the page; we will write our example code in the second one. There is one variable already included, which will store a reference to the `<canvas>` element. If you're developing in an IDE, copy this code to a new text file and save it in your working directory as `index.html`. ## [Initializing the Babylon.js engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#initializing_the_babylon.js_engine)
We have to create a Babylon.js engine instance first (passing it the `<canvas>` element to render on) before we start developing our game. Add the following code to the bottom of your second `<script>` element:
The `BABYLON` global object contains all the Babylon.js functions available in the engine. ## [Creating a scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_scene)
A scene is the place where all the game content is displayed. While creating new objects in the demo, we will be adding them all to the scene to make them visible on the screen. Let's create a scene by adding the following lines just below our previous code:
The scene is created and the second line sets the background color to light gray. ## [Creating a rendering loop](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_rendering_loop)
To make the scene actually visible we have to render it. Add these lines at the end of the `<script>` element, just before the closing `</script>`. We're using the engine's `runRenderLoop()` method to execute the `renderLoop()` function repeatedly on every frame — the loop will continue to render indefinitely until told to stop. ## [Creating a camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#creating_a_camera)
Now the setup code is in place we need to think about implementing the standard scene components: camera, light and objects. Let's start with the camera — add this line to your code below the scene creation and the line where we defined the `clearColor`. There are many [cameras](https://doc.babylonjs.com/features/featuresDeepDive/cameras) available in Babylon.js; `FreeCamera` is the most basic and universal one. To initialize it you need to pass it three parameters: any name you want to use for it, the coordinates where you want it to be positioned in the 3D space, and the scene you want to add it to. You may have noticed the `BABYLON.Vector3()` method in use here — this defines a 3D position on the scene. Babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc. ## [Let there be light](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#let_there_be_light)
There are various [light sources](https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction#types-of-lights) available in Babylon.js. The most basic one is the `PointLight`, which works like a flashlight — shining a spotlight in a given direction. Add the following line below your camera definition:
The parameters are very similar to the previously defined camera: the name of the light, a position in 3D space and the scene to which the light is added. ## [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#geometry)
Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development Babylon.js provides a bunch of [predefined primitives](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set) that you can use to create shapes instantly in a single line of code. There are cubes, spheres, cylinders and more complicated shapes available. Let's start by defining the geometry for a box shape — add the following new code below your previous additions:
A mesh is a way the engine creates geometric shapes, so material (textures) can be easily applied to them later on. In this case we're creating a box using the `Mesh.CreateBox` method with its own name, a size of 2, and a declaration of which scene we want it added to. The size or position values (e.g., for the box size) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you. If you save and refresh now, your object will look like a square, because it's facing the camera. The good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. Let's apply a little rotation to the box, so we can see more than one face — again, add these lines below the previous one:
The box looks black at the moment, because we haven't defined any material to apply to its faces. Let's deal with that next. ## [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#material)
Material is that thing covering the object — the colors or texture on its surface. In our case we will use a simple blue color to paint our box. There are many types of [materials](https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary) that can be used, but for now the standard one should be enough for us. Add these lines below the previous ones:
The `StandardMaterial` takes two parameters: a name, and the scene you want to add it to. The second line defines an `emissiveColor` — the one that will be visible for us. We can use the built-in `Color3` function to define it. The third line assigns the newly created material to our box. ## [Babylon.js shapes example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#babylon.js_shapes_example)
Congratulations, you've created your first object in a 3D environment using Babylon.js! It was less painful than you thought, right? Here's what we have created so far in a live sample. You can click "Play" to edit the code in the MDN Playground:
## [More shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#more_shapes)
We have a box on the scene already; now let's try adding more shapes. ### [Torus](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#torus)
Let's try adding a torus — add the following lines below the previous code:
This will create a torus and add it to the scene; the parameters are: name, diameter, thickness, tessellation (number of segments) and the scene to add it to. We also position it a bit to the left and rotate it on the `x` axis so it can be seen better. Now let's add a material:
It looks similar to the box element — we're creating the standard material, giving it a grayish color and assigning it to the torus. ### [Cylinder](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#cylinder)
Creating a cylinder and its material is done in almost exactly the same way as we did for the torus. Add the following code, again at the bottom of your script:
The cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height subdivisions and the scene to add it to.

121
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js-2.md Normal file
View File

@ -0,0 +1,121 @@
---
title: "Building up a basic demo with Babylon.js - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:21.028759+00:00"
instance: "kb-cron"
---
It is then positioned to the right of the cube, rotated a bit so its 3D shape can be seen, and given a yellow material. This is good progress, but we can make it more exciting! In a game, something is usually happening — we can see animations and such — so let's try to breathe some life into those shapes by animating them. ## [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#animation)
We already used `position` and `rotation` to adjust the position of the shapes; we could also scale them. To show actual animation, we need to make changes to these values inside the rendering loop at the end of our code, so they are updated on every frame. Define a helper variable — `t` — that we will use for animations, just before the `renderLoop`, and decrement it on every frame inside the loop, like this:
The `t` variable will be incremented on every rendered frame. ### [Rotation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#rotation)
Applying rotation requires adding this line at the end of the `renderLoop` function:
It will rotate the box along the `y` axis. ### [Scaling](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#scaling)
Add this line below the previous one to scale the torus:
There's a little bit of adjustment made to make the animation look and feel nice. You can experiment with the values and see how it affects the animation. ### [Moving](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#moving)
By changing the position of the cylinder directly we can move it on the scene — add this line below the previous one:
The cylinder will float up and down on the `y` axis thanks to the `Math.sin()` function. ## [Babylon.js example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js#babylon.js_example_with_animation)
Here's the final code with animated shapes. You can click "Play" to edit the example in the MDN Playground:
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_Babylon.js&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_babylon.js%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_Babylon.js%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_babylon.js%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

188
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas-0.md Normal file
View File

@ -0,0 +1,188 @@
---
title: "Building up a basic demo with PlayCanvas - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:23.509282+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
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)
# Building up a basic demo with PlayCanvas
**PlayCanvas** is a popular 3D WebGL game engine, originally created by Will Eastcott and Dave Evans. It is [open sourced on GitHub](https://github.com/playcanvas/engine), with an [editor](https://developer.playcanvas.com/user-manual/editor/) available online and good [documentation](https://developer.playcanvas.com/en/). The online editor is free for public projects with up to two team members, but there are also [paid plans](https://playcanvas.com/plans) if you'd like to run a commercial private project with more developers.
![PlayCanvas website.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-cover.png)
## In this article
* [Games and demos](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#games_and_demos)
* [Engine vs. editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#engine_vs._editor)
* [PlayCanvas engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#playcanvas_engine)
* [PlayCanvas editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#playcanvas_editor)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#summary)
## [Games and demos](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#games_and_demos)
PlayCanvas has a few well-known demos published that showcase its possibilities.
* [Tanx](https://tanx.io/) is a multiplayer tank game where you can drive your tank around, shooting at other players as you go.
* [Swooop](https://playcanv.as/p/JtL2iqIH) is a flying game where you pilot your plane around a magical island, collecting jewels and fuel as you go.
* Visualizations like the [Star Lord](https://playcanv.as/b/FQbBsJTd) and [BMW i8](https://playcanv.as/p/RqJJ9oU9) also take advantage of the engine and showcase what's possible.

122
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas-1.md Normal file
View File

@ -0,0 +1,122 @@
---
title: "Building up a basic demo with PlayCanvas - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:23.509282+00:00"
instance: "kb-cron"
---
![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/playcanvas-demos.png)
**Note:** Check out the list of [featured demos](https://playcanvas.com/explore) to find more examples.
## [Engine vs. editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#engine_vs._editor)
The engine itself can be used as a standard library by including its JavaScript file directly in your HTML, so you can start coding right away; in addition the PlayCanvas toolset comes with an online editor that you can use to drag and drop components onto the scene — a great way to create games and other apps requiring scenes if you're more of a designer than a coder. Those approaches are different but work equally well regarding achieving end goals.
## [PlayCanvas engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#playcanvas_engine)
Built for modern browsers, PlayCanvas is a fully-featured 3D game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with [ammo.js](https://github.com/kripken/ammo.js/)), audio, and facilities to handle control inputs from various devices (including gamepads). That's quite an impressive list of features — let's see some in action, check out the [Building up a basic demo with PlayCanvas engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) for details.
## [PlayCanvas editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#playcanvas_editor)
Instead of coding everything from the beginning you can also use the online editor. This can be a more pleasant working environment if you are not someone who likes to code. See the [Building up a basic demo with PlayCanvas editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) for details.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas#summary)
Of course, it depends on your approach — designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files. The good thing is that you have a choice and can pick whatever tools suit you best.
## 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/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%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).

196
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor-0.md Normal file
View File

@ -0,0 +1,196 @@
---
title: "Building up a basic demo with PlayCanvas editor - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:25.824046+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
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 PlayCanvas editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor)
# Building up a basic demo with PlayCanvas editor
Instead of coding everything from scratch you can also use the online **PlayCanvas editor**. This can be a more pleasant working environment if you are not someone who likes to code.
## In this article
* [Creating an account](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_an_account)
* [Creating a new project](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_a_new_project)
* [Creating the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_the_scene)
* [Adding more shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#adding_more_shapes)
* [Animating our scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#animating_our_scene)
* [Test the demo out](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#test_the_demo_out)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#summary)
## [Creating an account](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_an_account)
The PlayCanvas Editor is free — all you have to do to begin with is [register](https://login.playcanvas.com/signup) your account and login:
![PlayCanvas Editor - Login](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-login.png)
When you first sign up, you are taken straight into the editor and given a simple starter tutorial involving editing a 3D rolling ball game. You can finish this before you continue our tutorial if you like. When you are ready to continue with our tutorial, go to your canvas homepage — for example mine is `https://playcanvas.com/end3r`. Here's what the page looks like — you can create projects and manage them, change their settings etc.
## [Creating a new project](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_a_new_project)
Start a brand new project by clicking on the _New_ button:
![PlayCanvas Editor - Panel](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-panel.png)
The resulting dialog box will show a few different options. There are starter kits available, but we don't want to load models or start a platform game.
1. We want to start small, so we will use the empty project — click on the Blank Project option and enter a name for it (we are using "MDN Games demo".)
2. Enter a description if you want — it is optional.
3. Click _Create_ to have it created.

45
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor-1.md Normal file
View File

@ -0,0 +1,45 @@
---
title: "Building up a basic demo with PlayCanvas editor - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:25.824046+00:00"
instance: "kb-cron"
---
![PlayCanvas Editor - New project](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-newproject.png)
Next you'll see your project's page — there's not much yet. By clicking the _Editor_ button we'll launch the online PlayCanvas editor where we'll create our scene with the shapes. Do this now.
![PlayCanvas Editor - Project](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-project.png)
## [Creating the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#creating_the_scene)
Here's how the scene looks initially in the editor. Even though it's a blank new project we don't have to start entirely from scratch — the camera and directional light are prepared already, so you don't have to worry about them.
![PlayCanvas Editor - Scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-scene.png)
Now onto the creative part. To add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the Hierarchy text. When hovering over that button with your mouse the label will say 'Add Entity' — that's exactly what we want to do. An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. After clicking the button you'll see a dropdown list containing a lot of various entities to choose from. Go ahead and click _Box_ — it will be added to the scene.
![PlayCanvas Editor - New box](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-newbox.png)
The box is created with the default values — width, height and depth are set to 1, and it is placed in the middle of the scene. You can drag it around or apply new values in the right panel.
![PlayCanvas Editor - Box](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-box.png)
To add some colors to the scene we need a new material that will be used on the newly created box. Click on the plus button in the _Assets_ tab, and click on the _Material_ option in the dropdown list that appears to create a new material.
![PlayCanvas Editor - New material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-newmaterial.png)
Click on your new material in the assets tab and its entity inspector will appear on the right-hand side of the display. Now edit the _Name_ text field to give it a unique name (we've chosen _boxMaterial_). A unique name will help us remember what this material is for — we will add more later!
![PlayCanvas Editor - Box material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-boxmaterial.png)
To change its color we'll use the _Diffuse_ option in the entity inspector. Click _Diffuse_ , then select the colored box next to the Color label — it will open a [color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel). From here you can click your desired color or enter it in the bottom text field as a hex value. We've chosen a blue color with a hex value of `0095DD` — enter this code in the text field and press return for it to be accepted.
**Note:** Yes, you read that right — you need to enter the hex value without the hash/pound symbol.
![PlayCanvas Editor - Diffuse color](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-diffusecolor.png)
Now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left-hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
![PlayCanvas Editor - Box drop](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-boxdrop.png)
So, at this point we've created a blue box. Click on the box to bring up its entity sidebar — you'll see options for changing its position, rotation, and scale. Try applying the rotation values X: 10 and Y: 20.
![PlayCanvas Editor - Rotate](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-rotate.png)
Now click on the play arrow in the top right corner of the scene to launch and render the scene — it will be opened in a separate browser tab.
![PlayCanvas Editor - Launch](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-launch.png)
This looks great! Let's add more shapes to the scene to make it look more interesting.
![PlayCanvas Editor - Box render](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-boxrender.png)
## [Adding more shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#adding_more_shapes)
To make way for more shapes, move the box to the left to make some room for the next shape. You can do this by giving it an X position value of -2.
Adding other shapes involves a very similar process to adding the box. Click on the Root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the Box) then Click on the big _Add Entity_ (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene.
![PlayCanvas Editor - Cylinder](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-cylinder.png)
Now follow the same steps as we did before when coloring the cube:
* Create a new material using the _Add Asset_ (plus) button.
* Make sure the New Material in the Assets panel is selected, to bring up the entity inspector.
* Give the material a new name, along the lines of `cylinderMaterial`.
* Click diffuse, then click the color picker — give it an orange color (we used FF9500.)
* Drag and drop the `cylinderMaterial` icon onto the cylinder object on the screen to apply that color.

148
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor-2.md Normal file
View File

@ -0,0 +1,148 @@
---
title: "Building up a basic demo with PlayCanvas editor - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:25.824046+00:00"
instance: "kb-cron"
---
![PlayCanvas Editor - Cylinder material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-cylindermaterial.png)
Follow the same approach again to add a cone to the scene, giving it a grayish color (we used `#EAEFF2`.) You should now have three shapes on your scene, something like the below screenshot.
![PlayCanvas Editor - Cone](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-cone.png)
## [Animating our scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#animating_our_scene)
Animating 3D models might be considered an [advanced](https://developer.playcanvas.com/en/tutorials/anim-blending/) thing to do, but all we want to do is to control a few properties of a given object — we can use a script component to do that. Click on the plus button in the Assets panel, select the Script option, and name your new script file `boxAnimation.js`.
![PlayCanvas Editor - Box animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-boxanimation.png)
If you double click on it, you'll be moved to a code editor. As you can see, the file contains some boilerplate code already:
The most interesting part is the `update()` function, which is where we can put any code that we want repeated on every frame. Add the following line inside this function, to rotate the cube on every frame:
In the line above `this.entity` refers to the object to which the script will be attached (the box); using the `dt` variable, which contains the delta time passed since the previous frame, we can rotate the box by a different amount around all three axes.
1. Save the changes using the Save button in the top right of the code editor, then return to the main editor tab. Here, follow these steps:
2. Be sure you have the box selected on the scene.
3. Click on _Add component_ , then _Script_ in the entity inspector.
4. At the bottom of the screen you can see the list of scripts available — for now there's only `boxAnimation.js` — clicking it will add the animation script to the box object.
![PlayCanvas Editor - Box script](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-boxscript.png)
### [The cylinder](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#the_cylinder)
Now we'll do the same steps for cylinder. First:
1. Create a new Script asset.
2. Name it `cylinderAnimation.js`.
3. Double click the script icon to launch the code editor.
This time instead of rotating the object we will try to scale it. For that we'll need a timer to store the total amount of time passed since the start of the animation. Add this code to the `initialize()` function:
And those two lines to the `update()` function:
The `setLocalScale()` method applies the given values to the X, Y and Z axes of the object. In our case we're modifying the scale of the cylinder on the Y axis, giving it as a value the `Math.sin()` of the timer, with `Math.abs()` applied to the result of that to have the values always above zero (0-1; sin values are normally between -1 and 1.) This gives us a nice scaling effect as a result.
Remember to add the `cylinderAnimation.js` file to the Cylinder object to apply the given animations.
### [The cone](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#the_cone)
Time to play with the last object — the cone. Create a `coneAnimation.js` file and double click it to open it in the editor.
Next, add the following line to the `initialize()` function:
To move the cone up and down we will use the `setPosition()` method — add the code below to the `update()` function:
The position of the cone will be animated on each frame by being passed the `Math.sin()` value of the `timer` at each point in time — we have doubled the `this.timer` value to make it move higher.
Add the `coneAnimation.js` script to the cone object, as before.
## [Test the demo out](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#test_the_demo_out)
Launch the demo to see the effects — all the shapes should animate. Congratulations, you've completed the tutorial!
![PlayCanvas Editor - Shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/playcanvas-editor-shapes.png)
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor#summary)
Now you can check the [PlayCanvas engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) article if you haven't seen it yet, go back to the [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) page, or go back a level higher to the main [3D Games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web) page.
## 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/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas%2Feditor&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%2Feditor%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas%2Feditor%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%2Feditor%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).

190
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine-0.md Normal file
View File

@ -0,0 +1,190 @@
---
title: "Building up a basic demo with the PlayCanvas engine - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:28.443922+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
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 the PlayCanvas engine](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine)
# Building up a basic demo with the PlayCanvas engine
Built for modern browsers, **PlayCanvas** is a fully-featured 3D game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with [ammo.js](https://github.com/kripken/ammo.js/)), audio, and facilities to handle control inputs from various devices (including gamepads). That's quite an impressive list of features — let's see some in action.
We build a basic demo first — a cube rendered on the screen. If you have already worked through our [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) article (or you are familiar with other 3D libraries) you'll notice that PlayCanvas has similar concepts: camera, light and objects.
**Note:** This guide was last updated in November 2024, and is compatible with PlayCanvas version `2.2.2`.
## In this article
* [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#development_setup)
* [PlayCanvas application](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_application)
* [Camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#camera)
* [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#geometry)
* [Lights](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#lights)
* [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#material)
* [PlayCanvas shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_shape_example)
* [More shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#more_shapes)
* [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#animation)
* [PlayCanvas example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_example_with_animation)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#summary)

33
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine-1.md Normal file
View File

@ -0,0 +1,33 @@
---
title: "Building up a basic demo with the PlayCanvas engine - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:28.443922+00:00"
instance: "kb-cron"
---
## [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#development_setup)
To start developing with PlayCanvas, make sure you are using a modern browser with good [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) support. It's useful to keep the [PlayCanvas documentation](https://developer.playcanvas.com/en/user-manual/) in a separate tab while you're working. If you're developing locally in an IDE, make a directory to store your experiments in and save a copy of the [latest PlayCanvas engine](https://code.playcanvas.com/playcanvas-latest.js) inside that directory. Alternatively, you can load PlayCanvas from a CDN:
If you don't want to develop locally, you can use an online editor such as [CodePen](https://codepen.io/) or [JSFiddle](https://jsfiddle.net/). With these editors, you can add `https://cdn.babylonjs.com/babylon.js` as a JavaScript source so it's available in your code. ### [HTML starter for PlayCanvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#html_starter_for_playcanvas)
If you're building your project locally in an IDE, here's the HTML structure to get started:
It contains information like the document [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title), and some CSS to set the width and height of the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element (that PlayCanvas will use) to 100%, so that it will fill the entire available viewport space. The first [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element includes the PlayCanvas library in the page; we will write our example code in the second one. There is one variable already included, which will store a reference to the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element. If you're developing in an IDE, copy this code to a new text file and save it in your working directory as `index.html`. ## [PlayCanvas application](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_application)
To begin developing our game we have to create the PlayCanvas application first (using the given [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element), and then start the update loop. Add the following code to the bottom of your second [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element:
The `pc` global object contains all the PlayCanvas functions available in the engine. Next, we'll set the Canvas to fill the window, and automatically change its resolution to be the same as the Canvas size. Again, add the following lines at the bottom of your script. ## [Camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#camera)
Now that the setup code is in place, we need to think about implementing the standard scene components: camera, lights and objects. Let's start with the camera — add these lines to your code, below the previous ones. The code above will create a new `Entity`. An Entity is any object used in the scene — it can be an object like a box, cylinder or cone, but it can also be a camera, light or sound source. Then it adds a `camera` component to it with the light gray `clearColor` — the color will be visible as the background. Next, the `camera` object is added to the root of our application and positioned to be 7 units away from the center of the scene on the `z` axis. This allows us to make some space to visualize the objects that we will create later on. The distance values (e.g., for the camera z position) are unitless, and can basically be anything you deem suitable for your scene — millimeters, meters, feet, or miles — it's up to you. Try saving the file and loading it in your browser. You should now see a gray window. ## [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#geometry)
Now the scene is properly rendering we can start adding 3D shapes to it. To speed up development PlayCanvas provides a bunch of predefined primitives that you can use to create shapes instantly in a single line of code. There are cubes, spheres, cylinders and more complicated shapes available. Drawing everything for given shape is taken care of by the engine, so we can focus on the high level coding. Let's start by defining the geometry for a cube shape — add the following new code below your previous additions:
It will create an `Entity` with the `box` model component and add it to the root of the application, our scene. We also rotate the box a bit to show that it's actually a 3D cube and not a square. The cube is visible, but it is completely dark. To make it look better we need to shine some light onto it. ## [Lights](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#lights)
The basic light types in PlayCanvas are directional and ambient. The first type is a directional light placed somewhere on the scene while the second one reflects the light from the first type, so it looks more natural; this can be set globally. Again, add the new code below your previous additions. It will create a light `Entity` component and add it to the scene. We can rotate the light on the `x` axis to make it shine on more than one side of the cube. It's time to add the ambient light:
The code above assign a dark grey ambient light for the whole scene. The box looks better now, but it could get some colors to look even better - for that we need to create material for it. ## [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#material)
This example uses a material called [Standard material](https://api.playcanvas.com/engine/classes/StandardMaterial.html), which is the main, general purpose material that is most often used for rendering. Add the following lines to your code:
By diffusing the light on the object, we can give it its own color — we'll choose a nice familiar blue. In PlayCanvas, the color channel values are provided as floats in the range `0-1`, instead of integers of `0-255` as you might be used to using on the Web. After the material is created and its color is set, it has to be updated so that our changes are applied. Then all we need to do is set the `box`'s material to the newly created `boxMaterial`. ## [PlayCanvas shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_shape_example)
If you've followed everything so far without any problems, you've created your first object in a 3D environment using PlayCanvas! It was easier than you thought, right? Your code should look like the following live sample. You can click "Play" to view and edit the code in the MDN Playground:
## [More shapes](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#more_shapes)
Now we will add more shapes to the scene. Let's move the cube 2 units to the left to make space for some friends — add the following line just below the previous code:
Now let's add a new shape — how about a cylinder? ### [Cylinder](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#cylinder)
Add the following lines at the bottom of your JavaScript code:
This looks very similar to the code we used for creating a cube, but instead of the `box` component we are adding a `cylinder`. It is also rotated around the `x` axis to show it's actually a 3D shape. To make the cylinder have a color, let's say yellow, we need to create the material for it, as before. Add the following lines:
### [Cone](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#cone)
Creating a cone and its material is done in almost exactly the same way as we did for the cylinder. Add the following code, again, at the bottom of your script:
The code above will create a new `cone`, add it to the `app` and move it by 2 units to the right so it's not overlapping the cylinder. Then the material is created, given a gray color, and assigned to the cone `Entity`. This is good progress, but we can make it more exciting!

122
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine-2.md Normal file
View File

@ -0,0 +1,122 @@
---
title: "Building up a basic demo with the PlayCanvas engine - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:28.443922+00:00"
instance: "kb-cron"
---
In a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. ## [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#animation)
We already used `translate` or `rotate` to adjust the position of the shapes; we could also change their positions directly with `setPosition`, or scale them. To show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame. There's a special `update` event that we can use for that — add the following code just below the previous additions:
The callback takes the `deltaTime` as the parameter, so we have the relative time that has passed since the previous invocation of this update. For time based animations we'll use a `timer` variable that will store the time that has passed since the start of the app by adding the `deltaTime` to it on every update. ### [Rotation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#rotation)
Rotating is quite easy — all you need to do is to add a defined value to the given direction of rotation on each frame. Add this line of code inside the `app.on("update")` callback function, right after the addition of the `deltaTime` to the `timer` variable:
It will rotate the `box` by `deltaTime*10` on the `x` axis, `deltaTime*20` on the `y` axis and `deltaTime*30` on the `z` axis, on very frame — giving us a smooth animation. ### [Scaling](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#scaling)
We can also scale a given object — there's a function for that called `setLocalScale`. Add the following, again into the callback:
Here we are using `Math.sin` to scale the cylinder in a cycle, bigger and smaller again. We're wrapping the `y` scale value in `Math.abs` to pass the absolute values (greater or equal to 0); `sin` varies between -1 and 0, and for negative values the cylinder scaling can render unexpectedly (in this case it looks black half the time.)
Now onto the movement part. ### [Moving](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#moving)
Beside rotation and scaling we can also move objects around the scene. Add the following code to achieve that. This will move the `cone` up and down by applying the `sin` value to the `y` axis on each frame, with a little bit of adjustment to make it look cooler. Try changing the value to see how it affects the animation. ## [PlayCanvas example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#playcanvas_example_with_animation)
Here's the final code with animated shapes. You can click "Play" to edit the example in the MDN Playground:
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine#summary)
Now you know the basics of PlayCanvas engine; happy experimentation! You can continue reading the [PlayCanvas editor](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) article, go back to the [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) page, or go back a level higher to the main [3D Games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web) page. ## 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/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas%2Fengine&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%2Fengine%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_PlayCanvas%2Fengine%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_playcanvas%2Fengine%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).

193
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js-0.md Normal file
View File

@ -0,0 +1,193 @@
---
title: "Building up a basic demo with Three.js - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:30.977911+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [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)
# Building up a basic demo with Three.js
A typical 3D scene in a game — even the simplest one — contains standard items like shapes located in a coordinate system, a camera to view it, lights and materials to make it look better, animations to make it look alive, etc. **Three.js** , as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly. In this article we'll take you through the real basics of using Three.js, including setting up a development environment, structuring the necessary HTML, the fundamental objects of Three, and how to build up a basic demo.
Three is one of the most popular [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) libraries, though we are not saying it is better than any other WebGL library, and you should feel free to try other libraries.
**Note:** This guide was last updated in November 2024, and is compatible with Three.js version `r79`.
## In this article
* [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#development_setup)
* [Renderer](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#renderer)
* [Scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#scene)
* [Camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera)
* [Rendering the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#rendering_the_scene)
* [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#geometry)
* [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#material)
* [Mesh](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#mesh)
* [Adding the cube to the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#adding_the_cube_to_the_scene)
* [Three.js shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#three.js_shape_example)
* [More shapes and materials](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#more_shapes_and_materials)
* [Lights](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#lights)
* [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#animation)
* [Three.js example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#three.js_example_with_animation)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#summary)

34
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js-1.md Normal file
View File

@ -0,0 +1,34 @@
---
title: "Building up a basic demo with Three.js - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:30.977911+00:00"
instance: "kb-cron"
---
## [Development setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#development_setup)
To start developing with Three.js, you should make sure you are using a modern browser with good [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) support.
In your code, you can import Three.js [using a CDN or use Node.js](https://threejs.org/docs/#manual/en/introduction/Installation). If you're including it from a CDN, you can use the following URL in your HTML:
A Node.js setup with Three.js installed as a dependency is convenient if you want to develop against specific Three.js versions and it can speed up collaboration and deployment:
Alternatively, you can download the [latest Three.js library](https://github.com/mrdoob/three.js/archive/master.zip) and copy the minified version of Three.js from the uncompressed archive at `build/three.module.min.js` into your project. Bear in mind that the archives include source files, which makes the download size approximately 350MB.
Whichever way you choose to get started, make sure you have the [Three.js documentation](https://threejs.org/docs/) open somewhere while you're working for reference.
### [HTML starter for Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#html_starter_for_three.js)
If you're building your project locally in an IDE, here's the HTML structure to get started:
It contains some basic information like the document [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title), and some CSS to set the `width` and `height` of the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element, that Three.js will insert on the page to 100% to fill the entire available viewport space. The first [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element includes the Three.js library in the page, and we will write our example code inside the second. There are two helper variables already included, which store the window's `width` and `height`.
Before reading further, copy this code to a new text file, and save it in your working directory as `index.html`.
## [Renderer](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#renderer)
A renderer is a tool which displays scenes right in your browser. There are a few different renderers: WebGL is the default, and others you can use are Canvas, SVG, CSS, and DOM. They differ in how everything is rendered, so the WebGL implementation will implement differently than the CSS one. Despite the variety of ways they achieve the goal, the experience will look the same for the user. Thanks to this approach, a fallback can be used, if a desired technology is not supported by the browser.
The code below creates a new WebGL renderer, sets its size to fit the whole available space on the screen, and appends the DOM structure to the page. You might have noticed the `antialias` parameter in the first line — this renders the edges of shapes more smoothly. The `setClearColor()` method sets our background to a light gray color, instead of the default black one.
Add this code into our second [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element, just below the JavaScript comment.
## [Scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#scene)
A scene is the place where everything happens. When creating new objects in the demo, we add them all inside a scene to make them visible on the screen. In three.js, the scene is represented by a `Scene` object. Let's create it, by adding the following line below our previous lines:
Later, we will be using the `.add()` method, to add objects to this scene.
## [Camera](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#camera)
We have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. The following lines put the camera in place in the 3D coordinate system, and point it in the direction of our scene:
Add the above lines to your code, below those previously added.
There are other types of camera available (Cube, Orthographic), but the simplest is Perspective. To initialize it, we have to set its field of view and aspect ratio: the former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when rendered, and not look stretched. Let's explain values we are setting for the code above:
* The value we set for the field of view, 70, is something we can experiment with: the higher the value, the greater the amount of scene the camera will show. Imagine a normal camera view, versus a fish eye effect, which allows a lot more to be seen. The default value is 50.
* The aspect ratio is set to the current width and height of the window so it will be dynamically adjusted. We could set a fixed ratio — for example 16 ⁄ 9, which is the aspect ratio of a widescreen TV. The default value is 1.
* The `z` position, with the value of 50 units, is the distance between the camera and the center of the scene on the `z` axis. Here we're moving the camera back, so the objects in the scene can be viewed. 50 feels about right. It's not too near, or too far, and the sizes of the objects allow them to stay on the scene, within the given field of view. The `x` and `y` values, if not specified, will default to 0.

36
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js-2.md Normal file
View File

@ -0,0 +1,36 @@
---
title: "Building up a basic demo with Three.js - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:30.977911+00:00"
instance: "kb-cron"
---
You should experiment with these values and see how they change what you see in the scene. The distance values (e.g., for the camera z position) are unitless, and can be anything you deem suitable for your scene: millimeters, meters, feet, or miles. It's up to you. ## [Rendering the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#rendering_the_scene)
Everything is ready, but we still can't see anything. Although we've set up the renderer, we still need to render everything. Our `render()` function will do this job, with a little help from [`requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame), which causes the scene to be re-rendered constantly on every frame:
On every new frame the `render` function is invoked, and the `renderer` renders the `scene` and the `camera`. Right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely. Again, add this new code below your previous additions. Try saving the file and opening it in your browser. You should now see a gray window. Congratulations! ## [Geometry](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#geometry)
Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the `render()` function:
In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape. ## [Material](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#material)
A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:
## [Mesh](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#mesh)
To apply the material to a geometry, a mesh is used. This takes a shape, and adds the specified material to every face:
Again, add this line below the one you previously added. ## [Adding the cube to the scene](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#adding_the_cube_to_the_scene)
We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:
If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous:
## [Three.js shape example](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#three.js_shape_example)
If you've followed everything so far without any problems, you've created your first object in a 3D environment using Three.js! Congratulations. Your code should look like the following live sample. You can click "Play" to view and edit the code in the MDN Playground:
## [More shapes and materials](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#more_shapes_and_materials)
Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:
Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. These lines will add a torus geometry; the `TorusGeometry()` method's parameters define, and the parameters are `radius`, `tube diameter`, `radial segment count`, and `tubular segment count`. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black. Adding a rotation gives the torus an initial depth so it doesn't look flat. We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:
This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter to `DodecahedronGeometry()` defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus. As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light. ## [Lights](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#lights)
There are various types of light sources available in Three.js. The most basic is `PointLight`, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:
We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it. This is good progress, but we can make it more exciting! In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them! ## [Animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#animation)
We already used rotation to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. ### [Rotation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#rotation)
Rotating is straightforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the `requestAnimationFrame()` invocation inside the `render` function:
This rotates the cube on every frame, by a tiny bit, so the animation looks smooth. ### [Scaling](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#scaling)
We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable called `t` for counting elapsed time. Add it right before the `render()` function:
Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the `requestAnimationFrame()` invocation:
We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. ### [Moving](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#moving)
Aside from rotation and scaling, we can additionally move objects around the scene.

115
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js-3.md Normal file
View File

@ -0,0 +1,115 @@
---
title: "Building up a basic demo with Three.js - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:30.977911+00:00"
instance: "kb-cron"
---
Add the following, again just below our `requestAnimationFrame()` invocation:
This will move the dodecahedron up and down by applying the `sin()` value to the y-axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations. ## [Three.js example with animation](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#three.js_example_with_animation)
Here's the final code with animated shapes. You can click "Play" to edit the example in the MDN Playground:
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#summary)
Now you know the basics of Three.js; happy experimentation! You can continue reading the [3D Games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web) documentation if you want to learn more. You could also try learning WebGL, to gain a better understanding of what's going on underneath. See our [WebGL documentation](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) for more information. ## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js \(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%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_Three.js&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%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_three.js%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FBuilding_up_a_basic_demo_with_Three.js%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fbuilding_up_a_basic_demo_with_three.js%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

183
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders-0.md Normal file
View File

@ -0,0 +1,183 @@
---
title: "GLSL shaders - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:33.575877+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [GLSL shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders)
# GLSL shaders
Shaders use GLSL (OpenGL Shading Language), a special OpenGL Shading Language with syntax similar to C. GLSL is executed directly by the graphics pipeline. There are [several kinds of shaders](https://wikis.khronos.org/opengl/Shader), but two are commonly used to create graphics on the web: Vertex Shaders and Fragment (Pixel) Shaders. Vertex Shaders transform shape positions into 3D drawing coordinates. Fragment Shaders compute the renderings of a shape's colors and other attributes.
GLSL is not as intuitive as JavaScript. GLSL is strongly typed and there is a lot of math involving vectors and matrices. It can get very complicated — very quickly. In this article we will make a simple code example that renders a cube. To speed up the background code we will be using the Three.js API.
As you may remember from the [basic theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory) article, a vertex is a point in a 3D coordinate system. Vertices may, and usually do, have additional properties. The 3D coordinate system defines space and the vertices help define shapes in that space.
## In this article
* [Shader types](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#shader_types)
* [Demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#demo)
* [Final code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#final_code)
* [Conclusion](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#conclusion)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#see_also)

29
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders-1.md Normal file
View File

@ -0,0 +1,29 @@
---
title: "GLSL shaders - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:33.575877+00:00"
instance: "kb-cron"
---
## [Shader types](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#shader_types)
A shader is essentially a function required to draw something on the screen. Shaders run on a [GPU](https://en.wikipedia.org/wiki/GPU) (graphics processing unit), which is optimized for such operations. Using a GPU to deal with shaders offloads some of the number crunching from the CPU. This allows the CPU to focus its processing power on other tasks, like executing code.
### [Vertex shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#vertex_shaders)
Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the `gl_Position` variable — this is a special, global, and built-in GLSL variable. `gl_Position` is used to store the position of the current vertex.
The `void main()` function is a standard way of defining the `gl_Position` variable. Everything inside `void main()` will be executed by the vertex shader. A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.
### [Fragment shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#fragment_shaders)
Fragment (or texture) shaders define RGBA (red, green, blue, alpha) colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the fragment shader is to set up the `gl_FragColor` variable. `gl_FragColor` is a built-in GLSL variable like `gl_Position`.
The calculations result in a variable containing the information about the RGBA color.
## [Demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#demo)
Let's build a simple demo to explain those shaders in action. Be sure to read [Three.js tutorial](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) first to grasp the concept of the scene, its objects, and materials.
**Note:** Remember that you don't have to use Three.js or any other library to write your shaders — pure [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.
### [Environment setup](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#environment_setup)
To get started with the WebGL shaders, follow the environment setup steps described in the [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) so that you have Three.js working as expected.
### [HTML structure](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#html_structure)
Here's the HTML structure we will use.
It contains some basic information like the document [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title), and some CSS to set the `width` and `height` of the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element that Three.js will insert on the page to be the full size of the viewport. The [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element in the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head) includes the Three.js library in the page; we will write our code into three script tags in the [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body) tag:
1. The first one will contain the vertex shader.
2. The second one will contain the fragment shader.
3. The third one will contain the actual JavaScript code generating the scene.

143
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders-2.md Normal file
View File

@ -0,0 +1,143 @@
---
title: "GLSL shaders - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:33.575877+00:00"
instance: "kb-cron"
---
Before reading on, copy this code to a new text file and save it in your working directory as `index.html`. We'll create a scene featuring a simple cube in this file to explain how the shaders work.
### [The cube's source code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#the_cubes_source_code)
Instead of creating everything from scratch we can reuse the [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) source code of the cube. Most of the components like the renderer, camera, and lights will stay the same, but instead of the basic material we will set the cube's color and position using shaders.
Go to the [cube.html file on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html), copy all the JavaScript code from inside the second [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element, and paste it into the third `<script>` element of the current example. Save and load `index.html` in your browser — you should see a blue cube.
### [The vertex shader code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#the_vertex_shader_code)
Let's continue by writing a simple vertex shader — add the code below inside the body's first `<script>` tag:
The resulting `gl_Position` is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
**Note:** You can learn more about _model_ , _view_ , and _projection transformations_ from the [vertex processing paragraph](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory#vertex_processing), and you can also check out the links at the end of this article to learn more about it.
Both `projectionMatrix` and `modelViewMatrix` are provided by Three.js and the vector is passed with the new 3D position, which results in the original cube moving 10 units along the `x` axis and 5 units along the `z` axis, translated via a shader. We can ignore the fourth parameter and leave it with the default `1.0` value; this is used to manipulate the clipping of the vertex position in the 3D space, but we don't need in our case.
### [The texture shader code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#the_texture_shader_code)
Now we'll add the texture shader to the code — add the code below to the body's second `<script>` tag:
This will set an RGBA color to recreate the current light blue one — the first three float values (ranging from `0.0` to `1.0`) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from `0.0` — fully transparent — to 1.0 — fully opaque).
### [Applying the shaders](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#applying_the_shaders)
To actually apply the newly created shaders to the cube, comment out the `basicMaterial` definition first:
Then, create the [`shaderMaterial`](https://threejs.org/docs/#Reference/Materials/ShaderMaterial):
This shader material takes the code from the scripts and applies it to the object the material is assigned to.
Then, in the line that defines the cube we need to replace the `basicMaterial` with the newly created `shaderMaterial`:
Three.js compiles and runs the shaders attached to the mesh to which this material is given. In our case the cube will have both vertex and texture shaders applied. That's it — you've just created the simplest possible shader, congratulations! Here's what the cube should look like:
![Three.js blue cube demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/cube.png)
It looks exactly the same as the Three.js cube demo but the slightly different position and the same blue color are both achieved using the shader.
## [Final code](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#final_code)
### [HTML](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#html)
### [JavaScript](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#javascript)
### [CSS](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#css)
### [Result](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#result)
## [Conclusion](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#conclusion)
This article has taught the very basics of shaders. Our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on [ShaderToy](https://www.shadertoy.com/) for inspiration and to learn from their sources.
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders#see_also)
* [Learning WebGL](https://web.archive.org/web/20180624211158/http://learningwebgl.com/blog/?page_id=1217) — for general WebGL knowledge
* [WebGL Shaders and GLSL at WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) — for GLSL specific information
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Oct 7, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/glsl_shaders \(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%2FTechniques%2F3D_on_the_web%2FGLSL_Shaders&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%2Ftechniques%2F3d_on_the_web%2Fglsl_shaders%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FGLSL_Shaders%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fglsl_shaders%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F3cbd2b2b2eb0be9425949c20ca5d398645f7c0e9%0A*+Document+last+modified%3A+2025-10-07T19%3A57%3A47.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).

206
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR-0.md Normal file
View File

@ -0,0 +1,206 @@
---
title: "WebXR — Virtual and Augmented Reality for the Web - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:35.828976+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [3D games on the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web)
4. [WebXR — Virtual and Augmented Reality for the Web](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR)
# WebXR — Virtual and Augmented Reality for the Web
The concepts of virtual reality (VR) and augmented reality (AR) aren't new, but the technology is more accessible than ever. We can also use a JavaScript API to make use of it in web applications. This article introduces WebXR from the perspective of its use in games.
**Note:** You may see references to the non-standard WebVR API. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers, and supported only a few devices. The **WebVR** API is replaced by the [**WebXR** Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API).
## In this article
* [VR devices](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#vr_devices)
* [The WebXR API](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#the_webxr_api)
* [Tools and techniques](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#tools_and_techniques)
* [The future of WebXR](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#the_future_of_webxr)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#see_also)
## [VR devices](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#vr_devices)
With the popularity of existing VR headsets such as Meta Quest, Valve Index, and PlayStation VR, the future looks bright — we already have sufficient technology to create meaningful VR gaming experiences.
![Three different VR devices: the Meta Quest 3, the Valve Index, and the Sony PSVR2.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR/hmds.jpg)
## [The WebXR API](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#the_webxr_api)
The core of any WebXR experience is built on top of two foundational concepts:
1. The application must receive real-time data about your headset's position and your controllers' positions in three-dimensional space
2. The application must render a real-time, stereoscopic view to the headset's display(s) according to that positional data
The [WebXR API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) is the central API for capturing information about XR devices connected to a computer. The API can capture headset and controller position, orientation, velocity, acceleration, and other information that you can use in your games.
There are other APIs useful for creating games such as [the Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) for non-XR controller inputs and the [Device Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation) for handling display orientation.
### [Using the WebXR API](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#using_the_webxr_api)
The best place to start with the WebXR API is with our [Fundamentals of WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals) guide. After that, see [Starting up and shutting down a WebXR session](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown).
## [Tools and techniques](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#tools_and_techniques)
[A-Frame](https://aframe.io/) is a web framework that offers simple building blocks for WebXR, so you can rapidly build and experiment with VR websites and games. You can read MDN's [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) tutorial for more details.
Separately, Three.js is one of the most popular 3D engines for the web, and it can be used for WebXR games. Check out Three.js' [How to create VR content](https://threejs.org/docs/#manual/en/introduction/How-to-create-VR-content) documentation to help you make WebXR games with Three.js.
![A 3D representation of a landscape: it's a pinkish sunset, with a blue mountainous land in the background surrounded by a mirror sea and a darker blue island in the second plan.](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR/sechelt.jpg)
Immersion takes priority over gameplay and graphics - you must feel part of the experience. It's not easy to achieve, but it doesn't require realistic images. On the contrary, even basic shapes soaring past at high frame rates can be thrilling if the experience is immersive. Remember: experimenting is key - feel free to go with what works well for your project.
## [The future of WebXR](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#the_future_of_webxr)
Consumer devices are available on the market, and we have JavaScript APIs to support them on the web. As hardware becomes more affordable and the ecosystem matures, developers can focus on building experiences through good UX and UI. It's the perfect time to dive in and experiment with WebXR.
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR#see_also)
* [WebVR Device API](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)
* [Fundamentals of WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals)
* [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)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR-1.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "WebXR — Virtual and Augmented Reality for the Web - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebXR"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:35.828976+00:00"
instance: "kb-cron"
---
## 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/Techniques/3D_on_the_web/WebXR/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/3d_on_the_web/webxr/index.md?plain=1 "Folder: en-us/games/techniques/3d_on_the_web/webxr \(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%2FTechniques%2F3D_on_the_web%2FWebXR&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%2Ftechniques%2F3d_on_the_web%2Fwebxr%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2F3D_on_the_web%2FWebXR%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2F3d_on_the_web%2Fwebxr%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).

332
data/developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts-0.md Normal file
View File

@ -0,0 +1,332 @@
---
title: "Async scripts for asm.js - Game development | MDN"
chunk: 1/1
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:38.111979+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Async scripts for asm.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts)
# Async scripts for asm.js
Every medium or large game should compile [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js) code as part of an async script to give the browser the maximum flexibility to optimize the compilation process. In Gecko, async compilation allows the JavaScript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in Firefox 28). To see the difference, toggle `javascript.options.parallel_parsing` in `about:config`.
## In this article
* [Putting async into action](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#putting_async_into_action)
* [When is async not async?](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#when_is_async_not_async)
## [Putting async into action](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#putting_async_into_action)
Getting async compilation is easy: when writing your JavaScript, just use the `async` attribute like so:
or, to do the same thing via script:
(Scripts created from script default to `async`.) The default HTML shell Emscripten generates produces the latter.
## [When is async not async?](https://developer.mozilla.org/en-US/docs/Games/Techniques/Async_scripts#when_is_async_not_async)
Two common situations in which a script is _not_ async (as [defined by the HTML spec](https://html.spec.whatwg.org/multipage/scripting.html)) are:
and
Both are counted as 'inline' scripts and get compiled and then run immediately.
What if your code is in a JS string? Instead of using `eval` or `innerHTML`, both of which trigger synchronous compilation, you should use a Blob with an object URL:
The setting of `src` rather than `innerHTML` is what makes this script async.
## 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/Techniques/Async_scripts/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/async_scripts/index.md?plain=1 "Folder: en-us/games/techniques/async_scripts \(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%2FTechniques%2FAsync_scripts&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%2Ftechniques%2Fasync_scripts%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FAsync_scripts%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fasync_scripts%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).

186
data/developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games-0.md Normal file
View File

@ -0,0 +1,186 @@
---
title: "Audio for Web games - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:40.334474+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Audio for Web games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games)
# Audio for Web games
Audio is an important part of any game; it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to navigate. We often need to decide which audio parts are essential to our games' experience and which are nice to have but not essential, and devise a strategy accordingly. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.
## In this article
* [Mobile audio caveats](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#mobile_audio_caveats)
* [Mobile workarounds](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#mobile_workarounds)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#see_also)
## [Mobile audio caveats](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#mobile_audio_caveats)
By far the most difficult platforms to provide web audio support for are mobile platforms. Unfortunately these are also the platforms that people often use to play games. There are a couple of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game developers to work with. Let's look at these now.
### [Autoplay](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#autoplay)
Browser autoplay policy now affects desktop _and_ mobile browsers. There is further information about it [here from the Google Developers site](https://developer.chrome.com/blog/autoplay/).
It is worth noting that autoplay with sound is allowed if:
* the user has interacted with the domain.
* on mobile the user has [made the application installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable).

20
data/developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games-1.md Normal file
View File

@ -0,0 +1,20 @@
---
title: "Audio for Web games - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:40.334474+00:00"
instance: "kb-cron"
---
Many browsers will ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap. This means you will have to structure your audio playback to take account of that. This is usually mitigated against by loading the audio in advance and priming it on a user-initiated event. For more passive audio autoplay, for example background music that starts as soon as a game loads, one trick is to detect _any_ user initiated event and start playback then. For other more active sounds that are to be used during the game we could consider priming them as soon as something like a _Start_ button is pressed. To prime audio like this we want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. Jumping to, playing, and then pausing that silence will mean we can now use JavaScript to play that file at arbitrary points. You can find out more about [best practices with the autoplay policy here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy). **Note:** Playing part of your file at zero volume could also work if the browser allows you to change volume (see below). Also note that playing and immediately pausing your audio does not guarantee that a small piece of audio won't be played. **Note:** Adding a web app to your mobile's homescreen may change its capabilities. In the case of autoplay on iOS, this appears to be the case currently. If possible, you should try your code on several devices and platforms to see how it works. For support of autoplay, see [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio#browser_compatibility). ### [Volume](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#volume)
Programmatic volume control may be disabled in mobile browsers. The reason often given is that the user should be in control of the volume at the OS level and this shouldn't be overridden. For support of volume control, see [`HTMLMediaElement.volume`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume#browser_compatibility). ### [Buffering and preloading](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#buffering_and_preloading)
Likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated. Buffering is the process of the browser downloading the media in advance, which we often need to do to ensure smooth playback. The [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) interface comes with [lots of properties](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#instance_properties) to help determine whether a track is in a state to be playable. **Note:** In many ways the concept of buffering is an outdated one. As long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. However, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. There's a [full compatibility chart for mobile and desktop HTMLMediaElement support here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#browser_compatibility). ## [Mobile workarounds](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#mobile_workarounds)
Although mobile browsers can present problems, there are ways to work around the issues detailed above. ### [Audio sprites](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#audio_sprites)
Audio sprites borrow their name from [CSS sprites](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Implementing_image_sprites), which is a visual technique for using CSS with a single graphic resource to break it into a series of sprites. We can apply the same principle to audio so that rather than having a bunch of small audio files that take time to load and play, we have one larger audio file containing all the smaller audio snippets we need. To play a specific sound from the file, we just use the known start and stop times for each audio sprite. The advantage is that we can prime one piece of audio and have our sprites ready to go. To do this we can just play and instantly pause the larger piece of audio. You'll also reduce the number of server requests and save bandwidth. You'll need to sample the current time to know when to stop. If you space your individual sounds by at least 500ms then using the `timeUpdate` event (which fires every 250ms) should be sufficient. Your files may be slightly longer than they strictly need to be, but silence compresses well. Here's an example of an audio sprite player — first let's set up the user interface in HTML:
Now we have buttons with start and stop times in seconds. The "countdown.mp3" MP3 file consists of a number being spoken every 2 seconds, the idea being that we play back that number when the corresponding button is pressed. Let's add some JavaScript to make this work:
**Note:** On mobile we may need to trigger this code from a user-initiated event such as a start button being pressed, as described above. **Note:** Watch out for bit rates. Encoding your audio at lower bit rates means smaller file sizes but lower seeking accuracy. ### [Background music](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#background_music)
Music in games can have a powerful emotional effect. You can mix and match various music samples and assuming you can control the volume of your audio element you could cross-fade different musical pieces. Using the [`playbackRate()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate) method you can even adjust the speed of your music without affecting the pitch, to sync it up better with the action. All this is possible using the standard [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio) element and associated [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement), but it becomes more flexible with the more advanced [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). Let's look at this next. ### [Web Audio API for games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#web_audio_api_for_games)
The Web Audio API is supported across all modern desktop and mobile browsers, except for Opera Mini. With that in mind, it's an acceptable approach for many situations to use the Web Audio API (see the [Can I use Web Audio API page](https://caniuse.com/#feat=audio-api) for more on browser compatibility). The Web Audio API is an advanced audio JavaScript API that is ideal for game audio. Developers can generate audio and manipulate audio samples as well as positioning sound in 3D game space. A feasible cross-browser strategy would be to provide basic audio using the standard `<audio>` element and, where supported, enhance the experience using the Web Audio API. **Note:** Significantly, iOS Safari now supports the Web Audio API, which means it's now possible to write web-based games with native-quality audio for iOS. As the Web Audio API allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. You want those explosions to be accompanied by a thundering boom, not followed by one, after all. ### [Background music with the Web Audio API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#background_music_with_the_web_audio_api)
Although we can use the `<audio>` element to deliver linear background music that doesn't change in reaction to the game environment, the Web Audio API is ideal for implementing a more dynamic musical experience. You may want music to change depending on whether you are trying to build suspense or encourage the player in some way. Music is an important part of the gaming experience and depending on the type of game you are making you may wish to invest significant effort into getting it right. One way you can make your music soundtrack more dynamic is by splitting it up into component loops or tracks.

22
data/developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games-2.md Normal file
View File

@ -0,0 +1,22 @@
---
title: "Audio for Web games - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:40.334474+00:00"
instance: "kb-cron"
---
This is often the way that musicians compose music anyway, and the Web Audio API is extremely good at keeping these parts in sync. Once you have the various tracks that make up your piece you can bring tracks in and out as appropriate. You can also apply filters or effects to music. Is your character in a cave? Increase the echo. Maybe you have underwater scenes, during which you could apply a filter that muffles the sound. Let's look at some Web Audio API techniques for dynamically adjusting music from its base tracks. ### [Loading your tracks](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#loading_your_tracks)
With the Web Audio API you can load separate tracks and loops individually using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) or [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest), which means you can load them synchronously or in parallel. Loading synchronously might mean parts of your music are ready earlier and you can start playing them while others load. Either way you may want to synchronize tracks or loops. The Web Audio API contains the notion of an internal clock that starts ticking the moment you create an audio context. You'll need to take account of the time between creating an audio context and when the first audio track starts playing. Recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio. To see this in action, let's lay out some separate tracks:
All of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the API _before_ we are able to play them. We can do this with JavaScript's [`async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)/[`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) functionality. Once they are available to play, we need to make sure they start at the correct point that other tracks might be playing at, so they sync up. Let's create our audio context:
Now let's select all the [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li) elements; later we can harness these elements to give us access to the track file path and each individual play button. We want to make sure each file has loaded and been decoded into a buffer before we use it, so let's create an `async` function to allow us to do this:
We can then use the `await` operator when calling this function, which ensures that we can run subsequent code when it has finished executing. Let's create another `async` function to set up the sample — we can combine the two async functions in a nice promise pattern to perform further actions when each file is loaded and buffered:
Let's also create a `playTrack()` function, which we can call once a file has been fetched. We need an offset here, so if we have started one file playing, we have a record of how far through to start another file. `start()` takes two optional parameters. The first is when to commence playback and the second is where, which is our offset. Finally, let's loop over our `<li>` elements, grab the correct file for each one and then allow playback by hiding the "loading" text and displaying the play button:
**Note:** You can [see this demo in action here](https://mdn.github.io/webaudio-examples/multi-track/) and [view the source code here](https://github.com/mdn/webaudio-examples/tree/main/multi-track). In the context of your game world you may have loops and samples that are played in different circumstances, and it can be useful to be able to synchronize with other tracks for a more seamless experience. **Note:** This example does not wait for the beat to end before introducing the next piece; we could do this if we knew the BPM (Beats Per Minute) of the tracks. You may find that the introduction of a new track sounds more natural if it comes in on the beat/bar/phrase or whatever units you want to chunk your background music into. To do this before playing the track you want to sync, you should calculate how long it is until the start of the next beat/bar etc. Here's a bit of code that given a tempo (the time in seconds of your beat/bar) will calculate how long to wait until you play the next part — you feed the resulting value to the `start()` function with the first parameter, which takes the absolute time of when that playback should commence. Note the second parameter (where to start playing from in the new track) is relative:
**Note:** If the first parameter is 0 or less than the context `currentTime`, playback will commence immediately. To try this, you can take the same multi-track source code as above, but replace the `if` statement in the `playTrack()` function with the code above. ### [Positional audio](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#positional_audio)
Positional audio can be an important technique in making audio a key part of an immersive gaming experience. The Web Audio API not only enables us to position a number of audio sources in three-dimensional space but it can also allow us to apply filters that make that audio appear more realistic. The [`pannerNode`](https://developer.mozilla.org/en-US/docs/Web/API/PannerNode) harnesses the positional capabilities of the Web Audio API so we can relate further information about the game world to the player. There's a [tutorial here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) to help understand the `pannerNode` in better detail. We can relate:
* The position of objects
* The direction and movement of objects
* The environment (cavernous, underwater, etc.)

120
data/developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games-3.md Normal file
View File

@ -0,0 +1,120 @@
---
title: "Audio for Web games - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:40.334474+00:00"
instance: "kb-cron"
---
This is especially useful in a three-dimensional environment rendered using WebGL, where the Web Audio API makes it possible to tie audio to the objects and viewpoints.
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games#see_also)
* [Web Audio API on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
* [`<audio>` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio)
* [Songs of Diridum: Pushing the Web Audio API to Its Limits](https://hacks.mozilla.org/2013/10/songs-of-diridum-pushing-the-web-audio-api-to-its-limits/)
* [Making HTML5 Audio Actually Work on Mobile](https://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/)
* [Audio Sprites (and fixes for iOS)](https://remysharp.com/2010/12/23/audio-sprites/)
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Jan 25, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/audio_for_web_games/index.md?plain=1 "Folder: en-us/games/techniques/audio_for_web_games \(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%2FTechniques%2FAudio_for_Web_Games&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%2Ftechniques%2Faudio_for_web_games%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FAudio_for_Web_Games%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Faudio_for_web_games%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F06e6e54baef7032c4e81ca93291fde0a0585de8b%0A*+Document+last+modified%3A+2026-01-25T19%3A35%3A57.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).

179
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms-0.md Normal file
View File

@ -0,0 +1,179 @@
---
title: "Implementing game control mechanisms - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:42.928928+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
# Implementing game control mechanisms
One of HTML5's main advantages as a game development platform is the ability to run on various platforms and devices. Streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. In this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
## In this article
* [Case study](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#case_study)
* [Setting up the environment](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#setting_up_the_environment)
* [Pure JavaScript demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#pure_javascript_demo)
* [The articles](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#the_articles)

135
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms-1.md Normal file
View File

@ -0,0 +1,135 @@
---
title: "Implementing game control mechanisms - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:42.928928+00:00"
instance: "kb-cron"
---
## [Case study](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#case_study)
We'll be using the [Captain Rogers: Battle at Andromeda demo](https://rogers2.enclavegames.com/demo/) as an example.
![Captain Rogers: Battle at Andromeda - cover of the game containing Enclave Games and Blackmoon Design logos, Roger's space ship and title of the game.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/captainrogers2-cover.png)
Captain Rogers was created using the [Phaser](https://phaser.io/) framework, the most popular tool for simple 2D game development in JavaScript right now, but it should be fairly easy to reuse the knowledge contained within these articles when building games in pure JavaScript or any other framework. If you're looking for a good introduction to Phaser, then check the [2D breakout game using Phaser](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser) tutorial.
In the following articles we will show how to implement various different control mechanisms for Captain Rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like TV remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
## [Setting up the environment](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#setting_up_the_environment)
Let's start with a quick overview of the game's folder structure, JavaScript files and in-game states, so we know what's happening where. The game's folders look like this:
![Captain Rogers: Battle at Andromeda - folder structure of the games' project containing JavaScript sources, images and fonts.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/captainrogers2-folderstructure.png)
As you can see there are folders for images, JavaScript files, fonts and sound effects. The `src` folder contains the JavaScript files split as a separate states — `Boot.js`, `Preloader.js`, `MainMenu.js` and `Game.js` — these are loaded into the index file in this exact order. The first one initializes Phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.
Every state has its own default methods: `preload()`, `create()`, and `update()`. The first one is needed for preloading required assets, `create()` is executed once the state had started, and `update()` is executed on every frame.
For example, you can define a button in the `create()` function:
It will be created once at the start of the game, and will execute `this.clickEnclave()` action assigned to it when clicked, but you can also use the mouse's pointer value in the `update()` function to make an action:
This will be executed whenever the mouse button is pressed, and it will be checked against the input's `isDown` boolean variable on every frame of the game.
That should give you some understanding of the project structure. We'll be playing mostly with the `MainMenu.js` and `Game.js` files, and we'll explain the code inside the `create()` and `update()` methods in much more detail in later articles.
## [Pure JavaScript demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#pure_javascript_demo)
There's also a [small online demo](https://end3r.github.io/JavaScript-Game-Controls/) with full source code [available on GitHub](https://github.com/end3r/JavaScript-Game-Controls/) where the basic support for the control mechanisms described in the articles is implemented in pure JavaScript. It will be explained in the given articles themselves below, but you can play with it already, and use the code however you want for learning purposes.
## [The articles](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms#the_articles)
JavaScript is the perfect choice for mobile gaming because of HTML being truly multiplatform; all of the following articles focus on the APIs provided for interfacing with different control mechanisms:
1. [Mobile touch controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch) — The first article will kick off with touch, as the mobile first approach is very popular.
2. [Desktop mouse and keyboard controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) — When playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.
3. [Desktop gamepad controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad) — The Gamepad API rather usefully allows gamepads to be used for controlling web apps on desktop/laptop, for that console feel.
4. [Unconventional controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other) — The final article showcases some unconventional control mechanisms, from the experimental to the slightly crazy, which you might not believe could be used to play the game.
## 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/Techniques/Control_mechanisms/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/control_mechanisms/index.md?plain=1 "Folder: en-us/games/techniques/control_mechanisms \(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%2FTechniques%2FControl_mechanisms&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%2Ftechniques%2Fcontrol_mechanisms%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControl_mechanisms%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrol_mechanisms%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).

189
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad-0.md Normal file
View File

@ -0,0 +1,189 @@
---
title: "Desktop gamepad controls - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:45.200223+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
4. [Desktop gamepad controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)
# Desktop gamepad controls
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other)
Now we'll look at adding something extra — support for gamepad controls, via the Gamepad API. It brings a console-like experience to your web games.
The Gamepad API gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the JavaScript code thanks to the browsers implementing such feature. An API exposes all the information you need to hook up your game's logic and successfully control the user interface and gameplay.
## In this article
* [API status, browser and hardware support](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#api_status_browser_and_hardware_support)
* [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#pure_javascript_approach)
* [Phaser approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#phaser_approach)
* [Implementation](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#implementation)
* [On-screen instructions](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#on-screen_instructions)
* [Gameplay controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#gameplay_controls)
* [The paused and game-over states](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#the_paused_and_game-over_states)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#summary)

35
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad-1.md Normal file
View File

@ -0,0 +1,35 @@
---
title: "Desktop gamepad controls - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:45.200223+00:00"
instance: "kb-cron"
---
## [API status, browser and hardware support](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#api_status_browser_and_hardware_support)
The [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) is still in Working Draft status, although browser support is already quite good — around 63% global coverage, according to [caniuse.com](https://caniuse.com/#search=gamepad). The list of supported devices is also quite extensive — most popular gamepads (e.g., XBox 360 or PS3) should be suitable for web implementations. ## [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#pure_javascript_approach)
Let's think about implementing pure JavaScript gamepad controls in our [little controls demo](https://github.com/end3r/JavaScript-Game-Controls/) first to see how it would work. First, we need an event listener to listen for the connection of the new device:
It's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons:
The second line in the `gamepadHandler` function shows up on the screen when the device is connected:
![Gamepad connected message under the Captain Rogers game - wireless XBox 360 controller.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad/controls-gamepadtext.png)
We can also show the `id` of the device — in the case above we're using the XBox 360 wireless controller. To update the state of the gamepad's currently pressed buttons we will need a function that will do exactly that on every frame:
We first reset the `buttonsPressed` array to get it ready to store the latest info we'll write to it from the current frame. Then, if the buttons are available we loop through them; if the `pressed` property is set to `true`, then we add them to the `buttonsPressed` array for later processing. Next, we'll consider the `gamepadButtonPressedHandler()` function:
The function takes a button index as a parameter; it checks if `buttonsPressed` contains the button we are looking for, and returns `true` if it does. This checks if a button is pressed or not. Next, in the `draw()` function we do two things — execute the `gamepadUpdateHandler()` function to get the current state of pressed buttons on every frame, and use the `gamepadButtonPressedHandler()` function to check the buttons we are interested to see whether they are pressed, and do something if they are:
In this case, we are checking the four D-Pad buttons (0-3) and the A button (11). **Note:** Please remember that different devices may have different key mappings, i.e., the D-Pad Right button have an index of 3 on the wireless XBox 360, but may have a different one on another device. You could also create a helper function that would assign proper names to the listed buttons, so for example instead of checking out if `gamepadButtonPressedHandler(3)` is pressed, you could do a more descriptive check: `gamepadButtonPressedHandler('DPad-Right')`. You can see a [live demo](https://end3r.github.io/JavaScript-Game-Controls/) in action — try connecting your gamepad and pressing the buttons. ## [Phaser approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#phaser_approach)
Let's move on to the final Gamepad API implementation in the [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) game we created with Phaser. This is pure JavaScript code however too, so can be used in any other project no matter what framework was used. First off, we'll create a small library that will take care of handling the input for us. Here's the `GamepadAPI` object, which contains useful variables and functions:
The `controller` variable stores the information about the connected gamepad, and there's an `active` boolean variable we can use to know if the controller is connected or not. The `connect()` and `disconnect()` functions are bound to the following events:
They are fired when the gamepad is connected and disconnected respectively. The next function is `update()`, which updates the information about the pressed buttons and axes. The `buttons` variable contains the `layout` of a given controller (for example which buttons are where, because an XBox 360 layout may be different to a generic one), the `cache` containing the information about the buttons from the previous frame and the `status` containing the information from the current frame. The `pressed()` function gets the input data and sets the information about it in our object, and the `axes` property stores the array containing the values signifying the amount an axis is pressed in the `x` and `y` directions, represented by a float in the `(-1, 1)` range. After the gamepad is connected, the information about the controller is stored in the object:
The `disconnect` function removes the information from the object:
The `update()` function is executed in the update loop of the game on every frame, so it contains the latest information on the pressed buttons:
The function above clears the buttons cache, and copies their status from the previous frame to the cache. Next, the button status is cleared and the new information is added. The same goes for the axes' information — looping through axes adds the values to the array. Received values are assigned to the proper objects and returns the pressed info for debugging purposes. The `button.pressed()` function detects the actual button presses:
It checks if the button we're looking for is pressed, and if so, the corresponding boolean variable is set to `true`. If we want to check the button is not held already (so it's a new press), then checking the cached states from the previous frame does the job — if the button was already pressed, then we ignore the new press and set it to `false`. ## [Implementation](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#implementation)
We now know what the `GamepadAPI` object looks like and what variables and functions it contains, so let's learn how all this is actually used in the game. To indicate that the gamepad controller is active we can show the user some custom text on the game's main menu screen. The `textGamepad` object holds the text saying a gamepad has been connected, and is hidden by default. Here's the code we've prepared in the `create()` function that is executed once when the new state is created:
In the `update()` function, which is executed every frame, we can wait until the controller is actually connected, so the proper text can be shown. Then we can keep the track of the information about pressed buttons by using the `Gamepad.update()` method, and react to the given information:
When pressing the `Start` button the relevant function will be called to begin the game, and the same approach is used for turning the audio on and off. There's an option wired up to show `screenGamepadHelp`, which holds an image with all the button controls explained — if the `Y` button is pressed and held, the help becomes visible; when it is released the help disappears. ![Gamepad info with all the available keys described and explained.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad/controls-gamepadinfo.png)
## [On-screen instructions](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#on-screen_instructions)
When the game is started, some introductory text is shown that shows you available controls — we are already detecting if the game is launched on desktop or mobile then showing a relevant message for the device, but we can go even further, to allow for the presence of a gamepad:
When on desktop, we can check if the controller is active and show the gamepad controls — if not, then the keyboard controls will be shown. ## [Gameplay controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#gameplay_controls)
We can offer even more flexibility to the player by giving him main and alternative gamepad movement controls:
They can now move the ship on the screen by using the `DPad` buttons, or the left stick axes.

20
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad-2.md Normal file
View File

@ -0,0 +1,20 @@
---
title: "Desktop gamepad controls - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:45.200223+00:00"
instance: "kb-cron"
---
Have you noticed that the current value of the axes is evaluated against `0.5`? It's because axes are having floating point values while buttons are booleans. After a certain threshold is reached we can assume the input is done deliberately by the user and can act accordingly. For the shooting controls, we used the `A` button — when it is held down, a new bullet is spawned, and everything else is handled by the game:
Showing the screen with all the controls looks exactly the same as in the main menu:
If the `B` button is pressed, the game is paused:
## [The paused and game-over states](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#the_paused_and_game-over_states)
We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is "paused" — if so, the relevant actions are enabled:
Similarly, when the "game-over" state status is active, then we can allow the user to restart the game instead of continuing it:
When the game over screen is visible, the `Start` button restarts the game while the `Back` button helps us get back to the main menu. The same goes for when the game is paused: the `Start` button unpauses the game and the `Back` button goes back, just like before. ## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad#summary)
That's it! We have successfully implemented gamepad controls in our game — try connecting any popular controller like the XBox 360 one and see for yourself how fun it is to avoid the asteroids and shoot the aliens with a gamepad. Now we can move on and explore new, even more unconventional ways to control the HTML game like waving your hand in front of the laptop or screaming into your microphone. * [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad-3.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "Desktop gamepad controls - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:45.200223+00:00"
instance: "kb-cron"
---
## 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/Techniques/Control_mechanisms/Desktop_with_gamepad/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md?plain=1 "Folder: en-us/games/techniques/control_mechanisms/desktop_with_gamepad \(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%2FTechniques%2FControl_mechanisms%2FDesktop_with_gamepad&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%2Ftechniques%2Fcontrol_mechanisms%2Fdesktop_with_gamepad%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControl_mechanisms%2FDesktop_with_gamepad%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrol_mechanisms%2Fdesktop_with_gamepad%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).

185
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard-0.md Normal file
View File

@ -0,0 +1,185 @@
---
title: "Desktop mouse and keyboard controls - Game development | MDN"
chunk: 1/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:47.631067+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
4. [Desktop mouse and keyboard controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
# Desktop mouse and keyboard controls
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)
Now, when we have our mobile controls in place and the game is playable on touch-enabled devices, it would be good to add mouse and keyboard support so the game can be playable on desktop also. That way we can broaden the list of supported platforms. We'll look at this below.
It's also more straightforward to test control-independent features like gameplay on desktop if you develop it there, so you don't have to push the files to a mobile device every time you make a change in the source code.
**Note:** The [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's totally up to you which approach you chose.
## In this article
* [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#pure_javascript_approach)
* [Phaser approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#phaser_approach)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#summary)

41
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard-1.md Normal file
View File

@ -0,0 +1,41 @@
---
title: "Desktop mouse and keyboard controls - Game development | MDN"
chunk: 2/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:47.631067+00:00"
instance: "kb-cron"
---
## [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#pure_javascript_approach)
Let's think about implementing pure JavaScript keyboard/mouse controls in the game first, to see how it would work. First, we'd need an event listener to listen for the pressed keys:
Whenever any key is pressed down, we're executing the `keyDownHandler` function, and when press finishes we're executing the `keyUpHandler` function, so we know when it's no longer pressed. To do that, we'll hold the information on whether the keys we are interested in are pressed or not:
Then we will listen for the `keydown` and `keyup` events and act accordingly in both handler functions. Inside them we can get the code of the key that was pressed from the [`code`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) property of the event object, see which key it is, and then set the proper variable. The codes are all readable string names, but you can [look them up](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values) to be sure; `"ArrowLeft"` is the left arrow:
The `keyUpHandler` looks almost exactly the same as the `keyDownHandler` above, but instead of setting the pressed variables to `true`, we would set them to `false`. If the left arrow is pressed (`⬅︎`; `"ArrowLeft"`), we can set the `leftPressed` variable to `true` and in the `draw` function perform the action assigned to it — move the ship left:
The `draw` function first clears the whole Canvas — we draw everything from scratch on every single frame. Then the pressed key variables are checked and the `playerX` and `playerY` variables (that we define earlier just after `leftPressed` and the others) holding the position of the ship are adjusted by a given amount, let's say 5 pixels. Then the player's ship is drawn on the screen and the next draw is called from within the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame). ![Pure JavaScript demo containing player's ship \(with stars in the background\) that can be controlled with keyboard and mouse.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard/controls-purejsgame.png)
You can see this example in action online at [end3r.github.io/JavaScript-Game-Controls](https://end3r.github.io/JavaScript-Game-Controls/) and the full source code can be found at [github.com/end3r/JavaScript-Game-Controls](https://github.com/end3r/JavaScript-Game-Controls/). ## [Phaser approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#phaser_approach)
As I mentioned before, you can write everything on your own, but you can also take advantage of built-in functions in frameworks like Phaser. These should make development a lot faster. All the edge cases--differences between browser implementations, etc.--are handled by the framework, so you can focus on the actual task you want to do. ### [Mouse](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#mouse)
The mouse interactions in the game are focused on clicking the buttons. In Phaser, the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop. That way, if you already implemented the buttons as shown in the [Mobile touch controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch) article, it will work out of the box on the desktop too:
The button will be placed ten pixels from the top left corner of the screen, use the `logo-enclave` image, and will execute the `clickEnclave()` function when clicked. We can assign actions directly to the buttons:
The button used for shooting works perfectly fine on both the mobile and desktop approach. If you want to use the mouse's cursor position on the screen, you can do so with `this.game.input.mousePointer`. Let's assume you'd like to shoot a bullet when the right half of the screen is clicked with a mouse, it would be done something like this:
If you'd like to differentiate the mouse buttons being pressed, there are three defaults you can pick from:
Keep in mind that instead of `mousePointer`, it's better to use `activePointer` for platform-independent input, if you want to keep the support for mobile touch interactions. ### [Keyboard](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#keyboard)
The whole game can be controlled with just the keyboard and nothing else. The built-in `this.game.input.keyboard` object manages the input from the keyboard, and has [a few helpful methods](https://phaser.io/docs/2.6.1/Phaser.Keyboard.html#methods) like `addKey()` and `isDown()`. There's also the [Phaser.KeyCode](https://phaser.io/docs/2.6.1/Phaser.KeyCode.html#members) object, which contains all the available keyboard keys:
![A full list of Phaser Key codes available inside the game.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard/controls-keycodes.png)
In the main menu of the game, we can add an extra way to begin playing. The Start button can be clicked to do so, but we can use the `Enter` key to do the same:
You can use `addKey()` to add any key the `Phaser.KeyCode` object has to offer. The `onDown()` function is executed whenever the `Enter` key is pressed. It will launch the `clickStart()` method, which starts a new game. It's useful to provide an option to play the game on desktop without using a mouse, so you don't have to take your hands off the keyboard. ### [Controlling the game](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#controlling_the_game)
We can support keyboard input in games built with Phaser by enabling the basic cursor keys in the `create()` function using the `createCursorKeys()` function:
This creates four directional arrow keys for us:
You can also define the keys on your own and offer an alternative, `W` `A` `S` `D` control mechanism. For example:
To support both the cursor and `W` `A` `S` `D` keys, we need to do this:
In the `update()` function we can now move the player's ship in any direction using one of the two sets of movement key options. We can also offer firing control alternatives. For cursor keys the natural shooting button would be on the other side of the keyboard, so the player can use the other hand — for example the `X` key. For `W` `A` `S` `D` keys it can be the Space bar:
In the `update()` function we can easily check if any of those two were pressed on each frame:
If yes, then it's time to shoot some bullets! We can even define a secret cheat button:
And then in the `update()` function, whenever `C` is pressed we'll do this:
We can set the health of the player to maximum. Remember: it's a secret, so _don't tell anyone_! ### [How to play](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#how_to_play)
We've implemented the controls, and now we should inform the player about their options to control the game. They wouldn't know about them otherwise! When showing the how to play screen where the various ways to control the ship in the game are shown, instead of showing them all to everyone, we can detect whether the game is launched on desktop or mobile and just show the appropriate controls for the device:
If the game is running on desktop, the cursor and `W` `A` `S` `D` keys message will be shown. If not, then the mobile touch controls message will be. ![How to play screen of a player's ship \(with stars in the background\) which can be controlled by keyboard and mouse, and the visible message: "arrow keys or WASD to move" and "X or Space to shoot".](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard/controls-howtoplay.png)
To skip the how to play screen, we can listen for any key being pressed and move on:
This hides the intro and starts the actual game without us having to set up another new key control just for this. ### [Pause and game over screens](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#pause_and_game_over_screens)
To make the game fully playable with the keyboard, it should be possible to go back to the main menu, continue playing, or restart the game from the pause and game over screens. It can be done exactly the same as before, by capturing key codes and performing actions.

14
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard-2.md Normal file
View File

@ -0,0 +1,14 @@
---
title: "Desktop mouse and keyboard controls - Game development | MDN"
chunk: 3/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:47.631067+00:00"
instance: "kb-cron"
---
For example, by specifying `Phaser.KeyCode.Backspace` or `Phaser.KeyCode.Delete` you can hook up an action to fire when the `Delete/Backspace` button is pressed. ## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard#summary)
Ok, we've dealt with touch, keyboard, and mouse controls. Now let's move on to look at how to set up the game to be controlled using a console gamepad, using the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API). * [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard-3.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "Desktop mouse and keyboard controls - Game development | MDN"
chunk: 4/4
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:47.631067+00:00"
instance: "kb-cron"
---
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md?plain=1 "Folder: en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard \(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%2FTechniques%2FControl_mechanisms%2FDesktop_with_mouse_and_keyboard&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%2Ftechniques%2Fcontrol_mechanisms%2Fdesktop_with_mouse_and_keyboard%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControl_mechanisms%2FDesktop_with_mouse_and_keyboard%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrol_mechanisms%2Fdesktop_with_mouse_and_keyboard%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

191
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch-0.md Normal file
View File

@ -0,0 +1,191 @@
---
title: "Mobile touch controls - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:49.938414+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
4. [Mobile touch controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch)
# Mobile touch controls
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
The future of mobile gaming is definitely web, and many developers choose the [mobile first](https://developer.mozilla.org/en-US/docs/Glossary/Mobile_First) approach in their game development process — in the modern world, this generally also involves implementing touch controls. In this tutorial, we will implement mobile controls in an HTML game, and enjoy playing on a mobile touch-enabled device.
**Note:** The game [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) is built with Phaser and managing the controls is Phaser-based, but it could also be done in pure JavaScript. The good thing about using Phaser is that it offers helper variables and functions for faster development, but it's entirely up to you which approach you to choose.
## In this article
* [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#pure_javascript_approach)
* [Touch events in Phaser](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#touch_events_in_phaser)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#summary)
## [Pure JavaScript approach](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#pure_javascript_approach)
We could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward:
This way, touching the game's [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) on the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the spaceship around). The events are as follows:
* [touchstart](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event) is fired when the user puts a finger on the screen.
* [touchmove](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchmove_event) is fired when they move the finger on the screen while touching it
* [touchend](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event) is fired when the user stops touching the screen
* [touchcancel](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchcancel_event) is fired when a touch is cancelled, for example when the user moves their finger out of the screen.

42
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch-1.md Normal file
View File

@ -0,0 +1,42 @@
---
title: "Mobile touch controls - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:49.938414+00:00"
instance: "kb-cron"
---
**Note:** The [touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) reference article provides more examples and information.
### [Pure JavaScript demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#pure_javascript_demo)
Let's implement the mobile support in a [little demo](https://github.com/end3r/JavaScript-Game-Controls/) available on GitHub, so we can move the player's ship by touching the screen on a mobile device.
We will use two events: `touchstart` and `touchmove`, both handled by one function. Why? The function `touchHandler` will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (`touchstart`), and when the finger is moved on the screen (`touchmove`):
The `touchHandler` function looks like this:
If the touch occurs (`touches` object is not empty), then we will have all the info we need in that object. We can get the first touch (`e.touches[0]`, our example is not multitouch-enabled), extract the `pageX` and `pageY` variables and set the player's ship position on the screen by subtracting the Canvas offset (distance from the Canvas and the edge of the screen) and half the player's width and height.
![Touch controls for the player's ship, with visible output of the x and y position.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch/controls-touch.png)
To see if it's working correctly we can output the `x` and `y` positions using the `output` element. The `preventDefault()` function is needed to prevent the browser from moving — without it, you'd have the default behavior, and the Canvas would be dragged around the page, which would show the browser scroll bars and look messy.
## [Touch events in Phaser](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#touch_events_in_phaser)
We don't have to do this on our own; frameworks like Phaser offer systems for managing touch events for us — see [managing the touch events](https://phaser.io/docs/2.6.1/Phaser.Touch.html).
### [Pointer theory](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#pointer_theory)
A [pointer](https://phaser.io/docs/2.6.1/Phaser.Pointer.html) represents a single finger on the touch screen. Phaser starts two pointers by default, so two fingers can perform an action at once. Captain Rogers is a simple game — it can be controlled by two fingers, the left one moving the ship and the right one controlling the ship's gun. There's no multitouch or gestures — everything is handled by single pointer inputs.
You can add more pointers to the game by using; `this.game.input.addPointer` up to ten pointers can be managed simultaneously. The most recently used pointer is available in the `this.game.input.activePointer` object — the most recent finger active on the screen.
If you need to access a specific pointer, they are all available at, `this.game.input.pointer1`, `this.game.input.pointer2`, etc. They are assigned dynamically, so if you put three fingers on the screen, then, `pointer1`, `pointer2`, and `pointer3` will be active. Removing the second finger, for example, won't affect the other two, and setting it back again will use the first available property, so `pointer2` will be used again.
You can quickly get the coordinates of the most recently active pointer via the `this.game.input.x` and `this.game.input.y` variables.
### [Input events](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#input_events)
Instead of using the pointers directly it is also possible to listen for `this.game.input` events, like `onDown`, `onUp`, `onTap` and `onHold`:
The `itemTouched()` function will be executed when the `onDown` event is dispatched by touching the screen. The `pointer` variable will contain the information about the pointer that activated the event.
This approach uses the generally available `this.game.input` object, but you can also detect the actions on any game objects like sprites or buttons by using `onInputOver`, `onInputOut`, `onInputDown`, `onInputUp`, `onDragStart`, or `onDragStop`:
That way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user.
An additional advantage of using Phaser is that the buttons you create will take any type of input, whether it's a touch on mobile or a click on desktop — the framework sorts this out in the background for you.
### [Implementation](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#implementation)
The easiest way to add an interactive object that will listen for user input is to create a button:
This one is formed in the `MainMenu` state — it will be placed ten pixels from the top left corner of the screen, use the `logo-enclave` image, and execute the `clickEnclave()` function when it is touched. This will work on mobile and desktop out of the box. There are a few buttons in the main menu, including the one that will start the game.
For the actual gameplay, instead of creating more buttons and covering the small mobile screen with them, we can use something a little different: we'll create invisible areas which respond to the given action. From a design point of view, it is better to make the field of activity bigger without covering half of the screen with button images. For example, tapping on the right side of the screen will fire the weapon:
The code above will create a new button using a transparent image that covers the right half of the screen. You can assign functions on input down and input up separately if you'd like to perform more complicated actions, but in this game touching the right side of the screen will fire the bullets to the right — this is all we need in this case.
Moving the player could be managed by creating the four directional buttons, but we can take the advantage of touch screens and drag the player's ship around:
We can pull the ship around and do something in the meantime, and react when the drag is stopped. Hauling in Phaser, if enabled, will work out of the box — you don't have to set the position of the sprite yourself manually, so you could leave the `onDragStart()` function empty, or place some debug output to see if it's working correctly. The `pointer` element contains the `x` and `y` variables storing the current position of the dragged element.
### [Dedicated plugins](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#dedicated_plugins)
You can use dedicated plugins that handle touch events in different ways, render UI controls, and more. Here are some plugin examples that use a virtual gamepad and joystick:
* [phaser-plugin-virtual-gamepad](https://github.com/ShawnHymel/phaser-plugin-virtual-gamepad) (Phaser 2)
* [Virtual joystick](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/virtualjoystick/) (Phaser 3)

120
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch-2.md Normal file
View File

@ -0,0 +1,120 @@
---
title: "Mobile touch controls - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:49.938414+00:00"
instance: "kb-cron"
---
For basic plugins like the virtual gamepad, you can download the script and make it available in your page:
Then include them in your script and use them similar to the following snippet:
For more information, have a look through then [unofficial catalog of Phaser plugins](https://phaserplugins.com/) to see if something fits your needs.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch#summary)
That covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md?plain=1 "Folder: en-us/games/techniques/control_mechanisms/mobile_touch \(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%2FTechniques%2FControl_mechanisms%2FMobile_touch&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%2Ftechniques%2Fcontrol_mechanisms%2Fmobile_touch%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControl_mechanisms%2FMobile_touch%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrol_mechanisms%2Fmobile_touch%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

184
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other-0.md Normal file
View File

@ -0,0 +1,184 @@
---
title: "Unconventional controls - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:52.455195+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
4. [Unconventional controls](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other)
# Unconventional controls
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)
Having different control mechanisms in your game helps reach broader audiences. Implementing mobile and desktop controls is recommended is a must, and gamepad controls add that extra experience. But imagine going even further — in this article we will explore various unconventional ways to control your web game, some more unconventional than others.
## In this article
* [TV remote](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#tv_remote)
* [Leap Motion](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#leap_motion)
* [Doppler effect](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#doppler_effect)
* [Makey Makey](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#makey_makey)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#summary)

49
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other-1.md Normal file
View File

@ -0,0 +1,49 @@
---
title: "Unconventional controls - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:52.455195+00:00"
instance: "kb-cron"
---
## [TV remote](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#tv_remote)
Playing games on a TV screen doesn't always have to be done through consoles. There's already a Gamepad API working on the desktop computers, so we can imitate the experience, but we can go even further. Modern smart TVs can handle HTML games, because they have a built-in browser that can be used as a gaming platform. Smart TVs are shipped with remote controls, which can be used to control your games if you know how.
The earliest demo of [Captain Rogers: Battle at Andromeda](https://rogers2.enclavegames.com/demo/) was adjusted to work on a huge TV. Interestingly enough, the first Captain Rogers game (Asteroid Belt of Sirius) was optimized for low-end, small-screen, cheap smartphones running Firefox OS, so you can see the difference three years can make — you can read the whole story in our [Building games for Firefox OS TV](https://hacks.mozilla.org/2016/01/building-games-for-firefox-os-tv/) Hacks post.
![Panasonic TV remote controls for the game Captain Rogers: Battle at Andromeda.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/controls-tvremote.png)
Using a TV remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys. Captain Rogers had the keyboard controls implemented already:
It works out of the box. The cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote. How do you know the codes for the other remote keys? You can check them by printing the responses out in the console:
Every key pressed on the remote will show its key code in the console. You can also check this handy cheat sheet seen below if you're working with Panasonic TVs running Firefox OS:
![Remote control key codes for Panasonic TV.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/controls-tvkeys.png)
You can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game. All that is needed is checking for key presses:
You can see it in action by watching [this video](https://www.youtube.com/watch?v=Bh11sP0bcTY).
## [Leap Motion](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#leap_motion)
Have you ever thought about controlling a game only with your hands? It's possible with [Leap Motion](https://www.ultraleap.com/), an immersive controller for games and apps.
Leap Motion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world.
As well as being great for virtual interfaces, it can also be used for a casual 2D gaming experiences. It would be very difficult to do everything with only your hands, but it's totally doable for the simple Captain Roger's gameplay — steering the ship and shooting the bullets.
To get the Leap Motion working on your computer you have to first install it by following the steps at [docs.ultraleap.com](https://docs.ultraleap.com/hand-tracking/getting-started.html#installation-guides). When everything is installed and the controller is connected to your computer we can proceed with implementing support in our [little demo](https://github.com/end3r/JavaScript-Game-Controls/). First, we add a `<script>` tag with the `url` pointing at `https://js.leapmotion.com/leap-0.6.4.min.js`, and add `<div id="output"></div>` just before the closing `</body>` tag for outputting diagnostic information.
We will need a few helper variables for our code to work — one for the purpose of calculating the degrees from radians, two for holding the horizontal and vertical amount of degrees our hand is leaning above the controller, one for the threshold of that lean, and one for the state of our hand's grab status. We next add these lines after all the event listeners for keyboard and mouse, but before the `draw` method:
Right after that we use the Leap's `loop` method to get the information held in the `hand` variable on every frame:
The code above is calculating and assigning the `horizontalDegree`, `verticalDegree` and `grabStrength` values that we will use later on, and outputting it in HTML so we can see the actual values. When those variables are up-to-date, we can use them in the `draw()` function to move the ship:
If the `horizontalDegree` value is greater than our `degreeThreshold`, which is 30 in this case, then the ship will be moved left 5 pixels on every frame. If its value is lower than the threshold's negative value, then the ship is moved right. Up/down movement works in the same sort of way. The last value is `grabStrength`, which is a float between 0 and 1 — when reaching 1 (fist fully clenched), we show an alert for now (in a full game this could be replaced with the shooting logic).
![Leap Motion controller support in the game, with visible output for roll, pitch and strength.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/controls-leapmotion.png)
That's it — everything you needed for a working Leap Motion example in JavaScript is here already. You can explore the `hand`'s properties and implement any behavior you like right inside your game.
## [Doppler effect](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#doppler_effect)
There's a very interesting article available on [Motion sensing using the doppler effect](https://danielrapp.github.io/doppler/), which mixes together waving your hand and using the microphone. This time it's about detecting sound waves bouncing off objects and returning to the microphone.
![Doppler effect as a way to control the scroll of an article on a laptop using hand gesture.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/controls-doppler.png)
If the frequency of the bounced sound is shifted from the original one, then we can detect that the movement of that object occurred. That way we can detect a hand movement by using only a built-in microphone!
This can be accomplished using [a small library](https://github.com/DanielRapp/doppler) created by Daniel Rapp — it can be as simple as calculating the difference between two frequencies:
The `diff` would be the difference between the initial position of the hand and the final one.
This approach won't give us the full flexibility of using a Gamepad, or even Leap Motion, but it's definitely an interesting, unconventional alternative. You can use it to scroll a page hands-free, or play theremin, but it should also be enough to move the ship up and down the screen if implemented correctly.
## [Makey Makey](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#makey_makey)
If you want to go completely bananas you can use [Makey Makey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces.
![Controlling a banana piano using Makey Makey.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/controls-banana.png)
Check out the [banana piano video](https://www.youtube.com/watch?v=_DWQ6ce2Ags), and be sure to visit the [quick start guide](https://learn.sparkfun.com/tutorials/makey-makey-quickstart-guide) for all the needed info.
There's even a Cylon.js-supported Makey Button functionality inspired by the Makey Makey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this:
As the description says: this GPIO driver allows you to connect a 10 MOhm resistor to a digital pin on your Arduino or Raspberry Pi to control your robots with bananas, clay, or drawable circuitry.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other#summary)
I hope you liked the experiments — if you have any others that you think might interest other people, feel free to add details of them here.
And remember: have fun making games!
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_gamepad)
* [ Overview: Implementing game control mechanisms](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other-2.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "Unconventional controls - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:52.455195+00:00"
instance: "kb-cron"
---
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Jan 8, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Other/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/control_mechanisms/other/index.md?plain=1 "Folder: en-us/games/techniques/control_mechanisms/other \(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%2FTechniques%2FControl_mechanisms%2FOther&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%2Ftechniques%2Fcontrol_mechanisms%2Fother%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControl_mechanisms%2FOther%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrol_mechanisms%2Fother%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Ff8ef875113a7d3e9952f41de68be1e3a3a1e6988%0A*+Document+last+modified%3A+2026-01-08T01%3A40%3A09.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).

182
data/developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API-0.md Normal file
View File

@ -0,0 +1,182 @@
---
title: "Implementing controls using the Gamepad API - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:54.712155+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Using the Gamepad API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API)
# Implementing controls using the Gamepad API
This article looks at implementing an effective, cross-browser control system for web games using the Gamepad API, allowing you to control your web games using console game controllers. It features a case study game — Hungry Fridge, created by [Enclave Games](https://enclavegames.com/).
## In this article
* [Controls for web games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#controls_for_web_games)
* [Which gamepads are best?](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#which_gamepads_are_best)
* [Case Study: Hungry Fridge](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#case_study_hungry_fridge)
* [Demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#demo)
* [Implementation](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#implementation)
* [Specification update](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#specification_update)
* [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#summary)

39
data/developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API-1.md Normal file
View File

@ -0,0 +1,39 @@
---
title: "Implementing controls using the Gamepad API - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:54.712155+00:00"
instance: "kb-cron"
---
## [Controls for web games](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#controls_for_web_games)
Historically playing games on a console connected to your TV was always a totally different experience to gaming on the PC, mostly because of the unique controls. Eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser. Now we have the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API), which gives us the ability to play browser-based games using gamepad controllers without any plugins. The Gamepad API achieves this by providing an interface exposing button presses and axis changes that can be used inside JavaScript code to handle the input. These are good times for browser gaming.
## [Which gamepads are best?](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#which_gamepads_are_best)
The most popular gamepads right now are those from the Xbox 360, Xbox One, PS3 and PS4 — they have been heavily tested and work well with the Gamepad API implementation in browsers across Windows and macOS.
There's also a number of other devices with various different button layouts that more or less work across browser implementations. The code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wireless Xbox 360 controller and the Firefox browser on macOS.
## [Case Study: Hungry Fridge](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#case_study_hungry_fridge)
The [GitHub Game Off II](https://github.blog/open-source/gaming/github-game-off-ii/) competition ran in November 2013 and [Enclave Games](https://enclavegames.com/) decided to take part in it. The theme for the competition was "change", so they submitted a game where you have to feed the Hungry Fridge by tapping the healthy food (apples, carrots, lettuces) and avoid the "bad" food (beer, burgers, pizza.) A countdown changes the type of food the Fridge wants to eat every few seconds, so you have to be careful and act quickly.
The second, hidden "change" implementation is the ability to transform the static Fridge into a full-blown moving, shooting and eating machine. When you connect the controller, the game significantly changes (Hungry Fridge turns into the Super Turbo Hungry Fridge) and you're able to control the armored fridge using the Gamepad API. You have to shoot down the food, but once again you also have to find the type of food the Fridge wants to eat at each point, or else you'll lose energy.
The game encapsulates two totally different types of "change" — good food vs. bad food, and mobile vs. desktop.
## [Demo](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#demo)
The full version of the Hungry Fridge game was built first, and then to showcase the Gamepad API in action and show the JavaScript source code, a [simple demo](https://end3r.github.io/Gamepad-API-Content-Kit/demo/demo.html) was created. It's part of the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/) available on GitHub where you can dive deep into the code and study exactly how it works.
The code explained below is from the full version of the Hungry Fridge game, but it's almost identical to the one from the demo — the only difference is that the full version uses the `turbo` variable to decide whether the game will be launched using Super Turbo mode. It works independently, so it could be turned on even if the gamepad is not connected.
**Note:** Easter Egg time: There's a hidden option to launch Super Turbo Hungry Fridge on the desktop without having a gamepad connected — click the gamepad icon in the top right corner of the screen. It will launch the game in the Super Turbo mode and you'll be able to control the Fridge with the keyboard: A and D for turning the turret left and right, W for shooting and arrow keys for movement.
## [Implementation](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#implementation)
There are two important events to use along with the Gamepad API — `gamepadconnected` and `gamepaddisconnected`. The first one is fired when the browser detects the connection of a new gamepad while the second one is fired when a gamepad is disconnected (either physically by the user or due to inactivity.) In the demo, the `gamepadAPI` object is used to store everything related to the API:
The `buttons` array contains the Xbox 360 button layout:
This can be different for other types of gamepads like the PS3 controller (or a no-name, generic one), so you have to be careful and not just assume the button you're expecting will be the same button you'll actually get. Next, we set up two event listeners to get the data:
Due to security policy, you have to interact with the controller first while the page is visible for the event to fire. If the API worked without any interaction from the user it could be used to fingerprint them without their knowledge.
Both functions are fairly simple:
The `connect()` function takes the event as a parameter and assigns the `gamepad` object to the `gamepadAPI.controller` variable. We are using only one gamepad for this game, so it's a single object instead of an array of gamepads. We then set the `turbo` property to `true`. (We could use the `gamepad.connected` boolean for this purpose, but we wanted to have a separate variable for turning on Turbo mode without needing to have a gamepad connected, for reasons explained above.)
The `disconnect` function sets the `gamepad.turbo property` to `false` and removes the variable containing the gamepad object.
### [Gamepad object](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#gamepad_object)
There's lots of useful information contained in the `gamepad` object, with the states of buttons and axes being the most important:
* `id`: A string containing information about the controller.
* `index`: A unique identifier for the connected device.
* `connected`: A boolean variable, `true` if the device is connected.
* `mapping`: The layout type of the buttons; `standard` is the only available option for now.
* `axes`: The state of each axis, represented by an array of floating-point values.
* `buttons` : The state of each button, represented by an array of `GamepadButton` objects containing `pressed` and `value` properties.

135
data/developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API-2.md Normal file
View File

@ -0,0 +1,135 @@
---
title: "Implementing controls using the Gamepad API - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:54.712155+00:00"
instance: "kb-cron"
---
The `index` variable is useful if we're connecting more than one controller and want to identify them to act accordingly — for example when we have a two-player game requiring two devices to be connected.
### [Querying the gamepad object](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#querying_the_gamepad_object)
Beside `connect()` and `disconnect()`, there are two more methods in the `gamepadAPI` object: `update()` and `buttonPressed()`. `update()` is executed on every frame inside the game loop, to update the actual status of the gamepad object regularly:
On every frame, `update()` saves buttons pressed during the previous frame to the `buttonsCache` array and takes fresh ones from the `gamepadAPI.controller` object. Then it loops through buttons and axes to get their actual states and values.
### [Detecting button presses](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#detecting_button_presses)
The `buttonPressed()` method is also placed in the main game loop to listen for button presses. It takes two parameters — the button we want to listen to and the (optional) way to tell the game that holding the button is accepted. Without it you'd have to release the button and press it again to have the desired effect.
There are two types of action to consider for a button: a single press and a hold. The `newPress` boolean variable will indicate whether there's a new press of a button or not. Next, we check the array of pressed buttons — if the given button is in here, the `newPress` variable is set to `true`. To check if the press is a new one, so the player is not holding the key, we check the cached states of the buttons from the previous frame of the game loop. If we find it there it means that the button is being held, so there's no new press. In the end the `newPress` variable is returned. The `buttonPressed` function is used in the update loop of the game like this:
If `gamepadAPI.turbo` is `true` and the given buttons are pressed (or held), we execute the proper functions assigned to them. In this case, pressing or holding `A` will fire the bullet and pressing `B` will pause the game.
### [Axis threshold](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#axis_threshold)
The buttons have only two states: `0` or `1`, but the analog sticks can have many values — they have a float range between `-1` and `1` along both the `X` and `Y` axes.
Gamepads can get dusty from lying around inactive, meaning that checking for exact -1 or 1 values can be a problem. For this reason, it can be good to set a threshold for the value of the axis to take effect. For example, the Fridge tank will turn right only when the `X` value is bigger than `0.5`:
Even if we move it a little by mistake or the stick doesn't make it back to its original position, the tank won't turn unexpectedly.
## [Specification update](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#specification_update)
After more than a year of stability, in April 2015 the W3C Gamepad API spec was updated ([see the latest](https://w3c.github.io/gamepad/).) It hasn't changed much, but it's good to know what is going on — the updates are as follows.
### [Getting the gamepads](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#getting_the_gamepads)
The [`Navigator.getGamepads()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getGamepads) method has been updated with [a longer explanation and an example piece of code](https://w3c.github.io/gamepad/#navigator-interface-extension). Now the length of the array of gamepads has to be `n+1` where `n` is the number of connected devices — when there's one device connected and it has the index of 1, the array's length is 2 and it will look like this: `[null, [object Gamepad]]`. If the device is disconnected or unavailable, the value for it is set to `null`.
### [Mapping standard](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#mapping_standard)
The mapping type is now an enumerable object instead of a string:
This enum defines the set of known mappings for a Gamepad. For now, there's only the `standard` layout available, but new ones may appear in the future. If the layout is unknown, it is set to an empty string.
### [Events](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#events)
There were more events available in the spec than just `gamepadconnected` and `gamepaddisconnected` available, but they were removed from the specification as they were thought to not be very useful. The discussion is still ongoing whether they should be put back, and in what form.
## [Summary](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API#summary)
The Gamepad API enables delivering a console-like experience to the browser without the need for any plugins. You can play the full version of the [Hungry Fridge](https://enclavegames.com/games/hungry-fridge/) game directly in your browser. Check the other resources on the [Gamepad API Content Kit](https://end3r.github.io/Gamepad-API-Content-Kit/).
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Controls_Gamepad_API/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/controls_gamepad_api/index.md?plain=1 "Folder: en-us/games/techniques/controls_gamepad_api \(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%2FTechniques%2FControls_Gamepad_API&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%2Ftechniques%2Fcontrols_gamepad_api%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FControls_Gamepad_API%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcontrols_gamepad_api%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

179
data/developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look-0.md Normal file
View File

@ -0,0 +1,179 @@
---
title: "Crisp pixel art look with image-rendering - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:57.179866+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Image rendering for pixel art](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look)
# Crisp pixel art look with image-rendering
This article discusses a useful technique for giving your canvas/WebGL games a crisp pixel art look, even on high definition monitors.
## In this article
* [The concept](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#the_concept)
* [Up-scaling <img> with CSS](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#up-scaling_img_with_css)
* [Crisp pixel art in canvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#crisp_pixel_art_in_canvas)
* [Arbitrarily scaling images in canvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#arbitrarily_scaling_images_in_canvas)

32
data/developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look-1.md Normal file
View File

@ -0,0 +1,32 @@
---
title: "Crisp pixel art look with image-rendering - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:57.179866+00:00"
instance: "kb-cron"
---
## [The concept](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#the_concept)
Retro [pixel art](https://en.wikipedia.org/wiki/Pixel_art) aesthetics are getting popular, especially in [indie games](https://en.wikipedia.org/wiki/Indie_game) or [game jam](https://en.wikipedia.org/wiki/Game_jam) entries. But since today's screens render content at high resolutions, there is a problem with making sure the pixel art does not look blurry. Here's an original image that an actual arcade game may have used:
![small pixelated man](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/technique_original.png)
We can manually scale it up in an image editor, expanding each pixel into a 4x4 block of pixels. The image editor can leverage algorithms like [nearest-neighbor interpolation](https://en.wikipedia.org/wiki/Nearest-neighbor_interpolation) to achieve crisp edges.
![larger pixelated man](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/technique_4x.png)
Two downsides to this method are larger file sizes and [compression artifacts](https://en.wikipedia.org/wiki/Compression_artifact), because the image actually contains more pixels.
The idea of producing crisp pixel art is simple: we want to have a single pixel in the original image map to a block of pixels on the screen, without any smoothing or blending between them. The example above achieves this by manually doing that mapping in an image editor. But we can also achieve this effect in the browser using CSS.
## [Up-scaling <img> with CSS](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#up-scaling_img_with_css)
An image has an intrinsic size, which is its actual pixel dimensions. It also has a rendered size, which is set by HTML or CSS. If the rendered size is larger than the intrinsic size, the browser will automatically scale up the image to fit the rendered size.
![small pixelated man, upscaled with CSS, appearing blurry](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/technique_original.png)
But as you can see in the image above, the browser's default scaling algorithm makes the image look blurry. This is because it uses a smoothing algorithm that averages the colors of pixels to create a smooth transition between them.
To fix this, we can use the CSS property [`image-rendering`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-rendering) to tell the browser to use a different scaling algorithm that preserves the hard edges of pixel art.
![small pixelated man, upscaled with width and height attributes, appearing crisp](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/technique_original.png)
There are also the `crisp-edges` and `-webkit-optimize-contrast` values that work on some browsers. Check out the [`image-rendering`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-rendering) article for more information on the differences between these values, and which values to use depending on the browser.
`image-rendering: pixelated` is not without its problems as a crisp-edge-preservation technique. When CSS pixels don't align with device pixels (if the [`devicePixelRatio`](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio "devicePixelRatio") is not an integer), certain pixels may be drawn larger than others, resulting in a non-uniform appearance. For example, in Chrome and Firefox, when you zoom in or out, the `devicePixelRatio` changes. This can cause the pixel art to appear distorted or uneven. The screenshot below is taken at 110% page zoom in Chrome. If you look closely, you can see that the left edge of the character's face and leg appears uneven.
![Pixelated image with uneven edges](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/pixelated_uneven.png)
This is not an easy problem to solve, however, because it is impossible to fill device pixels precisely when the CSS pixels cannot accurately map to them.
## [Crisp pixel art in canvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#crisp_pixel_art_in_canvas)
Many games render inside a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element, which can use the same `image-rendering` technique because canvases are also raster images. The steps to achieve this are:
* Create a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element and set its `width` and `height` attributes to the original, smaller resolution.
* Set its CSS [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/height) properties to be any value you want, but stretched equally to preserve the aspect ratio. If the canvas was created with a 128 pixel width, for example, we would set the CSS `width` to `512px` if we wanted a 4x scale.
* Set the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element's `image-rendering` CSS property to `pixelated`.

127
data/developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look-2.md Normal file
View File

@ -0,0 +1,127 @@
---
title: "Crisp pixel art look with image-rendering - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:57.179866+00:00"
instance: "kb-cron"
---
Let's have a look at an example. The original image we want to upscale looks like this:
![Pixelated night scenery of a cat on the edge off a cliff with little hearts above his head, behind him a big full moon. With a black background, white text is displayed at the bottom of the image saying: in love with the moon.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/cat.png)
Here's some HTML to create a simple canvas:
CSS to size the canvas and render a crisp image:
And some JavaScript to set up the canvas and load the image:
This code used together produces the following result:
**Note:** Canvas content is not accessible to screen readers. Include descriptive text as the value of the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute directly on the canvas element itself or include fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM, but nested fallback content is.
## [Arbitrarily scaling images in canvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look#arbitrarily_scaling_images_in_canvas)
For the character example with a plain `<img>`, you can set the scale factor to any value you want, and `image-rendering: pixelated` will do its best to preserve crisp edges. For example, you can scale the image by 5.7x:
![small pixelated man, upscaled with CSS, appearing crisp](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/technique_original.png)
Previously, we said that `image-rendering: pixelated` works at the stage of mapping image pixels to CSS pixels. But if we are drawing the image into a canvas, we have two layers of mapping: from image pixels to canvas pixels, and then from canvas pixels to CSS pixels. The second step works the same way as image scaling with `<img>`, so you can also use arbitrary scale factors when scaling the canvas with CSS:
But we need to be careful with how the image pixels are aligned with the canvas pixels. By default the image pixels are drawn 1:1 to canvas pixels; however, if you use the extra arguments of [`drawImage()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage "drawImage\(\)") to draw the image at a different size in the canvas, you may end up with a non-integer scale factor. For example, if you draw a 128x128 pixel image into a 100x100 pixel area on the canvas, each image pixel will be drawn as 0.78x0.78 canvas pixels, which can lead to blurriness.
The same happens if you use [`scale()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale "scale\(\)") to scale the canvas grid. In this case, a unit of 1 when calling canvas methods would be interpreted as a non-integer number of canvas pixels, leading to blurriness.
To fix this, you have to ensure that the image pixels are always drawn at integer multiples of canvas pixels. That is, when you call `drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`, `dWidth` needs to be equal to `sWidth / xScale * n`, where `xScale` is the x scale factor for the context (1.0 if you haven't called `scale()`), and `n` is an integer (1, 2, 3, ...). The same applies to `dHeight`. So if you want to draw a 128x128 pixel image on a canvas that has been scaled by 0.8, you can only draw it at sizes like 160 (128 / 0.8 × 1), 320 (128 / 0.8 × 2), etc.
See the canvas [drawing shapes](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#seeing_blurry_edges) guide for more information about how canvas pixels work.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Oct 31, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/crisp_pixel_art_look/index.md?plain=1 "Folder: en-us/games/techniques/crisp_pixel_art_look \(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%2FTechniques%2FCrisp_pixel_art_look&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%2Ftechniques%2Fcrisp_pixel_art_look%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FCrisp_pixel_art_look%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fcrisp_pixel_art_look%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F55326f330a6ae829494c7606b1bd47b2c0f9d888%0A*+Document+last+modified%3A+2025-10-31T00%3A41%3A06.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).

201
data/developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps-0.md Normal file
View File

@ -0,0 +1,201 @@
---
title: "Tiles and tilemaps overview - Game development | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:59.650321+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [Tiles and tilemaps overview](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps)
# Tiles and tilemaps overview
Tilemaps are a very popular technique in 2D game development, consisting of building the game world or level map out of small, regular-shaped images called **tiles**. This results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times. This set of articles covers the basics of creating tile maps using [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) (although the same high level techniques could be used in any programming language.)
Besides the performance gains, tilemaps can also be mapped to a logical grid, which can be used in other ways inside the game logic (for example creating a path-finding graph, or handling collisions) or to create a level editor.
Some popular games that use this technique are _Super Mario Bros_ , _Pacman_ , _Zelda: Link's Awakening_ , _Starcraft_ , and _Sim City 2000_. Think about any game that uses regularly repeating squares of background, and you'll probably find it uses tilemaps.
## In this article
* [The tile atlas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#the_tile_atlas)
* [The tilemap data structure](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#the_tilemap_data_structure)
* [Square tiles](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#square_tiles)
* [Isometric tilemaps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#isometric_tilemaps)
* [Performance](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#performance)
* [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#see_also)
## [The tile atlas](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#the_tile_atlas)
The most efficient way to store the tile images is in an atlas or spritesheet. This is all of the required tiles grouped together in a single image file. When it's time to draw a tile, only a small section of this bigger image is rendered on the game canvas. The below images shows a tile atlas of 8 x 4 tiles:
![Tile atlas image](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/tile_atlas.png)
Using an atlas also has the advantage of naturally assigning every tile an **index**. This index is perfect to use as the tile identifier when creating the tilemap object.
## [The tilemap data structure](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#the_tilemap_data_structure)
It is common to group all the information needed to handle tilemaps into the same data structure or object. These data objects ([map object example](https://github.com/mozdevs/gamedev-js-tiles/blob/gh-pages/square/no-scroll.js#L1-L18)) should include:
* **Tile size** : The size of each tile in pixels across / pixels down.
* **Image atlas** : The Image atlas that will be used (one or many.)
* **Map dimensions** : The dimensions of the map, either in tiles across / tiles down, or pixels across / pixels down.
* **Visual grid** : Includes indices showing what type of tile should be placed on each position in the grid.
* **Logic grid** : This can be a collision grid, a path-finding grid, etc., depending on the type of game.
**Note:** For the visual grid, a special value (usually a negative number, `0` or `null`) is needed to represent empty tiles.
## [Square tiles](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#square_tiles)
Square-based tilemaps are the most simple implementation. A more generic case would be rectangular-based tilemaps — instead of square — but they are far less common. Square tiles allow for two **perspectives** :
* Top-down (like many RPG's or strategy games like _Warcraft 2_ or _Final Fantasy_ 's world view.)
* Side-view (like platformers such as _Super Mario Bros_.)

47
data/developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps-1.md Normal file
View File

@ -0,0 +1,47 @@
---
title: "Tiles and tilemaps overview - Game development | MDN"
chunk: 2/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:59.650321+00:00"
instance: "kb-cron"
---
### [Static tilemaps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#static_tilemaps)
A tilemap can either fit into the visible screen area screen or be larger. In the first case, the tilemap is **static** — it doesn't need to be scrolled to be fully shown. This case is very common in arcade games like _Pacman_ , _Arkanoid_ , or _Sokoban_.
Rendering static tilemaps is easy, and can be done with a nested loop iterating over columns and rows. A high-level algorithm could be:
You can read more about this and see an example implementation in [Square tilemaps implementation: Static maps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps).
### [Scrolling tilemaps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#scrolling_tilemaps)
**Scrolling** tilemaps only show a small portion of the world at a time. They can follow a character — like in platformers or RPGs — or allow the player to control the camera — like in strategy or simulation games.
#### Positioning and camera
In all scrolling games, we need a translation between **world coordinates** (the position where sprites or other elements are located in the level or game world) and **screen coordinates** (the actual position where those elements are rendered on the screen). The world coordinates can be expressed in terms of tile position (row and column of the map) or in pixels across the map, depending on the game. To be able to transform world coordinates into screen coordinates, we need the coordinates of the camera, since they determine which section of the world is being displayed.
Here are examples showing how to translate from world coordinates to screen coordinates and back again:
#### Rendering
A trivial method for rendering would just be to iterate over all the tiles (like in static tilemaps) and draw them, subtracting the camera coordinates (like in the `worldToScreen()` example shown above) and letting the parts that fall outside the view window sit there, hidden. Drawing all the tiles that can not be seen is wasteful, however, and can take a toll on performance. **Only tiles that are at visible should be rendered** ideally — see the [Performance](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#performance) section for more ideas on improving rendering performance.
You can read more about implementing scrolling tilemaps and see some example implementations in [Square tilemaps implementation: Scrolling maps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Scrolling_maps).
### [Layers](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#layers)
The visual grid is often made up of several layers. This allows us to have a richer game world with fewer tiles, since the same image can be used with different backgrounds. For instance, a rock that could appear on top of several terrain types (like grass, sand or brick) could be included on its own separate tile which is then rendered on a new layer, instead of several rock tiles, each with a different background terrain.
If characters or other game sprites are drawn in the middle of the layer stack, this allows for interesting effects such as having characters walking behind trees or buildings.
The following screenshot shows an example of both points: a character appearing _behind_ a tile (the knight appearing behind the top of a tree) and a tile (the bush) being rendered over different terrain types.
![A grid of layered background terrains. A bush tile is rendered at the top, over a large grass terrain, and again over a layered rectangular terrain with brown sand at the bottom. A tree tile is rendered over the grass terrain at the bottom left and again at the bottom right. A knight tile appears behind the tree tile that is rendered at the bottom left.](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/screen_shot_2015-10-06_at_15.56.05.png)
### [The logic grid](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#the_logic_grid)
Since tilemaps are an actual grid of visual tiles, it is common to create a mapping between this visual grid and a logic grid. The most common case is to use this logic grid to handle collisions, but other uses are possible as well: character spawning points, detecting whether some elements are placed together in the right way to trigger a certain action (like in _Tetris_ or _Bejeweled_), path-finding algorithms, etc.
**Note:** You can take a look at our demo that shows [how to use a logic grid to handle collisions](https://mozdevs.github.io/gamedev-js-tiles/square/logic-grid.html).
## [Isometric tilemaps](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#isometric_tilemaps)
Isometric tilemaps create the illusion of a 3D environment, and are extremely popular in 2D simulation, strategy, or RPG games. Some of these games include _SimCity 2000_ , _Pharaoh_ , or _Final Fantasy Tactics_. The below image shows an example of an atlas for an isometric tileset.
![A 3x4 map of variously colored tiles in isometric projection](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/iso_tiles.png)
## [Performance](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#performance)
Drawing scrolling tile maps can take a toll on performance. Usually, some techniques need to be implemented so scrolling can be smooth. The first approach, as discussed above, is to **only draw tiles that will be visible**. But sometimes, this is not enough.
One simple technique consists of pre-rendering the map in a canvas on its own (when using the Canvas API) or on a texture (when using WebGL), so tiles don't need to be re-drawn every frame and rendering can be done in just one blitting operation. Of course, if the map is large this doesn't really solve the problem — and some systems don't have a very generous limit on how big a texture can be.
One way consists of [drawing the section that will be visible off-canvas](https://mozdevs.github.io/gamedev-js-tiles/performance/offcanvas.html) (instead of the entire map.) That means that as long as there is no scrolling, the map doesn't need to be rendered.
A caveat of that approach is that when there _is_ a scrolling, that technique is not very efficient. A better way would be to create a canvas that is 2x2 tiles bigger than the visible area, so there is one tile of "bleeding" around the edges. That means that the map only needs to be redrawn on the canvas when the scrolling has advanced one full tile — instead of every frame — while scrolling.
In fast games that might still not be enough. An alternative method would be to split the tilemap into big sections (like a full map split into 10 x 10 chunks of tiles), pre-render each one off-canvas and then treat each rendered section as a "big tile" in combination with one of the algorithms discussed above.
## [See also](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps#see_also)
* Related articles on the MDN:
* [Static square tile maps implementation with Canvas API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Static_maps)
* [Scrolling square tile maps implementation with Canvas API](https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation:_Scrolling_maps)
* External resources:
* [Demos and source code](https://mozdevs.github.io/gamedev-js-tiles/)
* [Grid parts and relationships](https://www.redblobgames.com/grids/parts/) by Amit Patel (May 2021)
* [Isometric graphics in video games](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia)

112
data/developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps-2.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "Tiles and tilemaps overview - Game development | MDN"
chunk: 3/3
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:21:59.650321+00:00"
instance: "kb-cron"
---
## 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/Techniques/Tilemaps/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/tilemaps/index.md?plain=1 "Folder: en-us/games/techniques/tilemaps \(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%2FTechniques%2FTilemaps&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%2Ftechniques%2Ftilemaps%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FTilemaps%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Ftilemaps%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).

0
data/developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps/Square_tilemaps_implementation Normal file
View File

334
data/developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels-0.md Normal file
View File

@ -0,0 +1,334 @@
---
title: "WebRTC data channels - Game development | MDN"
chunk: 1/1
source: "https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:06.478199+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Techniques for game development](https://developer.mozilla.org/en-US/docs/Games/Techniques)
3. [WebRTC data channels](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels)
# WebRTC data channels
The [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) (Web Real-Time Communications) API is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. This article explains more about this, and shows you how to use libraries to implement data channels in your game.
## In this article
* [What is a data channel?](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#what_is_a_data_channel)
* [Original Document Information](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#original_document_information)
## [What is a data channel?](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#what_is_a_data_channel)
A WebRTC data channel lets you send text or binary data over an active connection to a peer. In the context of a game, this lets players send data to each other, whether text chat or game status information. Data channels come in two flavors.
**Reliable channels** guarantee that messages you send arrive at the other peer and in the same order in which they're sent. This is analogous to a TCP socket.
**Unreliable channels** make no such guarantees; messages aren't guaranteed to arrive in any particular order and, in fact, aren't guaranteed to arrive at all. This is analogous to a UDP socket.
We have [documentation for using WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API). This article, however, will take advantage of some libraries that can help trivialize the work, and will demonstrate ways to use abstraction to work around implementation differences between browsers. Hopefully, of course, those differences will fade away in time.
## [Original Document Information](https://developer.mozilla.org/en-US/docs/Games/Techniques/WebRTC_data_channels#original_document_information)
* Author(s): Alan Kligman
* Source Article: [WebRTC Data Channels for Great Multiplayer](https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/)
* Other Contributors: Robert Nyman
* Copyright Information: Alan Kligman, 2013
## 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/Techniques/WebRTC_data_channels/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/techniques/webrtc_data_channels/index.md?plain=1 "Folder: en-us/games/techniques/webrtc_data_channels \(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%2FTechniques%2FWebRTC_data_channels&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%2Ftechniques%2Fwebrtc_data_channels%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTechniques%2FWebRTC_data_channels%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftechniques%2Fwebrtc_data_channels%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).

264
data/developer.mozilla.org/en-US/docs/Games/Tools-0.md Normal file
View File

@ -0,0 +1,264 @@
---
title: "Tools for game development - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tools"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:08.550320+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Tools#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Tools#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Tools for game development](https://developer.mozilla.org/en-US/docs/Games/Tools)
# Tools for game development
On this page, you can find links to our game development tools articles, which eventually aim to cover frameworks, compilers, and debugging tools.
[asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js)
asm.js is a very limited subset of the JavaScript language, which can be significantly optimized and run in an ahead-of-time (AOT) compiling engine for much faster performance than your typical JavaScript performance. This is, of course, great for games.
[Emscripten](https://github.com/emscripten-core/emscripten/wiki)
An LLVM to JavaScript compiler; with Emscripten, you can compile C++ and other languages that can compile to LLVM bytecode into high-performance JavaScript. This is an excellent tool for porting applications to the Web! There is a [useful Emscripten tutorial](https://github.com/emscripten-core/emscripten/wiki/Tutorial) available on the wiki.
[Firefox Profiler](https://profiler.firefox.com/docs/#/)
The Firefox Profiler lets you profile your code to help figure out where your performance issues are so that you can make your game run at top speed.
[Toolchain for developing and debugging games](https://developer.mozilla.org/en-US/docs/Games/Tools#toolchain_for_developing_and_debugging_games)
How does this differ from normal web app debugging? What specialist tools are available? A lot of this is going to be covered by Will in [tools](https://firefox-source-docs.mozilla.org/devtools-user/index.html), but here we should provide a kind of practical toolchain tutorial for debugging games, with links to Will's stuff:
* Basic tools overview
* [Shader editor](https://firefox-source-docs.mozilla.org/devtools-user/shader_editor/index.html)
* Performance tools (still in production, estimated early 2014)
## In this article
* [Web Technologies](https://developer.mozilla.org/en-US/docs/Games/Tools#web_technologies)
* [Port native games to the Web](https://developer.mozilla.org/en-US/docs/Games/Tools#port_native_games_to_the_web)
## [Web Technologies](https://developer.mozilla.org/en-US/docs/Games/Tools#web_technologies)
Web technologies in game development and their function
| **Function** | **Technology** |
| --- | --- |
| **Audio** | [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) |
| **Graphics** | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) ([OpenGL ES](https://www.khronos.org/opengles/) 2.0) |
| **Input** | [Touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events), [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), device sensors, [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API), [Full Screen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) |
| **Language** | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (or C/C++ using [Emscripten](https://github.com/emscripten-core/emscripten/wiki) to compile to JavaScript) |
| **Networking** | [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) and/or [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) |
| **Storage** | [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) or the "cloud" |
| **Web** | [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (and much more!) |
[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)
Full screen gameplay.
[Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
Use gamepads or other game controllers.
[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
Build, style, and lay out your game's user interface.
[HTML audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio)
Easily play simple sound effects and music.
[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
Store user data on their own computer or device.
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
Fast web programming language to write the code for your game. To easily port your existing games, use [Emscripten](https://github.com/emscripten-core/emscripten/wiki) or [Asm.js](http://asmjs.org/spec/latest/).
[Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
Lock the mouse or other pointing device within your game's interface.
[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (Scalable Vector Graphics)
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)
Access raw binary data from within JavaScript; manipulate GL textures, game data, or anything else.
[Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
Control the playback, synthesis, and manipulation of audio in real time.
[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
Create high-performance, hardware-accelerated 3D (and 2D) graphics. [OpenGL ES](https://www.khronos.org/opengles/) 2.0.
[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
Real-Time Communications to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users like chat.
[WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
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.

122
data/developer.mozilla.org/en-US/docs/Games/Tools-1.md Normal file
View File

@ -0,0 +1,122 @@
---
title: "Tools for game development - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tools"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:08.550320+00:00"
instance: "kb-cron"
---
[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
Spawn background threads running their own JavaScript code for multicore processors.
## [Port native games to the Web](https://developer.mozilla.org/en-US/docs/Games/Tools#port_native_games_to_the_web)
If you are a native developer (for example writing games in C++), and you are interested in how you can port your games over to the Web, you should learn more about our [Emscripten](https://emscripten.org/index.html) tool — this is an LLVM to JavaScript compiler, which takes LLVM bytecode (e.g., generated from C/C++ using Clang, or from another language) and compiles that into [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js), which can be run on the Web.
To get started, see:
* [About Emscripten](https://emscripten.org/docs/introducing_emscripten/about_emscripten.html) for an introduction including high-level details.
* [Download and Install](https://emscripten.org/docs/getting_started/downloads.html) for installing the toolchain.
* [Emscripten Tutorial](https://emscripten.org/docs/getting_started/Tutorial.html) for a tutorial to teach you how to get started.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Jan 25, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Tools/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/tools/index.md?plain=1 "Folder: en-us/games/tools \(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%2FTools&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%2Ftools%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTools%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftools%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F06e6e54baef7032c4e81ca93291fde0a0585de8b%0A*+Document+last+modified%3A+2026-01-25T19%3A35%3A57.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).

178
data/developer.mozilla.org/en-US/docs/Games/Tools/asm.js-0.md Normal file
View File

@ -0,0 +1,178 @@
---
title: "asm.js - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:10.992352+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Tools for game development](https://developer.mozilla.org/en-US/docs/Games/Tools)
3. [asm.js](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js)
# asm.js
**Warning:** The [asm.js](http://asmjs.org/) specification is considered **deprecated**. Developers may look to [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) as an alternative to asm.js for running high-performance code in the browser.
[Asm.js](http://asmjs.org/) is a specification defining a subset of JavaScript that is highly optimizable. This article looks at exactly what is permitted in the asm.js subset, what improvements it confers, where and how you can make use of it, and further resources and examples.
## In this article
* [What is asm.js, exactly?](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#what_is_asm.js_exactly)
* [asm.js language summary](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#asm.js_language_summary)

119
data/developer.mozilla.org/en-US/docs/Games/Tools/asm.js-1.md Normal file
View File

@ -0,0 +1,119 @@
---
title: "asm.js - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:10.992352+00:00"
instance: "kb-cron"
---
## [What is asm.js, exactly?](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#what_is_asm.js_exactly)
It is a very small, strict subset of JavaScript that only allows things like `while`, `if`, numbers, top-level named functions, and other simple constructs. It does not allow objects, strings, closures, and basically anything that requires heap allocation. Asm.js code resembles C in many ways, but it's still completely valid JavaScript that will run in all current engines. It pushes JS engines to optimize this kind of code, and gives compilers like [Emscripten](https://github.com/emscripten-core/emscripten) a clear definition of what kind of code to generate. We will show what asm.js code looks like and explain how it helps and how you can use it.
This subset of JavaScript is already highly optimized in many JavaScript engines using fancy Just-In-Time (JIT) compiling techniques. However, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much performance as we can out of it. With standard names and benchmarking, it enables collaborating across multiple JS engines. The idea is that this kind of code **should** run very fast in each engine, and if it doesn't, it's a bug and there's a clear spec that engines should optimize for.
It also reduces the complexity for people writing compilers that want to generate high-performant code on the web. They can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns. [Emscripten](https://github.com/emscripten-core/emscripten), a C/C++ to JavaScript compiler, emits asm.js code to make it run with near native performance on several browsers.
Additionally, if an engine chooses to specially recognize asm.js code, there even more optimizations that can be made. Firefox is the only browser to do this right now.
## [asm.js language summary](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js#asm.js_language_summary)
asm.js is an intermediate programming language. asm.js has a very predictable performance rate because it is limited to an extremely restricted subset of JavaScript that provides only strictly-typed integers, floats, arithmetic, function calls, and heap accesses. The performance characteristics are closer to native code than that of standard JavaScript. Using a subset of JavaScript asm.js is already supported by major web browsers. Since asm.js runs in a browser it depends heavily on the browser and the hardware.
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/tools/asm.js/index.md?plain=1 "Folder: en-us/games/tools/asm.js \(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%2FTools%2Fasm.js&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%2Ftools%2Fasm.js%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTools%2Fasm.js%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftools%2Fasm.js%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

332
data/developer.mozilla.org/en-US/docs/Games/Tutorials-0.md Normal file
View File

@ -0,0 +1,332 @@
---
title: "Tutorials - Game development | MDN"
chunk: 1/1
source: "https://developer.mozilla.org/en-US/docs/Games/Tutorials"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:13.333144+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Tutorials#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Tutorials#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
# Tutorials
This page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.
[2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)
In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
[2D breakout game using Phaser](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser)
In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using the [Phaser](https://phaser.io/) HTML game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
[2D maze game with device orientation](https://developer.mozilla.org/en-US/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation)
This tutorial shows how to create a 2D maze game using HTML, incorporating fundamentals such as collision detection and sprite placement on a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas). This is a mobile game that uses the [Device Orientation](https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events) and [Vibration](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) **APIs** to enhance the gameplay and is built using the [Phaser](https://phaser.io/) framework.
[2D platform game with Phaser](https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/)
This tutorial series shows how to create a simple platform game using [Phaser](https://phaser.io/), covering fundamentals such as sprites, collisions, physics, collectables, and more.
## 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/Tutorials/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/tutorials/index.md?plain=1 "Folder: en-us/games/tutorials \(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%2FTutorials&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%2Ftutorials%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTutorials%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftutorials%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).

202
data/developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript-0.md Normal file
View File

@ -0,0 +1,202 @@
---
title: "2D breakout game using pure JavaScript - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:15.428511+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
3. [2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)
# 2D breakout game using pure JavaScript
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)
In this step-by-step tutorial we create an **MDN Breakout** game written entirely in pure JavaScript and rendered on HTML [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas).
Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas) element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
To get the most out of this series of articles you should already have basic to intermediate [JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) knowledge. After working through this tutorial you should be able to build your own Web games.
![Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/mdn-breakout-gameplay.png)
## In this article
* [Lesson details](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#lesson_details)
* [Next steps](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#next_steps)
## [Lesson details](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#lesson_details)
All the lessons — and the different versions of the [MDN Breakout game](https://breakout.enclavegames.com/lesson10.html) we are building together — are [available on GitHub](https://github.com/end3r/Gamedev-Canvas-workshop):
1. [Create the Canvas and draw on it](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)
2. [Move the ball](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)
3. [Bounce off the walls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls)
4. [Paddle and keyboard controls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls)
5. [Game over](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over)
6. [Build the brick field](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field)
7. [Collision detection](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection)
8. [Track the score and win](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win)
9. [Mouse controls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls)
10. [Finishing up](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up)
Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.
**Note:** This series of articles can be used as material for hands-on game development workshops. You can also make use of the [Gamedev Canvas Content Kit](https://github.com/end3r/Gamedev-Canvas-Content-Kit) based on this tutorial if you want to give a talk about game development in general.
If you are interested in using a game library for learning about 2D web game development, see this series' counterpart, [2D breakout game using Phaser](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser).
## [Next steps](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript#next_steps)
Ok, let's get started! Head to the first chapter [Create the Canvas and draw on it](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it).
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)

112
data/developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript-1.md Normal file
View File

@ -0,0 +1,112 @@
---
title: "2D breakout game using pure JavaScript - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:15.428511+00:00"
instance: "kb-cron"
---
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Aug 2, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/index.md?plain=1 "Folder: en-us/games/tutorials/2d_breakout_game_pure_javascript \(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%2FTutorials%2F2D_Breakout_game_pure_JavaScript&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%2Ftutorials%2F2d_breakout_game_pure_javascript%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTutorials%2F2D_Breakout_game_pure_JavaScript%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftutorials%2F2d_breakout_game_pure_javascript%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F4483da6501d1c735a0e1ac1e95775e2fe1766dc3%0A*+Document+last+modified%3A+2025-08-02T17%3A42%3A05.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).

183
data/developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls-0.md Normal file
View File

@ -0,0 +1,183 @@
---
title: "Bounce off the walls - Game development | MDN"
chunk: 1/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:17.730452+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#search)
[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML)
HTML reference
* [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
* [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")
HTML guides
* [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
* [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
* [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")
Markup languages
* [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
* [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
* [XML](https://developer.mozilla.org/en-US/docs/Web/XML)
CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS)
CSS reference
* [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
* [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
* [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
* [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")
CSS guides
* [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
* [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
* [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")
Layout cookbook
* [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
* [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
* [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)
JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
JS reference
* [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
* [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
* [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")
JS guides
* [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
* [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
* [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
* [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")
Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API)
Web API reference
* [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
* [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
* [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
* [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
* [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
* [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")
Web API guides
* [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
* [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
* [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
* [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
* [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
All
[All web technology](https://developer.mozilla.org/en-US/docs/Web)
Technologies
* [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
* [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
* [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
* [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
* [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
* [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
* [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")
Topics
* [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
* [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
* [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
* [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
* [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development)
Frontend developer course
* [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
* [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
* [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
* [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)
Learn HTML
* [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)
Learn CSS
* [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
* [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)
Learn JavaScript
* [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)
Tools
Discover our tools
* [Playground](https://developer.mozilla.org/en-US/play)
* [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)
* [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
* [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
* [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
* [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
* [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
* [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)
About
Get to know MDN better
* [About MDN](https://developer.mozilla.org/en-US/about)
* [Advertise with us](https://developer.mozilla.org/en-US/advertising)
* [Community](https://developer.mozilla.org/en-US/community)
* [MDN on GitHub](https://github.com/mdn)
[Blog](https://developer.mozilla.org/en-US/blog/)
1. [Game development](https://developer.mozilla.org/en-US/docs/Games)
2. [Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
3. [2D breakout game using pure JavaScript](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript)
4. [Bounce off the walls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls)
# Bounce off the walls
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls)
This is the **3rd step** out of 10 of the [Gamedev Canvas tutorial](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript). You can find the source code as it should look after completing this lesson at [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html).
It is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun we can have with it! To overcome that we will implement some collision detection (which will be explained [later](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection) in more detail) to make the ball bounce off the four edges of the Canvas.
## In this article
* [Simple collision detection](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#simple_collision_detection)
* [Compare your code](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#compare_your_code)
* [Next steps](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#next_steps)

139
data/developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls-1.md Normal file
View File

@ -0,0 +1,139 @@
---
title: "Bounce off the walls - Game development | MDN"
chunk: 2/2
source: "https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:22:17.730452+00:00"
instance: "kb-cron"
---
## [Simple collision detection](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#simple_collision_detection)
To detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly.
To enable the calculations, let's define a variable called `ballRadius` that will hold the radius of the drawn circle and be used for calculations. Add this to your code, somewhere below the existing variable declarations:
Now update the line that draws the ball inside the `drawBall()` function to this:
### [Bouncing off the top and bottom](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#bouncing_off_the_top_and_bottom)
There are four walls to bounce the ball off — let's focus on the top one first. We need to check, on every frame, whether the ball is touching the top edge of the Canvas — if yes, we'll reverse the ball movement so it will start to move in the opposite direction and stay within the visible boundaries. Remembering that the coordinate system starts from the top left, we can come up with something like this:
If the `y` value of the ball position is lower than zero, change the direction of the movement on the `y` axis by setting it equal to itself, reversed. If the ball was moving upwards with a speed of 2 pixels per frame, now it will be moving "up" with a speed of -2 pixels, which actually equals to moving down at a speed of 2 pixels per frame.
The code above would deal with the ball bouncing off the top edge, so now let's think about the bottom edge:
If the ball's `y` position is greater than the height of the Canvas (remember that we count the `y` values from the top left, so the top edge starts at 0 and the bottom edge is at 320 pixels, the Canvas' height), then bounce it off the bottom edge by reversing the `y` axis movement as before.
We could merge those two statements into one to save on code verbosity:
If either of the two statements is `true`, reverse the movement of the ball.
### [Bouncing off the left and right](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#bouncing_off_the_left_and_right)
We have the top and bottom edge covered, so let's think about the left and right ones. It is very similar actually, all you have to do is to repeat the statements for `x` instead of `y`:
At this point you should insert the above code block into the draw() function, just before the closing curly brace.
### [The ball keeps disappearing into the wall!](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#the_ball_keeps_disappearing_into_the_wall!)
Test your code at this point, and you will be impressed — now we have a ball that bounced off all four edges of the canvas! We have another problem however — when the ball hits each wall it sinks into it slightly before changing direction:
![skyblue ball disappearing into the top of the white wall.](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls/ball-in-wall.png)
This is because we're calculating the collision point of the wall and the center of the ball, while we should be doing it for its circumference. The ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. Update the last code you added to this:
When the distance between the center of the ball and the edge of the wall is exactly the same as the radius of the ball, it will change the movement direction. Subtracting the radius from one edge's width and adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do.
## [Compare your code](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#compare_your_code)
Let's again check the finished code for this part against what you've got, and have a play:
**Note:** Try changing the color of the ball to a random color every time it hits the wall.
## [Next steps](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls#next_steps)
We've now got to the stage where our ball is both moving and staying on the game board. In the fourth chapter we'll look at implementing a controllable paddle — see [Paddle and keyboard controls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls).
* [ Previous ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball)
* [ Next ](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls)
## Help improve MDN
[Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started)
This page was last modified on Dec 9, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls/contributors.txt).
[View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md?plain=1 "Folder: en-us/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls \(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%2FTutorials%2F2D_Breakout_game_pure_JavaScript%2FBounce_off_the_walls&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%2Ftutorials%2F2d_breakout_game_pure_javascript%2Fbounce_off_the_walls%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FGames%2FTutorials%2F2D_Breakout_game_pure_JavaScript%2FBounce_off_the_walls%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fgames%2Ftutorials%2F2d_breakout_game_pure_javascript%2Fbounce_off_the_walls%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F1a0be468b9e7c88a09ea3438a81341c4f6a619a6%0A*+Document+last+modified%3A+2025-12-09T15%3A43%3A42.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).

Some files were not shown because too many files have changed in this diff Show More