My First Live MouseTesting Game (HTML & Javascript)
HTML5 Games are the new cool and it has gained even traction after Google decided to permanently block Flash on the Chrome browser.
Picking up on the trend, I recently started my first project in HTML5 which is a simple mouse testing game.
Before I begin, let me tell you I am a beginner and did not worked much on graphic and UI. Rather, I focused on creating a working game.
Here's the first look.
The game works on a very simple logic.
I have created a counter that increases its values on every mouse click. To detect the mouse click, I have used the javascript.
The counter starts counting as soon as the user hits the start button.
To make it a little more interesting, I thought of adding a speed counter as well. For that, I had to create time counter which initializes as the user hits start.
So, now we have two counters running simultaneously using JS. The default time limit is set to 10 seconds.
My code counts the clicks the user did in 10 second time and then I divide the number of clicks by number of seconds to show the click speed.
Clicks per second = No. of clicks / No. of seconds.
I created a Result screen in HTML5 to show this score to the user. Here's how it looks.
It took me around 32 hours to completely design and code the whole thing from zero. I am happy to showcase my first HTML5 project here in my portfolio.
Next up
I want to add a functionality to allow user to select time limit according to himself. And, also, I am learning to integrate audio in HTML5 so that I can add a real click sound every time user clicks on the screen.
Further, I will add a way save the best scores of the users to make this game more competitive.
And, finally, (only if I could) I will create a multiplayer version of this game where two users can challenge each other live.
Acknowledgements
I would like to mention the www.clickspeedtester.com which was my reference to create this game. I would also like to thank stackoverflow.com for all the helpful HTML5 resources.
