Whack a Mole Challenge

Problem Description

Create a Whack-a-Mole game where players must click on moles as they randomly appear from holes. The game tests reflexes and timing as players try to achieve the highest score possible within a time limit.

Requirements

• The game should have a grid of 9 holes.
• When the game starts, moles will pop up randomly from the holes.
• The player must click on a mole to whack it. Each successful whack earns one point.
• If the player does not whack the mole within a short time, it will disappear.
• New moles randomly appear from the holes as the game progresses.
• The player has 20 seconds to hit as many moles as possible.
• The game ends when the timer runs out. The final score is displayed and the player has the option to play again.
• The game should have a start button and display the current score and time remaining.

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges

Credits

This challenge is inspired by GreatFrontend.