I made some significant changes to my p5.js game, which I’ve now named “Pop Frenzy”. One of the key updates was the addition of a menu feature, aiming to improve user experience. At first, I attempted to use a while loop to transition between game states, but I ran into some issues when trying to create a final screen for game loss. To address this, I opted for if statements and introduced a variable called “choice” to switch between the menu, game, and game-over screens. This approach allowed for smoother transitions and better screen management.
In terms of visuals, I decided to dynamically change the game screen’s color intensity. As the player loses more balls, the screen shifts from a vibrant red to a darker, more intense shade. This alteration effectively conveys a sense of rising challenge and urgency, heightening player engagement.
In addition, I took the initiative to incorporate various sound effects, breathing life into the gameplay. I included sounds for button clicks, ball pops, game-over scenarios, and even background music to create a more immersive experience. This auditory dimension adds depth and excitement to the game.
Here’s a screenshot of the final loser screen where the player is given the option to either go to the menu or press the shout button that outputs a sound(merely for fun interactivity).
The Menu Screen:
To make things look more neat, I went with a blue title to match everything. As well as, adding some text of the description of the game to get started.
I incorporated a screen allowing players to pause or resume the game by pressing a designated key, which in my case is the escape key. This functionality was achieved by implementing the built-in functions loop()
and noLoop()
from p5.js. When the escape key is pressed, noLoop()
is executed, causing p5.js to halt the execution of the draw
function. Subsequently, when escape is pressed again, the game seamlessly resumes from where it was left off.
To facilitate the addition of a paused menu screen, I strategically placed the function containing the loop()
and noLoop()
calls at the end of the entire code. This ensures that when the escape button is triggered during gameplay, one final draw cycle occurs before suspension. Within this concluding draw cycle, p5.js generates a screen displaying the “game paused” message. This approach ensures a smooth transition between active gameplay and the paused state.
Here’s a snippet of that function:
function keyPressed() { if (keyCode === ESCAPE) { if(balllost==8) { gamePaused=false; } else { gamePaused = !gamePaused; // Toggle gamePaused variable } if (gamePaused) { noLoop(); // Pause the game } else { loop(); // Resume the game } } }
The initial ‘if’ statement basically ensures that if the escape button is pressed in the loser screen, the draw function will still keep looping and won’t cause issues. Since the player already lost, there’s no need for a pause screen at the loser screen.
Overall, I’m quite pleased with how these modifications have elevated the game’s overall experience. The combination of refined visuals, dynamic color shifts, and a diverse range of sound effects contributes to a highly engaging and immersive gameplay. Adapting to challenges along the way has been a learning experience, and I’m proud of the creative and technical progress I’ve made in this project.