Circle Click JavaScript Game

Hosted Project

Circle Click JavaScript Game (Hosted on Github Pages)

Source Files

https://github.com/JS-Beginners/click-shapes-javascript-game (Hosted on Github)

Project Objective

The objective of this JavaScript circle click game project is to code a game that makes random circles, which the user has 1 second to click.

JavaScript Used

• DOM manipulations
• conditionals
• eventListners
• game logic
• CSS style manipulations
• functions

My Personalize Summary

Just like I did in the previous coin toss JavaScript game I found in Sveki's course, I spent more time than necessary to complete this project because I added lots more modification to the original game.

I could have simply coded what Sveki provided, but once again, I wanted to style the game and make for a better user interaction.

I added more CSS styling, a total score, and UX personalization. Meaning, I catered the game's output based on the size of the user's screen by using the element.clientWidth and element.clientHeight properties. The larger the screen, the harder the game will be.

New Things Learned or Refreshed

There wasn't too much that I learned in this game other than the clientWidth/clientHeight properties that lay on the HTML element object. I first tried to use the window.innerHeight and window.innerWidth properties but these appear to be fixed no matter how the user configures his or her screen size. Meaning, even with a minimized screen, the window.innerHeight property reads the same.

Happy coding!

Time to Code

This project took me about 2 hours to code, including the HTML and CSS.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Laurence's Svekis' Monster JavaScript course.
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this Circle Click JavaScript Game in action.

Need to see the video solution for this project? Get Laurence Svekis's Monster JavaScript Course with 50+ Projects Now!