Flappy Bird

[Crisiluluman]

Hello!

I am doing this project, where I have to make a game, and I decided to make Flappy Bird. I followed this link "http://www.lessmilk.com/tutorial/flappy-bird-phaser-1" but the code will not work at all. I am working in Phaser 2, so I think that's the problem, since the tutorial is in Phaser. I am stuck at the part where he creates the pipes, since I cannot get them to show up at all.

I am very new to Phaser 2, and this is my first project, I am unsure where in the addOnePipe function the problem is, since I feel like I'm combining Phaser 1 and 2 together.

Any and all help is appreciated! Thanks in advance!

// PHASER


var game = new Phaser.Game(400, 490, Phaser.AUTO, 'gameDiv', { preload: preload, create: create, update: update});
var bird;

var mainState;
var main;
var pipeHole = 120;
var pipeGroup;
var addOnePipe;
var addRowOfPipes;
var pipe;
var timer;
 

game.state.add('main', mainState);
game.state.start('main');
 

function preload(){
        game.load.image('bird', 'assets/images/bird.png');
game.stage.backgroundColor = '#71c5cf';
game.load.image('pipe', 'assets/images/pipe.png');
        
}
    
function create() { 
 

game.physics.startSystem(Phaser.Physics.ARCADE);
 

// Character basics
this.bird = game.add.sprite(100, 245, 'bird');
this.bird.scale.setTo(0.2, 0.2);
        game.physics.arcade.enable(this.bird);
this.bird.body.gravity.y = 1000;

// Controls
keyboard = game.input.keyboard;
cursors = game.input.keyboard.createCursorKeys();

// Create Pipe
this.pipes = game.add.group();
 

game.time.events.loop(Phaser.Timer.SECOND*2, addRowOfPipes); 

} 
 

function update(){
 

// If the bird is out of the screen (too high or too low)
// Call the 'restartGame' function
if (this.bird.y < 0 || this.bird.y > 490)
game.state.restart();
game.state.start('main',true,false);
 

// Keyboard 
if(keyboard.isDown(Phaser.Keyboard.SPACEBAR)){
this.bird.body.velocity.y = -350;
} else if(cursors.left.isDown) {
this.bird.body.velocity.x = -370;
} else if(cursors.right.isDown) {
this.bird.body.velocity.x = 370;
}

}

var addOnePipe = function(x,y){
game.add.sprite(x, y, 'pipe');
pipe.scale.setTo(0.05, 0.05);

// Add the pipe to our previously created group
//pipe.add(pipe);
 

// Enable physics on the pipe 
game.physics.arcade.enable(pipe);
 

// Add velocity to the pipe to make it move left
pipe.body.velocity.x = -200; 
 

// Automatically kill the pipe when it's no longer visible 
pipe.checkWorldBounds = true;
pipe.outOfBoundsKill = true;
}
 

var addRowOfPipes = function() {
// Randomly pick a number between 1 and 5
// This will be the hole position
var hole = Math.floor(Math.random() * 5) + 1;

// Add the 6 pipes
// With one big hole at position 'hole' and 'hole + 1'
for (var i = 0; i < 8; i++)
if (i != hole && i != hole + 1)
addOnePipe(400, i * 60 + 10);
}

 

 

[mattstyles]

Hi @Crisiluluman

I can't answer your question but I'm sure others will.

Can you remove the extra lines and white space from your code snippet? Will make it a heap easier to read and increase your chances of getting a response. Thanks.

[Crisiluluman]

Ohh! I did not realize there was so much space when uploading, I will fix that, and thank you

[Pavel Mishin]

Hi! There are a lot problems with this code, since you didn't follow the tutorial. First, you don't see pipes because of level restarts before function addRowOfPipes called, if you disable "game.state.restart();" you'll see error in console "pipe is undefined", since you not assign pipe sprite to pipe variable.

Than, you have duplicated declaration of addOnePipe and addRowOfPipes.

Also I'll suggest you to learn how to use group that you create "this.pipes = game.add.group();", instead of adding pipes as separate sprites through custom function.

And another big problem that you are use default state and global variables (I assume you got this approach from another tutorial) instead of separate state and it properties as in the tutorial. In your code mainState, which you try to start is just empty variable.