HTML HELP! Any would be appreciated. We will modify this activity this term. The
ID: 3768815 • Letter: H
Question
HTML HELP! Any would be appreciated.
We will modify this activity this term. The book has many examples. For the bird web site, create a new page BirdGame.html. It is already in the menu.
Create an image of a birdhouse and trim it into three pieces or more. Save each piece as a separate image. You can use most graphic editors like GIMP (free) to do this. Use the drag and drop example as a book to guide you. But make sure to write your own code! I expect to see comments thoroughly documenting the game.
Allow the user to drag and drop the pieces of the house, and put it together, like a puzzle. You can optionally have the background image as a faded version of the house so you can give the user an idea of what the finished house would look like.
Explanation / Answer
BIRD GAME:
Bird is a nice little game with easy to understand mechanics, and I thought it would be a perfect fit for an HTML5 game tutorial. So we are going to make a simplified version of Flappy Bird, in only 65 lines of Javascript with the Phaser framework.
Set Up
You should download this empty template.
In it you will find:
You should also download the code editor Brackets, that will make our life easier to set up a webserver.
In the index.html file we add this simple code:
It will load all the necessary Javascript files, and add a "gameDiv" element where our game will be displayed.
In the main.js file we should add this, which will create an empty Phaser project:
We are going to fill in the preload(), create() and update() functions, and add some new functions to make the game work.
The Bird
Let's first focus on adding a bird to the game that can be controlled with the spacebar key.
Everything is quite simple and well commented, so you should be able to understand easily the code below. For better readability, I removed the Phaser initialization and states management code that you can see above.
First we update the preload(), create() and update() functions.
And just below this, we add these two new functions:
Testing
Now it's time to test our game. Open the index.html file with the Brackets editor, then click on the small icon in the top right corner:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><Bird clone</title>
<script type="text/javascript" src="phaser.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</head>
It will launch a live preview of the game, where you should have a bird jumping when you press the spacebar key.
If you don't want to use Brackets, then you'll have to use a local webserver to test the game.
The Pipes
A Flappy Bird game without pipes is not really interesting, so let's change that.
First, we load the pipe sprite in the preload() function.
Since we are going to handle a lot of pipes in the game, it's easier to use a Phaser feature called 'group'. The group will contain 20 pipes that we will be able to use as we want. So we add this in the create() function.
Now we need a new function to add a pipe in the game. By default, all the pipes contained in the group are dead and not displayed. So we pick a dead pipe, display it, and make sure to automatically kill it when it's no longer visible. This way we never run out of pipes.
The previous function displays one pipe, but we need to display 6 pipes in a row with a hole somewhere in the middle. So let's create a new function that does just that.
To actually add pipes in the game, we need to call the addRowOfPipes()function every 1.5 seconds. We can do this by adding a timer in the create() function.
Now you can save your file and test the code. This is slowly starting to look like a real game.
Scoring and Collisions
The last thing we need to finish the game is adding a score and handling collisions. And this is quite easy to do.
We add this in the create() function to display a score label in the top left.
And we put this in the addRowOfPipes(), to increase the score by 1 each time new pipes are created.
Next, we add this line in the update() function to call restartGame() each time the bird collides with a pipe.
And we are done!
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.