cydo Posted January 28, 2017 Share 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? Link to comment Share on other sites More sharing options...
tips4design Posted January 28, 2017 Share Posted January 28, 2017 Are you sure you included main.js after phaser.js in the case when you included both in the body? Link to comment Share on other sites More sharing options...
cydo Posted January 28, 2017 Author Share 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? Link to comment Share on other sites More sharing options...
anthkris Posted January 29, 2017 Share 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. Link to comment Share on other sites More sharing options...
Fricken Hamster Posted January 29, 2017 Share 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); }; Link to comment Share on other sites More sharing options...
mattstyles Posted January 29, 2017 Share 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. drhayes 1 Link to comment Share on other sites More sharing options...
Recommended Posts