We'll be using the Captain Rogers: Battle at Andromeda demo as an example.

We'll be using the Captain Rogers: Battle at Andromeda and cookie clicker demo as an example.

Captain Rogers was created using the Phaser 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 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.

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:

create: function() {
// ...
var buttonEnclave = this.add.button(10, 10, 'logo-enclave', this.clickEnclave, this);
// ...
}
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:

update: function() {
// ...
if(this.game.input.mousePointer.isDown) {
// do something
}
// ...
}
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.