Revision 1104121 of Implementing game control mechanisms

<p class="summary">Making games is fun, and the important advantage of HTML5 is the ability to run on various platforms and devices. It also means challenges - you have to provide good, intuitive controls adjusted to the situation. In this series of articles we will show you how you can approach building a game that can be coded once and played on smartphones and tablets, computers and laptops, but also TVs and fridges as long as they have a decent browser.</p>

<h2 id="Case_study">Case study</h2>

<p>We'll be using <a href="https://rogers2.enclavegames.com/demo/">Captain Rogers: Battle at Andromeda demo</a> as an example. The game implements various approaches to controlling the gameplay, so it should make a good case study.</p>

<p>---IMG_CAPTAIN_ROGERS---</p>

<p>Captain Rogers was created using the <a href="https://phaser.io/">Phaser</a> framework, the most popular tool for simple 2D game development in JavaScript right now, but the following articles are focusing on high level overview of controlling the game, so it should be fairly easy to reuse the knowledge when building games in pure JavaScript or any other framework. If you're looking for a good introduction to Phaser, then check the <a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> tutorial.</p>

<p>In the following articles we will be implementing various controls on different platforms - from touch on mobile, through keyboard and mouse, and Gamepad API on desktop, to more unconventional ones like TV remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.</p>

<h2 id="Setting_up_the_environment">Setting up the environment</h2>

<p>Let's start from the beginning - quick overview of the folder structure, JavaScript files and in-game states, so we know what's happening where. The game's folders look like this:</p>

<p>---IMG_FOLDER_STRUCTURE---</p>

<p>As you can see there are folders for images, JavaScript files, fonts and sound effects. The <code>src</code> folder contains the JavaScript files split as a separate states - <code>Boot.js</code>, <code>Preloader.js</code>, <code>MainMenu.js</code> and <code>Game.js</code>. The first one initializes Phaser, the second preloads all the assets, the third one is the main menu welcoming the player, and the fourh is the actual gameplay.</p>

<p>Every state have it's own default methods: <code>preload</code>, <code>create</code> and <code>update</code>. The first one is needed for actually preloading the assets, <code>create</code> is executed once the state had started, and <code>update</code> is executed on every frame.</p>

<p>That should give you some understanding of the project structure. We'll be playing mostly with the <code>MainMenu.js</code> and <code>Game.js</code> files, and explaining the code inside <code>create</code> and <code>update</code> methods.</p>

<h2 id="The_articles">The articles</h2>

<p>As for actually controlling the game - we'll start with touch as the mobile first approach is very popular. JavaScript is the perfect choice for mobile gaming because of HTML5 being truly multiplatform. Then we'll move to desktop controls including keyboard and mouse, so you can play the game on any decent computer. There's also a little extra: adding gamepad support to have the feel of console gaming in your living room. Last but not least is some crazy experiments and other unconventional approaches you wouldn't believe could be used to play the game.</p>

<ol>
 <li><a href="/en-US/docs/Games/Techniques/Input_controls/Mobile_touch">Mobile (touch)</a></li>
 <li><a href="/en-US/docs/Games/Techniques/Input_controls/Desktop_with_mouse_and_keyboard">Desktop (keyboard and mouse)</a></li>
 <li><a href="/en-US/docs/Games/Techniques/Input_controls/Desktop_with_gamepad">Gamepad</a></li>
 <li><a href="/en-US/docs/Games/Techniques/Input_controls/Other">Other</a></li>
</ol>

<p>Feel free to start reading the next article about mobile controls, or jump straight to any of the others you might be interested in.</p>