Overview and Usage

The core functionality of this project was to write the code to use a modern web development toolchain to structure and deploy an app, in which I chose to create a game app - Whack-A-Bee (inspired by the game whack-a-mole).

Whack-A-Bee Game

Play the game here. The code can be found in this github repository called "whack-a-mole". The repo can be cloned to your own device -- note, you will need to install libraries, run a local development server, bundle the code, and deploy the app on your own device.

Development Process

New Github Repo

1. Create New Repo

To start out, I created a new public Github repository that I called "whack-a-mole" to host the project for my game. My game idea was inspired by the game 'whack-a-mole', so I chose this to name my new repo.

Clone Repo using Terminal

2. Clone Repo

After my new "whack-a-mole" github repository was created, I then cloned the new repository to my computer using my terminal and git-clone.

Game Sketch on p5.js Web Editor

3. Create Game Sketch on Web Editor

After setting up my new repo, I opened a new sketch on the p5.js Web Editor to start on my game. I used the Web Editor as it has an embedded canvas so I could quickly iterate on my sketch and see changes without needing to refresh the page.

To code the whack-a-mole game, I started basic by using rectangles to act as the 'mole'.

Local Dev Server for App

4. Set up Development Environment using Dev Toolchain Activity

Once I was happy with how everything worked and looked, I set up my development environment following the in-class Dev Toolchain Activity.

After installing the required libraries, I bundled my code and deployed my app.

Final Whack-A-Bee Game

5. Clean-up and Edits

After the game was functioning the way I wanted, I added in a Bee image to replace the rectangle shape and act as the 'mole'. I also added in audio that played when the mouse was clicked on the Bee. I made some other edits and cleaned up my code as well to get to the final game app.

While making edits and changing my code, I routinely commited and pushed my code to Github alongside building and deploying my app.

Issue Deep-Dive

Issue: Bee Positioning and Removing Bee upon Click

One issue that I ran into was that the bee wouldn't disappear when it was clicked on -- but only move after 'n' seconds had passed (I had used random to set 'n' seconds for the time the bee was to be in a certain position, and my mousePressed function only changed the score and lives depending on if the bee was clicked on). I also was only able to set one bee on the screen, and I wanted to have the possibility to place more than one bee on the screen at a time to increase game difficulty.

Moles did not Disappear upon Click

By doing a search online, I found someone had created a minimalist whack-a-mole on p5. Following their code, I added in a Moles Class to make the moles appear and disappear on screen. Creating a new Moles Class allowed me to bundle attributes and attribute functionality for my bees in one place. More specifically, I was able to group the set of fields together (like x-Position, y-Position, size, and time duration for the bees to be on screen).

Functioning Game

Ideas & Future Work

Here are some additional ideas and features I would like to add to my game in the future!

Increase game difficulty as time goes on (bees disappear much faster, more bees on screen, etc.)
Add more variety in the happy and sad bees
Have a way to for users to choose the game difficulty through pressing a key on the keyboard

Kudos

Kudos to these helpful online resources! And special thanks to Hannah, Raina, and other peers as well :)