Apply local draft version or discard it
Indent with tabs
Auto-run code (beta)
Only auto-run code that validates
Auto-save code (bumps the version)
Auto-close HTML tags
Clear console on run
Live code validation
No autoresizing to fit the code
Render blocking of the parent page
One of the most common requirements of web applications is to be able to respond to user input, and in particular clicks (or touches). Continuing with our theme of element generation (and in some cases animation); this week’s challenge will be to create a basic whac-a-mole game.
The point of the game will be to click on highlighted elements to increase score. This can be as basic or as intricate as you wish it to be, but it should resemble the following diagram…
The green block represents the block a player must click in order to gain points. This means you will need logic to randomly select one of the possible blocks and highlight it. You also need to register user clicks and update the score “label”.
Hint: at times when you need to add many of the same kind of event to a variable amount of elements (in this case blocks); it is helpful and even efficient to use event delegation. You will need to use the setInterval() function or the setTimeout() function to create a predictable amount of time between each click or highlight.
Add title to make the fiddle public.
/echo simulates Async calls:
See docs for more info.
Created and maintained by Piotr and @oskar.
Hosted on DigitalOcean
All code belongs to the poster and no license is enforced.
JSFiddle or its authors are not responsible or liable for any loss or damage of any kind during the usage of provided code.
Roadmap (vote for features)
Status page by updown.io
If you don't mind tech-related ads, and want to keep us running, whitelist JSFiddle in your ad blocker.
Thank you! ❤️