---
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.