One word “Finally”! This project was one of the worst ones I’ve worked on in a long time, I was met with error after error and pure confusion more than once.
But in the end and after millions of trial and error and hours in the lab this is my little baby and I couldn’t be happier and prouder of how it turned out:
Link to the full screen version (Zoom out to 60% or 75% for the best experience): https://editor.p5js.org/nourhane/full/vzSr13gm7
Whack-a-mole with a twist, I choose to focus a lot on the visuals of the game to make it reach the vision I had in mind but furthermore, I choose to add new features that the normal whack-a-mole didn’t have like bombs, and magic worms.
Highlights:
The game begins at the main menu, inviting players to dive into the frenzied world of moles, bombs, and worms. Clicking on the screen transitions to an instruction page, which succinctly explains the game mechanics and objectives.
if (this.gameState === "mainMenu") {
if (mouseY > height * 0.6) {
this.gameState = "instructions";
}
}
Moles sporadically appear from their designated holes, and the player must click on them to score points. However, there’s a twist! Occasionally, bombs disguised as moles pop up, and clicking them deducts lives. Additionally, friendly worms grace the screen, offering bonus points if clicked.
One of the features I’m particularly proud of is the random appearance logic of moles, bombs, and worms. It keeps players on their toes, ensuring every game session is unpredictable and challenging.
if (frameCount % 60 === 0 && game.gameState === "playing" && !game.paused) {
let moleToShow = random(game.moles);
moleToShow.visible = true;
setTimeout(() => {
if (!game.paused) {
moleToShow.visible = false;
}
}, random(500, 1500));
}
if (frameCount % 80 === 0 && game.gameState === "playing" && !game.paused) {
let showWorm = random() < 0.15; // 15% chance to show the worm
if (showWorm) {
game.worm.resetPosition();
game.worm.visible = true;
setTimeout(() => {
if (!game.paused) {
game.worm.visible = false;
}
}, random(500, 1500));
}
}
}
The game’s immersive experience is further enhanced with dynamic sound effects, creating an auditory feedback loop that’s satisfying and engaging.
Issues faced:
One of the main issues that took me hours to figure out was the score. It wasn’t increasing no matter how many times I clicked on the mole even though the mouse was telling me that it was clicked. I tired everything to fix it and used thousands and thousands of console.log statements to try and pin point the issue but nothing, looked on the internet, asked unix tutors, no one was able to figure it out, till it jumped to me “THE HAMMER, THAT’S THE ISSUE, IT’S NOT ALIGNED WITH THE MOUSE” at that moment I couldn’t feel happier but also dumber because it was such an easy fix yet i had to rake my mind and go crazy to find it.
Another main issue I had was with the sound, for some reason it kept giving me “undefined” and crashing my entire game and once again after hours of looking and console.loging, the issue was easy, I didn’t play the sound where it should. I was loading but not playing them in their respective spots (stupid right?)
Improvement:
In the end I’m so so so proud of it and couldn’t be happier with how it turned out. But no project or game is ever done, there always room for better and in this case they could be:
Game Dynamics: While the game offers a good mix of unpredictability with the random appearance of moles, bombs, and worms, adding more diverse game elements or increasing levels of difficulty could enhance the player’s experience. Introducing different types of moles with varying speeds, for instance, or adding power-ups and penalties, could make gameplay more dynamic and engaging.
User Interface and Graphics: The user interface, though functional, could benefit from a more refined design. Enhancing the graphics, smoothing out animations, and possibly introducing a thematic storyline could make the game more immersive. A more intuitive and interactive menu system could also be introduced, allowing players to adjust settings, view high scores, or access tutorials
Mobile Compatibility: Given the growing number of mobile gamers, optimizing the game for touch controls and ensuring it’s responsive to different screen sizes would be a significant improvement.
Conclusion:
However, considering my coding level and how far I got from the beginning and how much effort I put into it. Whack-a-mole Land is easily one of my favorite projects I worked on and I’m so proud of it and of myself as well.