【For beginners】 I tried making a Dragon Ball Clicker.

Although it is now, I wanted to make a cookie clicker that I did, so I tried making it.

The basic rule of cookie clicker is like this.

When you click on cookie, cookie is +1.
Paying the accumulated cookie allows you to purchase items.
When you purchase items you get cookies every second.
Every time I purchase an item, the price is increased by 1.15.
As an additional rule, when a certain amount of cookie is accumulated, the function to run the event is added.

At this point, I decided to try with the dragon ball everyone knows.
I will use combat power instead of cookies.

The completion is here.

■Dragon Ball Clicker

Source code is here.
(By the way it is made with Angular.)

■github – dbck

Because I wanted to make it as simple as possible,
I write almost all of the components in app.component.ts without dividing them.

■github – dbck – app.component.ts

Because “It is troubled when” apprentice to turtle hermit “item comes out before meeting Turtle Sennin,
For each item, how much to display when the fighting power gets higher? I am setting a numerical value called.

Also, this time, I first learned that when calculating the decimal point with javascript, I get an error.


Even if 1 is added 0.1 times 10 times it does not become 2 · · · JS.

By the way, the fighting power was referred to the site below.

■ドラゴンボール 極

Inflation is said to be inflation,
Regarding the early stage, I do not have such inflation.
Peach white white, it was an overwhelmingly strong image.


  • I made it according to the fighter power of Dragon Ball, so I could not taste the feeling of inflation which is the real thrill of cookie clicker.
  • I think cookie clicker is the best teaching material for programming beginners.
  • The difficulty level is low if you just make it, but when you try to make it interesting you need to have a solid level design.


  • このエントリーをはてなブックマークに追加