What the structure of a html file of a game?

[bbs]

Hi!

A game has a game loop, levels, game states. I read several tutors about phaser, and each author wrote a different code in html. What should I write in html and what in js-files? What a structure is right?

[mattstyles]

There isnt any specific right or wrong way, so long as it works and it makes sense for you then thats all cool.

However, Phaser is a JS framework for writing canvas-based web games, as such, it is almost entirely JS. The html could contain only a script tag (most of mine do) and nothing much else, although it might make sense for you to add the canvas element in the html, or maybe css link/s, or maybe multiple script tags, or other parts of your app, i.e. most of your rendering could be canvas but maybe your UI could be in DOM and controlled by JS. Really its up to you and your requirements.

[saricden]

The only thing I'd add is it's usually a good design choice to keep your files modular. Phaser is really good for this if you want to separate different game states into different JS files. Here's a great tutorial that illustrates how useful this can be: http://www.emanueleferonato.com/2014/08/28/phaser-tutorial-understanding-phaser-states/

One big advantage is that if you make some big huge game with a bunch of different areas or whatever, you don't need to dig through one massive JS file to find stuff when it comes time to make a change. You're looking for stuff that's for level 43? Awesome, you know to look in level43.js (or whatever in your own project, this is just an example).

[saricden]

Also if you're working in a team and using a source control tool like Git, you'd be less likely to run into a boatload of merge conflicts and stuff when working in separate files. Which ultimately just makes your life easier.

In terms of a web context though, one thing that might be worth noting though is separating stuff into lots of files can slow down initial page load while the browser is busy waiting on a bunch of HTTP requests for the files.

[lukaMis]

On 2/13/2016 at 3:36 AM, saricden said:

In terms of a web context though, one thing that might be worth noting though is separating stuff into lots of files can slow down initial page load while the browser is busy waiting on a bunch of HTTP requests for the files.

Js needs to be in multiple files only for development. For production it should be in single file and minified. There are multiple options for that. 
By hand (not recommended)
Prepros
Grunt
Gulp
.
.
.
 

[saricden]

22 hours ago, lukaMis said:

Js needs to be in multiple files only for development. For production it should be in single file and minified. There are multiple options for that. 
By hand (not recommended)
Prepros
Grunt
Gulp
.
.
.
 

Word.