why errors?

blooper300 · November 26, 2016

Hy everyone, I am very happy to begin developing games with HTML 5 and Phaser. I am having difficulty though with running code sample.

<html>

    <head>
    
    <title>Game</title>
    <script type = "text/javascript" src = "phasor.min.js"></script>
        <script type = "text/javascript" src = "main.js"></script>
    </head>

<body>
    
    </body>

</html>

and now for the main.js...


var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

function create() {

    var text = "- phaser -\n with a sprinkle of \n pixi dust.";
    var style = { font: "Arial", fill: "#ff0044", align: "center" };

    var t = game.add.text(game.world.centerX-300, 0, text, style);

}

I am using the mongoose free version to run the program, but something tells me I am doing something really wrong hear. I'm actually used to developing .exe games, not web. It would really help if someone could guide me through making this simple code work.

end3r · November 26, 2016

First, I'd check the typo you have here:

<script type = "text/javascript" src = "phasor.min.js"></script>

Fix it to "phaser.min.js" and see if it helps.

blooper300 · November 26, 2016

Hy I did that and it is still giving me 7 errors. The index.html file is fine but the main.js is giving me these errors...

1 'Phaser' was used before it was defined. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

1 'create' was used before it was defined. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

5 Missing 'use strict' statement. var text = "- phaser -\n with a sprinkle of \n pixi dust.";

6 Combine this with the previous 'var' statement. var style = { font: "arial", fill: "#ff0044", align: "center" };

8 Combine this with the previous 'var' statement. var t = game.add.text(game.world.centerX-300, 0, text, style);

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

function create() {

    var text = "- phaser -\n with a sprinkle of \n pixi dust.";
    var style = { font: "arial", fill: "#ff0044", align: "center" };

    var t = game.add.text(game.world.centerX - 300, 0, text, style);

}

And the index.html

<html>

    <head>
    
    <title>Game</title>
    <script type = "text/javascript" src = "phaser.min.js"></script>
        <script type = "text/javascript" src = "main.js"></script>
    </head>

<body>
    
    </body>

</html>

Apologies if I'm really screwing up on something and thanks for the replies.

venomdev · November 26, 2016

I just ran your code in Chrome straight from the directory without using lamp/wamp etc and the code works. I had a black screen show the text message.

Maybe the error is a permissions thing on your phaser.min.js file?

blooper300 · November 26, 2016

Hy venomdev. I tried re-doing my project and then run the phaser game example which is on there website. I even tried opening the .html file with fire fox! Also for some strange reason on my ide which is brackets the phaser.min.js file has 33+ errors! I'm so used to just executing my programs directly on an .exe file. I wanted to get into HTML5 game dev because I really wanted to create web games. What should I do to solve this issue?

index.html

venomdev · November 26, 2016

Hi blooper300, this new version wont work without a proper HTTP server because you're now loading resources.

I've never used mongoose but I have had luck with both wamp and xampp on windows. I would start with some test to see if your setup is working like it should. First test these 2 links http://127.0.0.1:8080/js/phaser.min.js and http://127.0.0.1:8080/dude.png (Change the IP and port if these are different). Then check that the JavaScript requests are working properly, things like a using a plain XMLHttpRequest() or jQuery.get(). This should let you know if the install is working like you expect.

The errors in phaser.min.js are probably alright, just styling/lint errors that shouldn't break the code.

I started coding with C/C++ and when I switched to JavaScript for coding games I had much more fun. Much quicker to code, test and rework.

blooper300 · November 27, 2016

venomdev I forgot to mention that the index.html does open but it does not show anything, just a blank whit web page. I also type in one of your links (the dude.png one) and yes with my ip and port address and I simply got the message that "this site cannot be reached". Also may you please explain more in detail about checking that the JavaScript requests are working properly? I looked up XMLHttpRequest() and jQuery.get( ) on w3schools.com and I don't understand what to exactly do with the commands. should I create a new xml document and type in the request?

Is there any books that you can reccomend that would help me more with the installation of phaser. The videos that i watched on youtube so far don't go in a lot of detail. Again Thanks

EDIT: On your first post on this topic you said something about a permissions thing on the phaser.min.js file, please do explain more about that.

venomdev · November 28, 2016

Hi ya, so if you can't see the dude.png file then the address isn't correct or the server isn't handling the browser request properly. What is the full address you are using to load the index.html file? If this is in a subdirectory you'll need to add this part too, eg: http://127.0.0.1/mygame/dude.png. Being on windows the permissions are probably alright, it's usually only a problem on unix/linux. Mongoose might have a log saved somewhere too, this should give you some error messages about why you can't see dude.png.

I would probably install wamp to see if it is mongoose giving you the trouble. I use wamp on windows 10 without any problems. Use the normal install instructions but with the wamp option. There's a few pages and videos that can help you with wamp configuration and test the same links for http://127.0.0.1/dude.png and http://127.0.0.1/js/phaser.min.js. If these don't work then the problem isn't phaser.

The test for using jQuery.get would be to create a real simple html file that requests the dude.png file. You don't need to do anything with the data just check whether the request worked or not. Here's a test based on an example taken from the jQuery site:

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
</head>
<body>
<script>
var jqxhr = $.get( "dude.png", function() {
  alert( "success" );
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });
</script>
</body>
</html>

put this code in an index.html file and load it through the web server.

blooper300 · November 29, 2016

YA-HOO! it works now! All I did was tested the code you gave me in a html.index file and there was an error. I then turned on XAMPP and ran my index.html. And bam! problem solved. I honestly did not have a great couple of days, and I just lacked the capability to think properly at the time. The reason why the code was not working the whole time was because if I remember correctly I thought I had to run the .js file instead of the .HTML. Well although the issue is solved, apologies for my lack of common sense at the time and if there is any more I can contribute to this topic I will be back. Otherwise happy web developing I suppose!

Sign In

why errors?

Recommended Posts

blooper300

Link to comment

Share on other sites

end3r

Link to comment

Share on other sites

blooper300

Link to comment

Share on other sites

venomdev

Link to comment

Share on other sites

blooper300

Link to comment

Share on other sites

venomdev

Link to comment

Share on other sites

blooper300

Link to comment

Share on other sites

venomdev

Link to comment

Share on other sites

blooper300

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity