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