Inspiration
Recently visited an arcade where I played some arcade games, including a whack-a-mole style game, which got me thinking about recreating some cool arcade games within Lens Studio and ultimately I decided on this concept for the hackathon.
What it does
It's a 2D game where moles and bombs are popping out of holes one at a time. The objective is for the user to tap/whack the moles and avoid the bombs. Tapping on moles one after the other can build the player up to a x3 score multiplier. Tapping a bomb or missing a mole results in the player losing the multiplier. Additionally, tapping on the bombs reduces the player's score (if their score is above 0).
This is a timed experience, so once the timer runs out, the game stops, and the user's score for this playthrough is shown, as well as their personal best. A retry button will also appear, allowing the user to retry the game to get a better score.
The Leaderboard component is also used, and the scores are updated after every try and resets daily. This will add to the replayability and shareability since the players will want to beat their friends.
How I built it
I have been building AR experiences within Lens Studio for around 3 years and have built some really cool, code-heavy games, which is what gave me the confidence to build a game like this.
Within Lens Studio, I used:
- JavaScript to fully fleshout the mechanic by approaching one thing at a time. From building the initial tap mechanic and animating and layering the pop-up animations to the start, game and end frames and scoring logic.
- The interaction component to detect touch on all the interactive objects.
- Highscore logic, so the player's personal best can be displayed on the end frame.
- Leaderboard component, so the players can compete with their friends.
- A custom camera delay script that allows for smoother loading of Lenses.
Additionally:
- Envato Elements for some of the 2D assets.
- Photoshop and Illustrator to edit and create more assets.
- Gemini AI that helped me with debugging.
Challenges I ran into
2D Layering: Since this is a 2D game, I had to figure out how to have the 2D moles and bombs animate from 2D holes. I ended up using the layer system within Lens Studio and cut most of my assets to have a back and front. The ground and holes have a back side and front side, so it gives the player the illusion of the moles and bombs animating from the holes.
Leaderboard component issues: The Leaderboard component was not working as I expected initially. It was not updating if the player got a higher score than their initial playthrough. After some research into how it was implemented in other projects and some YouTube videos, I figured out that I was not adding the score correctly within the code, so it was only adding the score once.
Randomisation and Multiplier logic:
The randomisation logic for when moles and bombs pop up, it did not make sense in combination with the multiplier bonus logic. If the player gets a multiplier and a bomb pops up, but is not tapped, the player still loses their multiplier, and on top of that, bombs could pop up one after the other.
I decided to make the pop-up logic less "random" and have the bombs only pop up after a mole. For the multiplier, I have a check to see if there is an active multiplier. If there is when a bomb pops up, the multiplier time gets extended, so the player will still have their multiplier if they tap on the mole that pops up after a bomb.
Score pop-up object:
I wanted to have the score pop up next to a mole when the player taps on that respective mole. Since the score increase object is a text object, I was having issues with positioning this object in the correct place. I was not using the getSceneObject(), getTransform() and setTransform() correctly - initially I added it all in one line, and later learnt that this was incorrect. Once I figured out my issue, I set the positions to the mole objects' centre, but the positioning was still off. I slightly altered the positioning by offsetting it in the X and Y axis.
For the multiplier, I needed to differentiate between when the multiplier is active, even though the numbers changed on the score increase object, that wasn't enough. Using Gemini, I added a piece of code that animates between 2 colours (different from the base colour) when the multiplier is active.
Accomplishments that I'm proud of
- I had a vision of this game, and it came out better than I had imagined.
- Implemented the leaderboard component in a complex game like this for the first time.
- Happy that I stuck with the 2D style within the Orthographic camera, because of figuring out how to layer all the assets.
- I built the game in such a way that it is customisable. I am happy about how the customisation side of it came out, because it is something that I am trying to continuously improve.
What I learned
- How to implement the Leaderboard component correctly
- How to store highscore data.
- How to animate colours of text within code.
- How to set the positions of objects relative to other objects within code.
What's next for Whack A Mole
I am pretty happy with the state of the game at this point; however, the next thing I would like to add/improve is the customisation aspect, so I can easily change it for other projects and client requests.
The main thing I would like to do is to adjust the code to dynamically add holes, moles and bombs so it automatically spaces them out and sets them up to look visually and logically correct. So I can have as many or as few holes as possible with the click of a button, instead of only being limited to 5 (Currently, I can only manually add and position these).
Log in or sign up for Devpost to join the conversation.