Captain’s Fishing Adventure

Video game

SEPTEMBER-DECEMBER 2024

Screenshot of the game. A rhythm game interface is displayed with four columns corresponding to each arrow direction. The game has a fishing theme and there is an image of a cat fishing.

Programs used

Visual Studio Code, Photoshop

Project Description

We were tasked to create a website with any topic we want, so of course I chose to make a game! I decided to try and create a rhythm game using JavaScript, CSS and HTML. I used a mix of W3Schools and StackOverflow to help me with issues when I got stuck but overall, I am proud of what I was able to achieve!

I started the project with many different ideas and while I was not able to achieve all of them, I was able to obtain a working final project. I learnt more about time management and product scope thanks to this, and now I know that while doing everything I plan to is great, I also need to prioritize to at least get a minimum viable product, before starting on perfecting those details.

Special thanks to:
Profispiesser on freesound for the wave sounds
seth_makes_sounds on freesound for the music

Click here to play it yourself!

Tip: there are 3 types of fish and each have 3 available grades based on your performance!

Sketches of the game with ideas scribbled around

gif of an orange cat wearing a life jacket and hat while fishing

Gif of a cat happy of the fish it just caught

Process

I started with sketching out ideas for a main character. Once I had Captain, I knew exactly what vibe and aesthetic I wanted the game to have. I then started making spreadsheets of all the different fish and calculating the odds of fishing each one. Unfortunately, most of this ended up not being used as I did not have time to implement all 13 different fish I had planned.

I then created some wireframe sketches to help me visualize what the UI would look like. I proceeded to code it using CSS and HTML and then started working right away on the programming. During my testing phase, I preferred to keep each element a different colour so I could quickly tell if something was off.

For the artwork, I used Photoshop and the timeline function to create gifs that I embedded into the game with CSS.