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