Create a slightly naughty personal homepage-game

Serious overtime recently, very serious ···

The evil discuz, And the evil environment problems. Forget it.

This should be the last article in this series. I will make another idea later. It is mainly used to view a homepage of an article. During this period, I will post something that I think is fun.

This article mainly introduces a Flappy Bird I made. Because it is manually written by JS, the efficiency is definitely not high, so it should be worth it. The browser is hard to return.

The effect is demonstrated here:

Flappy Bird

First, close a package and write an external interface in it:

.....

Then implement this task step by step.

The first step is to solve the problem of free fall. Here we use the source code of an Apple free fall that Google put on the homepage on Newton's birthday in a certain year. Remove horizontal movement,

.....

Attach the process to the keyboard event. Like this:

.....

Then there is the movement and increase of the pillar. The whole movement is the movement of the UL label. This will increase the pillar with the distance, and the whole process is almost like this.

First, move the column:

.....

When the conditions are met, add the column. Add the column to write some HTML code:

.....

Next is the last step to verify the collision. This is the process of getting the top coordinate of the bird and comparing its own volume with the column.

.....

In this way, the general function is actually implemented, and then an endgame and resetgame method are added so that it can be played repeatedly.

The main idea is to split, split, and then split, and write n methods to assemble them into one. This can be reused and the idea will be clear.

The efficiency may not be very good. After all, I just want to achieve the effect. Well, there is not much research on small efficiency, and I hope it will be enriched in the future. Haha.

Original article: Make a slightly naughty personal homepage-game

Create a slightly naughty personal homepage-game