cydo 3 Report post Posted January 28, 2017 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? Share this post Link to post Share on other sites
tips4design 103 Report post Posted January 28, 2017 Are you sure you included main.js after phaser.js in the case when you included both in the body? Share this post Link to post Share on other sites
cydo 3 Report post Posted January 28, 2017 I'm almost positive I did, I copy and pasted right from my text editor nothing changed. Is that why it was giving me the error? Phaser.js needs to be before everything else? Share this post Link to post Share on other sites
anthkris 7 Report post Posted January 29, 2017 You can definitely put all of the script tags in the body (which is what I always do), but yes Phaser JS does need to be the first one. Share this post Link to post Share on other sites
Fricken Hamster 5 Report post Posted January 29, 2017 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); }; Share this post Link to post Share on other sites
mattstyles 641 Report post Posted January 29, 2017 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. 1 drhayes reacted to this Share this post Link to post Share on other sites
