Beginning with States in phaser ...

[dandorf]

I put my game a menu before starting to play, I've watched a tutorial, but I can not make it work. 

 

I have the following: 

 

State game.js: Cargo all states and call the load state. 

 

// Initialize Phaservar game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo');//var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload, create: create, update: update });// Define all the statesgame.state.add('load', load_state);  game.state.add('menu', menu_state);  game.state.add('play', play_state);  // Start with the 'load' stategame.state.start('load');  

 

State load.js: load everything needed and switches to the menu. 

 

var load_state = {      preload: function() {         game.load.image('bet', 'assets/rocket.png');        game.load.image('ball', 'assets/ball.png');        game.load.image('background', 'assets/backg.png');    },    create: function() {        // When all assets are loaded, go to the 'menu' state        this.game.state.start('menu');    }};

 

State menu.js: Here the game menu appears. Press Space bar to discuss the game. 

 

var menu_state = {      create: function() {        // Call the 'start' function when pressing the spacebar        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        space_key.onDown.add(this.start, this);         // Defining variables        var style = { font: "30px Arial", fill: "#ffffff" };        var x = game.world.width/2, y = game.world.height/2;        // Adding a text centered on the screen        var text = this.game.add.text(x, y-50, "Press space to start", style);        text.anchor.setTo(0.5, 0.5);     },    // Start the actual game    start: function() {        this.game.state.start('play');    }};

 

State play.js: Here is the code of the game itself.

 

var play_state = {//var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload, create: create, update: update });	   /* function preload() {        game.load.image('bet', 'assets/rocket.png');        game.load.image('ball', 'assets/ball.png');        game.load.image('background', 'assets/backg.png');    } */		    create: function() {		var playerBet;	var computerBet;	var ball;	var computerBetSpeed = 190;	var ballSpeed = 300;	var ballReleased = false;		var score = 0;	var scoreText;		var score2 = 0;	var scoreText2; 	var ballHitsBet;        this.game.add.tileSprite(0, 0, 640, 480, 'background');				this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'ball');		this.game.physics.startSystem(this.Phaser.Physics.ARCADE);		this.game.physics.arcade.enable(ball);		this.ball.anchor.setTo(0.5, 0.5);				this.ball.body.collideWorldBounds = true;		this.ball.body.bounce.setTo(1, 1);						this.computerBet = this.createBet(620, this.game.world.centerY);		this.playerBet = this.createBet(20, this.game.world.centerY);				this.computerBet.body.collideWorldBounds = true;			this.computerBet.body.bounce.setTo(1, 1);			this.computerBet.body.immovable = true;				this.game.input.onDown.add(this.releaseBall, this);				//Score		this.scoreText = this.game.add.text(290, 16, '0', { fontSize: '64px', fill: '#000' });		this.scoreText2 = this.game.add.text(350, 16, '0', { fontSize: '64px', fill: '#000' });    }    update: function() {        if(this.computerBet.y - this.ball.y < -15)		{            this.computerBet.body.velocity.y = this.computerBetSpeed;        }		else if(this.computerBet.y - this.ball.y > 15) 		{            this.computerBet.body.velocity.y = this.-computerBetSpeed;        } 		else 		{            this.computerBet.body.velocity.y = 0;        }				//Moviendo raqueta		if (this.game.input.keyboard.isDown(Phaser.Keyboard.UP))   		{			this.playerBet.body.velocity.y = -190;    	}				if (this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN))   		{			this.playerBet.body.velocity.y = 190;    	}        //Check and process the collision ball and racket        this.game.physics.arcade.collide(this.ball, this.playerBet, this.ballHitsBet, null, this);        this.game.physics.arcade.collide(this.ball, this.computerBet, this.ballHitsBet, null, this);				this.checkGoal();    }			//Funciones	 createBet: function(x,y) {		var bet = game.add.sprite(x, y, 'bet');			game.physics.arcade.enable(bet);		bet.anchor.setTo(0.5, 0.5);			bet.body.collideWorldBounds = true;			bet.body.bounce.setTo(0, 0);			bet.body.immovable = true;			return bet;	}			releaseBall: function() {	        if (!ballReleased)		{            ball.body.velocity.x = ballSpeed;            ball.body.velocity.y = ballSpeed;            ballReleased = true;        }    }			ballHitsBet: function(_ball, _bet) {	        var diff = 0;        if (_ball.y < _bet.y) 		{            //If ball is in the left hand side on the racket            diff = _bet.y - _ball.y;            _ball.body.velocity.y = (-10 * diff);        } 		else if (_ball.y > _bet.y)		{           //If ball is in the right hand side on the racket            diff = _ball.y -_bet.y;            _ball.body.velocity.y = (10 * diff);        }		else 		{            //The ball hit the center of the racket, let's add a little bit of a tragic accident(random) of his movement            _ball.body.velocity.y = 2 + Math.random() * 8;        }    }		checkGoal: function() {	        if (ball.x < 15) 		{             setBall();			 score2 += 1;    		 scoreText2.text = '' + score2;        } 		else if (ball.x > 625) 		{            setBall();			score += 1;    		scoreText.text = '' + score;        }    }     setBall: function() {        if (ballReleased) 		{            ball.x = game.world.centerX;            ball.y = game.world.centerY;            ball.body.velocity.x = 0;            ball.body.velocity.y = 0;            ballReleased = true;						ball.body.velocity.x =  190;			ball.body.velocity.y = 190;        }    }	};

Errors are giving me javascript of the following: 

 

Uncaught SyntaxError: Unexpected identifier - In this line of play.js:

 

update: function() {

And another error, who I believe that more important..

 

Uncaught ReferenceError: play_state is not defined - in this line of game.js: 

 

game.state.add('play', play_state);  

Why is not the state play? 

 

The result is that I get the Menu screen with the text Press Space to start, but when I press start, nothing happens ... 

 

And if I put it directly run the state play, the screen goes black, does not work.

[Dumtard]

You are missing commas in your play state.

var play_state = {    create: function() {    }, //HERE    update: function() {    }, //HERE    createBet: function(x,y) {    }, //HERE    releaseBall: function() {    }, //HERE	    ballHitsBet: function(_ball, _bet) {    }, //HERE    setBall: function() {    }};

[dandorf]

Sorry, I just edited with the full game code. Thanks. 

[Dumtard]

See my edited post.

[dandorf]

That has fixed my old problem. Thanks!!!!

And my menu screen appears ..

 

Now the same thing happens to me: 

 

Uncaught TypeError: Can not read property 'hasOwnProperty' of undefined 

 

It says the error is in the file phaser ... phaser.min.js line 15.

[Dumtard]

Don't use the min version of phaser, use the regular unminified version and then come back and tell us what line the error is on. Also what version of phaser.

For development you should not use minified files, it makes it hard to debug. When you are done and what to put the game out to the public you can then use the minified version.

[dandorf]

I put the 2.1.1 version of phaser. 

 

Now tell me the following: 

 

Uncaught SyntaxError: Unexpected token < phaser.js: 1 

 

Uncaught ReferenceError: Phaser is not defined game.js

[Dumtard]

It should be a drop in replacement for the min version. 'Unexpected token <' looks like it is trying to put a HTML tag in make sure the index.html is correct.

[dandorf]

In the index.html I have just this:

<html>    <head>  <meta charset="utf-8" />  <title>Pong</title>  <style>    #ejemplo{      width: 640px;      margin: auto;      margin-top: 20px;    }  </style>  <script type="text/javascript" src="phaser.js"></script>  <script type="text/javascript" src="load.js"></script>  <script type="text/javascript" src="menu.js"></script>  <script type="text/javascript" src="play.js"></script>  <script type="text/javascript" src="game.js"></script></head><body>  <div id="ejemplo"> </div></body></html>

[Dumtard]

Not sure the problem, but I would fix it by getting a minimum working example with phaser.js. Include just phaser.js and a game.js with game.js being:
 

function preload() {  console.log('preload');}var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'ejemplo', { preload: preload });

Once you have that you can start adding back on and see where the problem occurs.

[dandorf]

The same ... Not charging well Phaser.js file ... do not know why. Gives the same error.

 

Phaser do not install anything, no? 

Simply copy the file to the root of my game.

[Dumtard]

Not sure, maybe a problem with the phaser.js file, I doubt it, but I have not used it. I guess go back to the phaser.min.js file for now, but solving this

 

 

That has fixed my old problem. Thanks!!!!

And my menu screen appears ..

 

Now the same thing happens to me: 

 

Uncaught TypeError: Can not read property 'hasOwnProperty' of undefined 

 

It says the error is in the file phaser ... phaser.min.js line 15.

 

 

you will need to work harder to fix. Figure out where in your play_state the phaser call is that is causing the error. You can do this using debugger or console statements, to narrow in to the function call so that we can figure out what the issue is.

[dandorf]

How I can do to debug the code? I use dreamweaver ...

 

 

When I run index, the program starts without errors in the menu, and when I press space bar, is when I get this error (but the display still puts you press the space bar ... I do not know if the state is reached change)

[Dumtard]

Well you can put the line "debugger;" at the top of your play_state preload and use Chrome's development tools to step through your code.

Does Dreamweaver run the server for you? I am guessing so, that could have lead to the issue with phaser.js not sure how dreamweaver handles files and serving them to the client.

Personally I would say not to use Dreamweaver, a good text editor and a webserver to serve the files is all you need. But that may be just my personal preference as I have never used Dreamweaver.

[oddskill]

You can use google chrome to debug javascript https://developer.chrome.com/devtools/docs/javascript-debugging

Or you can use the Firefox addon firebug http://getfirebug.com/javascript

 

Additionally you can use codevinskys yeoman generator to setup a basic phaser project automatically http://www.codevinsky.com/phaser-tutorial-getting-started-with-generator-phaser-official/

 

regards

[dandorf]

I have been copying the code in the file play.js slowly, low to high ... and correcting errors at every step, and you're solve problems.. 

 

Mostly were problems regarding "this", he had to put it on each call to a function of the file itself .. 

 

Thank you all.

[dandorf]

I have a new question ... if I want to use global variables for all states (I put a section of options on the menu, and change values ​​of variables for the game) where I have to put ???

[spencerTL]

In the phaser templates boot.js there is an example of how to have vars you can access from all of the states. Something like Basicgame.score