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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |