
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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Laurence's Svekis' Monster JavaScript course.
- 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.
Hi,
I think you might have accidentally double linked the hosted project, I can’t visit the source code Github page and I’m keen to try this
Thanks! Fixed it!
And here it is for quick reference: https://github.com/romeojeremiah/click-shapes-javascript-game