Jump to content

Head or Body and why


cydo
 Share

Recommended Posts

Ok this is probably a dumb question but I have been trying to make my own brick breaker style game and it took me forever to figure out why I couldn't even get the canvas to show and after some googling I got the Phaser canvas showing but I am confused on why it exactly didn't work in the first place. So here is my original code.
 

The error I kept getting was main.js:1 Uncaught ReferenceError: Phaser is not defined

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Phaser Breakout!</title>
    
    <link rel="stylesheet" type="text/css" ref="stlyes.css"
</head>
<body>

<script src="js/phaser.js"></script>
<script src="js/main.js"></script>
</body>
</html>
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

function preload() {
    
}

function create() {
    
}

function update() {
    
}

Now to fix this problem I simply moved the 

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

into the head instead of the body like so.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Phaser Breakout!</title>
    <script src="js/phaser.js"></script>
    <link rel="stylesheet" type="text/css" ref="stlyes.css"
</head>
<body>


<script src="js/main.js"></script>
</body>
</html>

So why does this work? Does Phaser.js need to load before everything else so then the main.js file can pull information from it? 

Link to comment
Share on other sites

3 hours ago, Fricken Hamster said:

It seems like you are running the JS to create the phaser game directly on the window.

Generally you want run the JS you write on a onload function. Something like this


window.onload = function () {
   game = new Phaser.Game(1000, 800, Phaser.AUTO, 'gameContainer', null, false, true, null);
};

This is generally only necessary when including stuff in the head, as it'll parse and potentially execute before the rest of the page is created.

When HTML hits the browser it largely gets read from head to toe (html isn't generally large enough to be streamed in more than one chunk, but could be) and there is some stuff (like JS) that will block the rest of the page from loading. Generally speaking if you place your code at the bottom of the page any stuff in the page that you might rely on (like a canvas element, for example) will already be there so waiting for an onload is redundant. 

Keep in mind that including lots of stuff in the head is generally blocking, so will restrict your load times, but, browsers get smarter all the time but JS execution is synchronous as the page loads so the browser can only be so smart, well, until modules hit more than just Safari. I think including Phaser in the head to ensure this global library is loaded isn't too much of a concern though (still should be unnecessary), particularly if its served from a speedy high-availability CDN and uses the prod build.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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