Create the Flappy Bird Game Using JavaScript

DOWNLOAD:FLAPPY BIRD WITH JAVASCRIPT - SOURCE CODE

In general, to create a JavaScript game, you'll need two things, the first is the HTML5 canvas, and the second is JavaScript.

If you want to follow this tutorial step by step, you must first download our starter template, from our repository on GitHub, the starter template, have all files already created, including the images, audio files. Download the starter template.


Now let's open our index.html file, You first go and create the canvas element, inside your HTML file :

<canvas id="flappyBird" width="288" height="512"></canvas>

view raw code36.js hosted with ❤ by GitHub

then before the closing body tag "</body>", you add your JavaScript code.

<script src="flappyBird.js"></script>

view raw code37.js hosted with ❤ by GitHub

Now we need to write our code, inside flappyBird.js file, the first thing that we will do, is to select our canvas, and getContext('2d') of our canvas :

	let cvs = document.getElementById("flappyBird");
	let ctx = cvs.getContext("2d");

view raw code38.js hosted with ❤ by GitHub

getContext('2d') method, has properties and methods that allow us to draw and DO different things on the canvas.

Now let's create our game images.
To create an image, we create an instance of the Image() object, using the new keyword.

	let bird = new Image();
	let bg = new Image();
	let fg = new Image();
	let pipeNorth = new Image();
	let pipeSouth = new Image();

view raw code39.js hosted with ❤ by GitHub

And then we have to set our images source (path), using the src property.

	bird.src = "images/bird.png";
	bg.src = "images/bg.png";
	fg.src = "images/fg.png";
	pipeNorth.src = "images/pipeNorth.png";
	pipeSouth.src = "images/pipeSouth.png";

view raw code40.js hosted with ❤ by GitHub

we do just the same, when we create an audio file in JavaScript, we create an instance of the Audio() object, using the new keyword.

	var fly = new Audio();
	var scor = new Audio();
	fly.src = "sounds/fly.mp3";
	scor.src = "sounds/score.mp3";

view raw code41.js hosted with ❤ by GitHub

Now let's create some variables we will need during the game.

	// gap; is the gap in pixels between the south Pipe and North Pipe.
	var gap = 85;
	// the constant is the south Pipe position, and it is calculating by adding the gap to the north Pipe.
	var constant;
	// the bird X and Y positions.
	var bX = 10;
	var bY = 150;
	// the bird falls by 1.5 pixels at a time.
	var gravity = 1.5;
	// we initiate the players score
	var score = 0;

view raw code42.js hosted with ❤ by GitHub

The player can control the bird using any key on the keyboard.
We need to add an eventlistener to our document. and when the player press a key, we run a function moveUp(); that will move up the bird by 25px to the top, and also play a sound.

	document.addEventListener("keydown", moveUp);
	function moveUp(){
	bY -= 25;
	fly.play();
	}

view raw code43.js hosted with ❤ by GitHub

We will need to store our pipe (North and South) coordinates, for that, we will use an array.
When the game starts, the first pipe X position is at 288px (= cvs.width).

	var pipe = [];
	pipe[0] = {
	x : cvs.width,
	y : 0
	};

view raw code44.js hosted with ❤ by GitHub

I think it's time, cause you're ready to follow my step by step tutorial on how to create the flappy bird game using JavaScript.

Other Tutorials for games created using JavaScript :

Create the Tetris Game Using Javascript

Create the Snake Game Using Javascript