Jump to content

[Problem] Coded in single html file


Recommended Posts



First off I would recommend using States, check out this link for a tutorial http://perplexingtech.weebly.com/game-dev-blog/using-states-in-phaserjs-javascript-game-developement.


Second off I would also say you should look into writing your code in ES6 then compiling down to ES5, this way you can write your code in a more Object Orientated way. Here is also a good tutorial http://www.joshmorony.com/level-up-your-phaser-games-with-es6/.


If you want an example of a game written in ES6 take a look at a simple Brick Breaker Clone I did in ES6 with Phaser https://github.com/KodyBentley/BrickBreaker-ES6.


Hope this helps! 

Link to comment
Share on other sites

Nope, not really. :)

Under the hood, all of the ES2015 "class" and "extends" stuff is syntactic sugar for JS's existing prototypal inheritance vs. C++ classical inheritance. If you don't do a lot of complicated inheritance stuff or use any decorators you can probably ignore the ramifications of that, though.

Link to comment
Share on other sites

The basic idea of what you need to do is remove all your code from the script tags in your HTML and move it into a .JS file that you will call the same way you called Phaser at the top of your page.

You need to call phaser.js before you call your game script. The browser executes each line as it comes to it so if you load your game first it will start asking for things phaser provides which your browser hasn't loaded yet. I tend to load phaser.js in the Head element of my HTML page and the first state of my game as the last thing before I close the body tag.

The below code assumes you have one state called game.js and that phaser and your game are both in a folder js , game.js is just your code copied and pasted from your current html page.

Once you understand how to move your game logic into separate javascript files you'll find the concept of game states much easier.

<!DOCTYPE html>

	<meta charset="utf-8" />
	<title>Your Game Title</title>
	<script src="js/phaser.js"></script>

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

On 12/11/2016 at 8:35 PM, menthos984 said:

I am still a beginner in developing my game in html5 using phaser's framework. The problem is that I have written my codes in a single html file just like how the basic examples in phaser.io are shown. Now I am having a hard time separating them into js files. Can anyone help me please? 

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...