If you need a pro developer to create Phaser games for you, go to my fiverr website:
Game Demo Preview:
Display the UI
Init the highscore by reading it from localstorage, if it’s first time playing, just set highScore to 0
this.highScore=window.localStorage.getItem("flappyhighscore") || 0;
The start button and restart button
this.startBtn = this.add.image(game.config.width/2,game.config.height/2,"startText").setInteractive();//create a sprite for start button and set it interactive for mouse click.
this.startBtn.on('pointerdown', this.startGame.bind(this)); //bind the mouse click event to call startGame function when the mouse pointer is pressed down on the start button.
this.restartButton = this.add.image(game.config.width/2, 300, "restartBtn").setInteractive()//create a sprite for restart button and set it interactive for mouse click.
this.restartButton.on('pointerdown', this.restartGame.bind(this)) //bind the mouse click event to call restartGame function when the mouse pointer is pressed down on the start button.
this.restartButton.visible = false;// only show restart button when gameover
Add the background and the plane
Add background image and display at position 0,0
this.bg1 = this.add.image(0, 0, "bg").setOrigin(0, 0);
Add bird as a physcis sprite at position 80,310
this.bird = this.physics.add.sprite(80, 310, "bird");
Sets bird's body collides with the world boundary to prevent fly beyond top boundary
this.bird.setCollideWorldBounds(true);
Game Control
Detect when pressed up arrow on keyboard
if (this.cursors.up.isDown )
give the plane 300 speed up in the Y direction to make it fly up.
this.bird.setVelocityY(-300);
Move the pipes
The idea is that the plane will not move on the X axis. The pipes will move towards the plane to the left direction.
This way the game creates an illusion that the plane is flying past the pipes.
Give the pipe 150 speed on X axis to the left, to move the pipes to the left towards the plane:
this.pipes.setVelocityX(-150);
Randomize pipe position
The new pipes should be placed a "horizontalGap" distance from the last pipes to the left
this.curPipePosX+= this.horizontalGap;
The upper pipe's Y position will be random value
const topPipePosY = Phaser.Math.Between(70, game.config.height-70-this.verticalGap);
The vertical gap distance between the upper pipe and lower pipe will be random value between 150 and 220
this.verticalGap = Phaser.Math.Between(150,220);
The lower pipe's Y position will be the upper pipe's Y position plus the vertialGap
this.pipeBottom = this.pipes.create(this.curPipePosX, topPipePosY + this.verticalGap, "pipeBottom").setOrigin(0, 0);
Check plane passed pipe and add score
If the pipe’s right boundary position is less than the player's X position, means the plane passed this pipe.
if ( pipe.getBounds().right < PLANE_POS_X )
So that we can increment the score, and check if the current score is higher than the highest score, if so, update the highest score record.
this.score++;
this.updateHighScore();
this.textScore.setText( this.score);
Game over when plane hit the pipe
Add collision detection between plane and the pipes
this.physics.add.collider(this.bird, this.pipes, this.onHitBird.bind(this))
and when the collision happens, the onHitBird function will be called.
Pause all physcis effect, everything in physics world
this.physics.pause();
Show restart button for user to restart the game.
this.restartButton.visible = true;
Comments