Game states

KnTproject · October 9, 2016

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

spencerTL · October 9, 2016

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.

KnTproject · October 9, 2016

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>

</body>
</html>

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

nazimboudeffa · October 9, 2016

thx for the code i'll take a look

i have just supressed commas and it looks like it works fine

http://asciimulation.link/html5gamedevs/KnTproject/Week 6 - Menu game/

so what can be the continuation ?

KnTproject · October 9, 2016

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?

nazimboudeffa · October 9, 2016

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

KnTproject · October 9, 2016

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

douglas · October 9, 2016

<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

nazimboudeffa · October 9, 2016

you're welcome i like discussing code :rolleyes: but about commas

fun fun function will better speak about it then me

KnTproject · October 9, 2016

@douglas and @thefailtheory to both of you: thank you very much for your reply.

I understand it a little bit more, but I have a little question. What was the big mistake in my own code, which occurred in an error?

douglas · October 9, 2016

i didn't see any error or mistake perhaps it needed a little discussion and motivation

nazimboudeffa · October 9, 2016

in general i like coding with other devs and discuss that stuff

Game states

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Recently Browsing 0 members