How to set up and run the Phaser 3 framework

Hi guys,
I am new to Phaser 3 and fairly new to JavaScript. I have looked on the Phaser official website as well as many YouTube videos to set up Phaser 3 with my IDE (Visual Studio Code or Brackets) but I am still confused. I download the js framework, but I don’t know where to put it in my code, and when I open it, it is a really big block of code. If anyone could help, that would be great. Thank you!

Hi @23Aferg8,
You generally won’t need to open the Phaser file. One simple way to use Phaser is using the script tag in your html:


<!-- div to add phaser canvas-->
<div id="phaser"></div>

<!-- phaser script must be in first place -->
<script src="pathToPhaserFile/phaser.js"></script>
<script src="pathToYourFile/game.js"></script>

You don’t even need to download phaser, you can import it from its cdn:

<script src=""></script>


Hi @jjcapellan,
Thanks so much for you help! I really appreciate it! One question though, what is the Phaser canvas?

Hi guys,
I tried the method by @jjcapellan, and my html looks like this:

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src=""></script>

<script src="game.js"></script>

And my game.js file is this:
var game = new Phaser.Game(640, 360, Phaser.AUTO);

var GameState = {
preload: function() {
this.load.image(‘sky’, ‘assets/sky.png’);
create: function() {
this.background =, 0, ‘sky’);
update: function() {



game.state.add(‘GameState’, GameState);

But when I open this with Live Server on VS Code, I just see a black square and not my background image.

Do you have something like:

    <div id="phaser-game"></div>

in your HTML file?

No, What does that do?

Look in the browser’s console for errors.

This is Phaser 2 code so it will definitely give an error.

Try the First Phaser 3 Game tutorial instead.

Is a type of HTML element Phaser creates in which draws the game.

Thank you all so much for your help! It worked, and I can get started making my game now!