Link to sketch: https://editor.p5js.org/Hazpaz/full/H-g4lq8jJ
Concept and inspiration
For this project, I’ve drawn inspiration from a childhood game my brother used to play, called the “Fishing game.” It involved catching fish with a fishing hook within a time limit. I’ve adapted this concept into my own version of the game, adding some twists and modifications. Instead of a traditional fishing game with a box of fish, my game features fish scattered randomly across the canvas. The objective remains the same: capture each fish individually using a fishing hook (the mouse) and deposit them into a fish bowl before time runs out. This adaptation allows for a unique gameplay experience while still capturing the essence of the original game.
How it works
1. Starting:
– When you first open the game, you’ll see a logo on the screen.
– To start playing, you just need to click anywhere on the logo.
2. Instructions Screen:
– After clicking the logo, you’ll see some instructions on how to play the game.
– These instructions include how to choose the number of fish in the game and how to start playing.
3. Gameplay:
– Once you’re ready, the game starts.
– You’ll see a background with a fishbowl and some fish swimming around.
– Your goal is to catch all the fish and put them in the fishbowl before time runs out.
4. Catching Fish:
– To catch a fish, you just need to move your mouse cursor close to it.
– When you’re close enough, the fish will be caught on your fishing hook.
5. Ending the Game:
– The game ends when either you catch all the fish and put them in the fishbowl or the timer runs out.
– If you catch all the fish in time, you win!
– If time runs out before you catch all the fish, you lose.
6. Restarting the Game:
– If you want to play again, you can press the Enter key to restart the game.
– If you want to go to the home page (instructions page) click on any key.
7. Music:
-Throughout the game, there’s background music to enhance the gaming experience.
-There’s different music for when you win or lose, adding to the atmosphere of the game.
8. Fullscreen Mode:
– You can also toggle fullscreen mode by pressing the ‘f’ key.
9. Game Elements:
-The game includes various elements such as shapes (the ellipses behind the slider), images (fish, fishing hook, fish bowl, backgrounds), text, and sound to create an immersive experience.
– The game is also developed using Object Oriented Programming, with classes called “Fish.js” and “Timer.js”.
Highlights of some code that I’m particularly proud of
The playGame() function is responsible for handling the main gameplay dynamics such as the timer, fishbowl, fishing hook and music. I’m proud of how I tackled most of the logics of the game in this function. Here is the code snippet of the function.
// Play the game function
function playGame() {
image(gameBg, 0, 0, windowWidth, windowHeight); // The background of the game
timer.update(); // Update timer
numFishiesSlider.hide(); //hides the slider
// Draw time left at the top center of the screen
textSize(50);
textAlign(CENTER, CENTER);
fill(0);
text("Time left: " + timer.getTime() + " seconds", windowWidth / 2, 100);
// Draw fish bowl
image(fishBowl, windowWidth / 2 - 50, windowHeight / 2 - 50, 200, 200);
// Draw fishing hook
image(fishingHook, mouseX - 25, mouseY - 25, 70, 70);
// Display and update fishies
for (let fish of fishies) { // Checks each element of the "fishies" array
fish.display();
// Hooking the fishies to the hook
if (dist(mouseX, mouseY, fish.x, fish.y) < 25) {
fish.hooked = true;
}
if (fish.hooked) {
fish.move(mouseX, mouseY); // The fish is hooked to the hook
}
}
// Check if all fishies are inside fish bowl
let allFishiesInside = true;
for (let fish of fishies) {
if (!fish.insideBowl) {
allFishiesInside = false;
break;
}
}
if (allFishiesInside) {
gameFinished = true;
timer.stop();
//play music
if (timer.timeLeft > 0) {
victoryMusic.play(); // Play victory music if game finished before countdown ends
gameMusic.stop(); // Stop background music
}
else {
losingMusic.play(); // Play losing music if countdown ends before game finished
gameMusic.stop(); // Stop background music
}
gameState = 'end'; // Change to end game state
}
// Check if time is up
if (timer.getTime() === 0) {
gameFinished = false; // Player loses if time is up
gameState = 'end';
losingMusic.play(); // Play losing music
gameMusic.stop(); // Stop background music
}
}
The continuation of the playGame() function is the displayEndscreen() function which displays the end screen on the basis of winning or loosing the game. At first, I had trouble understanding how this code worked, but eventually, I figured it out and got it to function properly.
//function for the endscreen
function displayEndScreen() {
fill(255);
textSize(50);
textAlign(CENTER, CENTER);
if (gameFinished == false) {
//displaying that the player lost the game
fill('#F44336');
background(gameOver)
// text("Game Over!", windowWidth / 2, windowHeight / 2);
text("Time left: " + timer.getTime() + " seconds", windowWidth / 2, windowHeight / 2 + 280 + 60);
}
else {
//displaying that the player won the game
fill('rgb(16,96,16)');
background(win)
// text("You WIN!", windowWidth / 2, windowHeight / 2);
}
// instructing the player on how to restart the game
textSize(50);
fill('#710404');
text("Click Enter key to restart", windowWidth / 2, windowHeight / 2 + 570);
text("Click any key to go to Home page", windowWidth / 2, windowHeight / 2 + 620);
}
Challenges with the project
1. Implementing the functionality to drag and drop each fish individually to the fish bowl has posed a significant challenge.
2. Providing users with the ability to select their preferred difficulty level by choosing the number of fishes in the game: I initially attempted to let users input the number of fish they wanted using a text box, but it didn’t work as expected. So, I switched to using a slider instead. Although it was challenging to code initially, I refined the logic and eventually got it to work.
3. Difficulty in adjusting the timer according to the number of fish that the player inputed.
4. Making the whole experience of the game in full screen posed a significant challenge for me, forcing me to change some design choices for the game.
Future Improvements
1. Allow players to customize their fishing hook or fishbowl with different designs or colors.
2. High scores boards for each levels.
3. Enable users to drag the fishes individually to the fish bowl for a more interactive experience.
4- Make the game a bit more responsive to the screen size.
5. Add more colors and deigns to the overall design of the game to make it more aesthetic.