butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1268fc1570
kb/data/developer.mozilla.org/en-US/docs/Games/Tutorials-0.md

20 KiB
Raw Blame History

title chunk source category tags date_saved instance
Tutorials - Game development | MDN 1/1 https://developer.mozilla.org/en-US/docs/Games/Tutorials reference web, html, css, javascript, documentation 2026-05-05T05:22:13.333144+00:00 kb-cron

MDN HTML HTML: Markup language

HTML reference

HTML guides

Markup languages

CSS CSS: Styling language

CSS reference

CSS guides

Layout cookbook

JavaScriptJS JavaScript: Scripting language

JS reference

JS guides

Web APIs Web APIs: Programming interfaces

Web API reference

Web API guides

All All web technology

Technologies

Topics

Learn Learn web development

Frontend developer course

Learn HTML

Learn CSS

Learn JavaScript

Tools Discover our tools

About Get to know MDN better

Blog

  1. Game development
  2. 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

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

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

This tutorial shows how to create a 2D maze game using HTML, incorporating fundamentals such as collision detection and sprite placement on a <canvas>. This is a mobile game that uses the Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.

2D platform game with Phaser

This tutorial series shows how to create a simple platform game using Phaser, covering fundamentals such as sprites, collisions, physics, collectables, and more.

Help improve MDN

Learn how to contribute This page was last modified on Jul 11, 2025 by MDN contributors. View this page on GitHub • Report a problem with this content

  1. Games
  2. Introduction 1. Introduction 2. Anatomy
  3. APIs for game development 1. asm.js 2. Canvas 3. CSS 4. Full screen 5. Gamepad 6. IndexedDB 7. JavaScript 8. Pointer Lock 9. SVG 10. Typed Arrays 11. Web Audio 12. WebGL 13. WebRTC 14. WebSockets 15. WebVR 16. Web Workers 17. XMLHttpRequest
  4. Techniques 1. Using async scripts for asm.js 2. Optimizing startup performance 3. Using WebRTC peer-to-peer data channels 4. Audio for Web Games 5. 2D collision detection 6. Tiles and tilemaps overview 7. Using the Gamepad API 8. Image rendering for pixel art
  5. 3D games on the Web 1. Explaining basic 3D theory 2. Building up a basic demo with A-Frame 3. Building up a basic demo with Babylon.js 4. Building up a basic demo with PlayCanvas 5. Building up a basic demo with Three.js 6. GLSL shaders 7. WebXR 8. 3D collision detection 9. Bounding volume collision detection with THREE.js
  6. Implementing game control mechanisms 1. Mobile touch 2. Desktop with mouse and keyboard 3. Desktop with gamepad 4. Other
  7. Tutorials 1. 2D breakout game using pure JavaScript 2. 2D breakout game using Phaser 3. 2D maze_game with device orientation 4. 2D platform game using Phaser
  8. Publishing games 1. Game distribution 2. Game promotion 3. Game monetization

MDN Your blueprint for a better internet.

MDN

Contribute

Developers

Mozilla

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.