Whack-a-Mole Web App Game

This is a browser-based Whack-a-Mole game built with modern web technologies:

• Vite for fast development and build tooling
• Vue 3 for reactive UI and component structure
• TypeScript for type safety and maintainable code
• HTML & CSS for layout and styling

Gameplay

Whack-a-Mole is a classic arcade-style game where moles randomly pop up from holes on the board. Your goal is to click ("whack") as many moles as possible before time runs out. The game features:

• 3x3 grid play area
• Increasing difficulty: moles appear faster and stay for less time as the game progresses
• Score and timer tracking
• Adjustable game duration and starting difficulty
• Pause and reset controls
• Top-5 leaderboard saved in your browser's localStorage
• Game log and keyboard shortcuts (Space to start, Escape to reset)

Technologies Used

• Vite: Next-generation frontend tooling for fast development
• Vue 3: Progressive JavaScript framework for building user interfaces
• TypeScript: Typed superset of JavaScript for safer code
• HTML: Markup for the game structure
• CSS: Custom styles for a modern, responsive look

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser at http://localhost:5173 (or the port shown in your terminal)

Project Structure

• src/App.vue: Main game logic and UI
• public/: Static assets
• vite.config.ts, tsconfig.json: Project configuration

License

This project is for educational and entertainment purposes.

Live Demo

https://lucaselb.github.io/whack-a-mole-game/