Create a slightly naughty personal homepage-game

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.