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