<!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>