Recommended Posts

Hello,

I would like to use game states in my project. I followed this tutorial http://perplexingtech.weebly.com/game-dev-blog/using-states-in-phaserjs-javascript-game-developement

In my project I get the error "Reference error: menuState is not defined".

You can download my code in the attachment.

Can anybody help me with my problem? I am a beginner, so can you please tell me a solution in an easy way? Thanks!

Week 6 - Menu game.zip

Share this post


Link to post
Share on other sites

I think you might get more help if you put the code somewhere that doesn't need a zip file.  People are, quite rightly, concerned about the possible contents of a zip.

Either post the relevant code here or use jsfiddle.net to show the full thing.  

As a possible suggestion, are you using scope correctly? When you use states you need to use 'this' to refer to the current state. Eg this.add.group()

This can mean that some examples, including Phaser's own, need adapting to be used in states.

Share this post


Link to post
Share on other sites
24 minutes ago, spencerTL said:

I think you might get more help if you put the code somewhere that doesn't need a zip file.  People are, quite rightly, concerned about the possible contents of a zip.

Either post the relevant code here or use jsfiddle.net to show the full thing.  

As a possible suggestion, are you using scope correctly? When you use states you need to use 'this' to refer to the current state. Eg this.add.group()

This can mean that some examples, including Phaser's own, need adapting to be used in states.

I have four files, one main file (which name is game.js) and a menu, play and a win. The error comes from the game.js file, which says that Menu is not defined. 

Game.js:

var game;
game = new Phaser.Game(800,400,Phaser.AUTO,'gameDiv');

game.state.add('Menu', Menu);
game.state.add('Play', Play);
game.state.add('Win', Win);

game.state.start('Menu');

 

Menu.js:

var Menu = {

    preload:function(){
        game.load.image('player','assets/player.png');
        game.load.image('win','assets/win.png');
        
    },

    create : function(){
        game.physics.startSystem(Phaser.Physics.ARCADE);

        var nameLabel = game.add.text(80,80,'My First Game',{font: '50px Arial', fill:'#FFFFFF'});
        var startLabel = game.add.text(80,game.world.height-80,'Press the "W" key to start', {font: '25px Arial', fill:'#FFFFFF'});

        var wkey = game.input.keyboard.addKey(Phaser.Keyboard.W);

        wkey.onDown.addOnce(this.play,this);

    },

    play : function(){
        game.state.start('Play');
    }
};

 

Play.js:

var Play = {

    create:function(){
        var keyboard = game.input.keyboard;
        var player = game.add.sprite(16,16,'player');
        game.physics.enable(this.player,phaser.physics.ARCADE);

        var win = game.add.sprite(256,256,'win');
        game.physics.enable(this.win,phaser.physics.ARCADE);


    },

    update:function(){
        game.physics.arcade.overlap(player,win,this.Win,null,this);

        if(keyboard.isDown(Phaser.Keyboard.A)){
            player.body.velocity.x = -150;
        } else if (keyboard.isDown(Phaser.Keyboard.D)){
            player.body.velocity.x = -150;
        } else {
            player.body.velocity.x = 0;
        }

        if(keyboard.isDown(Phaser.Keyboard.W)){
            player.body.velocity.y = 150;
        } else if (keyboard.isDown(Phaser.Keyboard.X)){
            player.body.velocity.y = -150;
        } else {
            player.body.velocity.y = 0;
        }


    },

    win : function(){
        game.state.start('Win');
    }


};

 

Win.js:

var Win = {

    create : function(){
        var winLabel = game.add.text(80,80,'YOU WON!',{font:'50px Arial', fill:'#FFF'});
        var startLabel = game.add.text(80,game.world.height-80,'Press "w" to restart the game', {font:'25px Arial', fill:'#FFF'});

        var wkey = game.input.keyboard.addKey(Phaser.Keyboard.W);
        wkey.onDown.addOnce(this.restart,this);

    },

    restart : function(){
        game.state.start('Menu');

    }


};

Index.html:

<!DOCTYPE html>  
<html>
    <head>  
        <meta charset="utf-8" />
        
        <title> Menu game</title>
        
        <script type="text/javascript" src="phaser.js"></script>
        <script type="text/javascript" src="phaser.min.js"></script>

        <script type="text/javascript" src="js/game.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
        <script type="text/javascript" src="js/play.js"></script>
        <script type="text/javascript" src="js/win.js"></script>
    </head>

    <body>
        <div id='GameDiv'></div>

    </body>  
</html>  

These are my codes. Each code has a different color, because of the fact that these files are separated.

 

Share this post


Link to post
Share on other sites

Thank you very much for your response. 

It looks like it won't go further when I press the "W" button. It is a very simplistic example of how to add states to your phaser game. In this tutorial you have to press the "W" button to play te game. Actually when two blocks hit each other, it will say "You Won!" 
http://phaser.io/news/2015/06/using-states-tutorial

Which commas did you suppressed? What did you change in the code?

Share this post


Link to post
Share on other sites

your welcome it's fine to discuss code

i have spureesed ever , befor a } and every ; after } at the end of every .js file state

but i have just seen that the menuGame is still getting an error when i tape F12

so i have forked the project http://asciimulation.link/html5gamedevs/KnTproject/Week 7 - Menu game/

and now it's when you tape w that it does an eror but on playState

i have added the files into a zip

 

 

Week 7 - Menu game.zip

Share this post


Link to post
Share on other sites

Hi!

At first: thank you very much for your help! I added a few things to our 'new' code and now it works! I changed the 'play' in game.state.play in 'start' and I added these lines of code to the function. 

game.physics.arcade.enable(this.player);
this.win.body.immovable = true;
game.physics.arcade.collide(this.player,this.win,this.Finish,null,this);

I saw that you added this:  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script> and the var game = new phaser game (); to the index.html file. Why is that? And I am curious about which changes you made with commas and write mistakes. 

 

 

 

Week 7 - Menu game.zip

Share this post


Link to post
Share on other sites

 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script> 

is the last version of phaser (2.6) the buil was made last month ans it's available at the adress you see

it can be also obtained via

https://rawgit.com/photonstorm/phaser/master/build/phaser.min.js

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.