Crazy Clicker – My First JS Project

For my first Javascript project, I didn’t really have a plan. I decided to try and manipulate a simple div on the page when it was clicked. After having a hard time remembering how to get an element by ID I eventually figured it out. At this point, I decided to make the div shaped like a ball. Now that I had the div element in my Javascript file, I needed to find a way to detect when it was clicked. For this, I used the .onclick method and set it equal to a function. In that function, I had all the logic for what I wanted to happen on click.

What Happens On Click

On click, I wanted to change the position of the ball to a random location on the DOM. For this I used the Math().random function and I generated a random number between 20 and 80. I then rounded those values down to whole numbers, and assigned those numbers to ball.style.top and ball.style.left. I used view height and view width to make it fully responsive so it would work on a phone. I also increased the score every time the ball was clicked, decreased the size of the ball to make increase the difficulty, and added time to the timer.

Setting the Timer

The timer was created using the setInterval function which fired every 100 milliseconds. If the timer ever equaled 1 then the lost() function fired, else it decremented the timer. Every time the ball was clicked six units of time were added to the timer. This is what makes it important to click the ball as fast as possible.

What Happens When you Lose

When the lost() function fires it makes the ball unclickable and changes it to a fixed position in the center of the screen. It also massively increases the size of the ball and displays the user’s score inside of the ball. Also, the timer and score keeper fade out. All this stuff happens using CSS and JS animations to make it all smooth and pretty.

Summary

Overall this project was pretty simple but was an excellent learning experience. I had never built a JavaScript project with almost no outside help or tutorials. This forced me to experiment with different ideas and do some googling to get things to work. After showing my instructors some of my code they suggested ways improve readability and performance. You can play with Crazy Clicker by visiting my Projects page, and you can view the code by visiting my GitHub.