Phaser games are JavaScript-powered web apps that run in a browser.
Your Phaser game will consist of an HTML file, a CSS file, and a JS file. The JavaScript file will contain your game code. You'll also have a folder containing the asset files (images, animated sprites, sound effects, etc.) for your game.
Your game will also need to load the Phaser CE game framework, which is a JavaScript file named phaser.min.js that defines classes for JS objects you'll use in your game code. You can either load this Phaser CE file from a local copy (placed in the same location as your HTML, CSS, and JS files) or by linking to a URL from a CDN (Content Delivery Network).
Using a code editor (such as repl.it), create a new project (or folder) named hello-phaser containing three new files:
HTML file namedindex.html
CSS file named style.css
JS file named script.js
Depending on the code editor you're using, these new files might be completely blank — or they might have starter code that was automatically inserted by the code editor. Either way is fine. In the next few steps of this tutorial, you'll add new code to each of these files.
JS FILENAME: This code guidebook will refer to script.js as the name of the JS file containing your Phaser game code. However, you can choose a different name for this file (such as code.js or game.js). You'll just need to be sure the <script> tag in your HTML lists the correct filename for your JS game code.
In your code editor, create a new folder named assets in the same location as your HTML, CSS, and JS files. This folder will contain asset files used in your game, such as images, animated sprites, sound effects, etc.
Right now, this folder is empty, but in a later step, you'll upload an image file to this folder, so the image can be used in your Hello Phaser game.