by topherPedersen

FlappyBird Programming Tutorial with JavaScript and Phaser 3

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

Quick little FlappyBird tutorial written in JavaScript using the Phaser 3 HTML5 Game Framework. See the starter template on Repl.it for the game assets. Code by Sanay N., a rockstar coding student @ theCoderSchool in Flower Mound, TX and his instructor Topher P. =>

STARTER TEMPLATE: https://repl.it/@topherPedersen/FlappyBirdJS-STARTER-TEMPLATE

<!doctype html>
<!-- FlappyBirdJS by Sanay N. & Topher P.-->
<!-- https://github.com/topherPedersen/FlappyBirdJS -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Making your first Phaser 3 Game - Part 2</title>
<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
#title-div {
width: 600px;
overflow: hidden;
text-align: center;
}
</style>
</head>
<body>
<div id="title-div">
<p><strong>FlappyBirdJS by Sanay N., a Rockstar Coding Student @ theCoderSchool</strong></p>
</div>
<script type="text/javascript">
/**
** FlappyBirdJS by Sanay (a Rockstar Coding Student @ theCoderSchool)
** with a little help from his instructor topherPedersen
**/
// REFERENCE (Official Phaser Tutorial Source Code): https://github.com/topherPedersen/OfficialPhaser3Tutorial
var config = {
type: Phaser.AUTO,
width: 600,
height: 400,
physics: {
default: 'arcade',
arcade: {
gravity: {y: 300},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
// Game Variables
var bird;
var cursors;
var bottom_pipe = [];
var top_pipe = [];
var gameOver = false;
var endGame;
var distance;
initialYAxisOffset = [];
function preload () {
this.load.image('sky', 'assets/sky.png');
this.load.image('bird', 'assets/bird.png');
this.load.image('pipe', 'assets/pipe.png');
}
function create () {
// Add Sky
this.add.image(400, 300, 'sky');
// Add Flappy Bird
bird = this.physics.add.sprite(20, 40, 'bird');
// Add Collision Detection
bird.setBounce(0.2);
bird.setCollideWorldBounds(true);
bird.body.setGravityY(300);
// TODO: Sanay, use a for-loop to create three pipes.
// Reference the "Add Flappy Bird" for how to add a sprite
var xPos = 0;
var firstRandomNumber;
for (var i = 0; i < 3; i++) {
firstRandomNumber = (Math.floor(Math.random() * 10)) + 1;
if (firstRandomNumber < 6) {
// add random positive number to pipe's new y position
initialYAxisOffset[i] = (Math.floor(Math.random() * 10)) * 10;
} else {
// add random negative number to pipe's new y position
initialYAxisOffset[i] = (Math.floor(Math.random() * 10)) * (-10);
}
}
var offset;
// Create Top Pipes
for (var i = 0; i < 3; i++) {
offset = initialYAxisOffset[i];
top_pipe[i] = this.physics.add.sprite(550 + xPos, -50 + offset, 'pipe');
top_pipe[i].body.setAllowGravity(false);
top_pipe[i].body.setVelocityX(-150);
top_pipe[i].inableBody = true;
top_pipe[i].immovable = true;
top_pipe[i].flipY = true;
// Adjust Physics for Pipe(s)
// pipe[i].setBounce(0.2);
// pipe[i].setCollideWorldBounds(true);
// pipe[i].body.setGravityY(0);
// this.physics.add.collider(pipe[i]);
xPos += 400;
}
// Create Bottom Pipes
xPos = 0; // reset xPos back to zero
for (var i = 0; i < 3; i++) {
offset = initialYAxisOffset[i];
bottom_pipe[i] = this.physics.add.sprite(550 + xPos, 450 + offset, 'pipe');
bottom_pipe[i].body.setAllowGravity(false);
bottom_pipe[i].body.setVelocityX(-150);
bottom_pipe[i].inableBody = true;
bottom_pipe[i].immovable = true;
// bottom_pipe[i].flipY = true;
// Adjust Physics for Pipe(s)
// pipe[i].setBounce(0.2);
// pipe[i].setCollideWorldBounds(true);
// pipe[i].body.setGravityY(0);
// this.physics.add.collider(pipe[i]);
xPos += 400;
}
onScreenText = this.add.text(212, 185, '', {fontSize: '32px', fill: '#00000' });
cursors = this.input.keyboard.createCursorKeys();
// Add Collision Detection Between Bird & Pipe(s)
this.physics.add.collider(bird, bottom_pipe, collisionCallback);
this.physics.add.collider(bird, top_pipe, collisionCallback);
}
var xPos = 0;
// Main Game Loop
function update () {
if (gameOver) {
bird.body.setGravityY(0);
for (var i = 0; i < 3; i++) {
bottom_pipe[i].body.setAllowGravity(false);
bottom_pipe[i].body.setVelocityX(0);
top_pipe[i].body.setAllowGravity(false);
top_pipe[i].body.setVelocityX(0);
}
return;
} else {
if (cursors.space.isDown) {
bird.setVelocityY(-250);
console.log('Space Bar is pressed, I am amazing')
}
// TODO: Sanay, write some code here in the main game loop
// to check to see if any of the pipes have gone off screen.
// -300
for (var i = 0; i < 3; i++) {
var firstRandomNumber = (Math.floor(Math.random() * 10)) + 1;
if (firstRandomNumber < 6) {
// add random positive number to pipe's new y position
var yAxisOffset = (Math.floor(Math.random() * 10)) * 10;
} else {
// add random negative number to pipe's new y position
var yAxisOffset = (Math.floor(Math.random() * 10)) * (-10);
}
if (bottom_pipe[i].body.x < -400) {
bottom_pipe[i].x = 850;
bottom_pipe[i].y = 450 + yAxisOffset;
}
if (top_pipe[i].body.x < -400) {
top_pipe[i].x = 850;
top_pipe[i].y = -50 + yAxisOffset;
}
}
}
}
function collisionCallback() {
gameOver = true;
// endGame.setText('Game Over');
bird.body.enable = false;
top_pipe[0].body.enable = false;
top_pipe[1].body.enable = false;
top_pipe[2].body.enable = false;
bottom_pipe[0].body.enable = false;
bottom_pipe[1].body.enable = false;
bottom_pipe[2].body.enable = false;
onScreenText.setText('GAME OVER');
}
</script>
</body>
</html>
view raw flappybird.html hosted with ❤ by GitHub
 

topherPedersen