Concept & Inspiration.
For my midterm project, I got inspired by the mini-game I used to play as a child online: a treasure hunt that trains memorisation.
As a huge fan of Lilo & Stitch animated feature, I decided to create an authentic version of the game with my favourite character. The (so fat intended) rules of the game are as follows:
Stitch has to collect 5 shells, moving by one sand square with each step from start to finish. The sand squares can hide hazards – dead fish bones – which make the progress fall down to 0 and restart the game.
At the beginning of the game, the player has 5 seconds to take a look at the “revealed” danger zones. After that, all sand squares will be closed, and players will have to rely on their memory not to entrap themselves into a dead fish bone on the way.
Below, I attached two images which I designed in Figma: (1) showing the game interface after 5 seconds, and (2) showing the interface at the very beginning, when the dead fish bones are just revealed.
Uncertainties.
As we have never touched upon working with a timer inside p5.js, I am unsure if I will be able to implement the timer in the way I initially wanted to. Nonetheless, I believe that I will be able to find a solution that will eventually satisfy me (even though it might not be according to what I initially planned).
Also, I had perpetual struggles with uploading images to my canvas throughout the process of working on the first draft. I am still figuring out how to fix this issue, because otherwise some of the icons (including the character) and the background can suddenly disappear during the actual game.
In my first draft of the project, I have only managed to create the user interface (without some of the icons) and make some kind of movement for Stitch with the key arrow presses. I have also included the soundscape, using the music from the original Lilo & Stitch film: to turn it off, user can click the mouse at any part of the canvas.
Embedded Sketch.
Key functions to implement:
-
- Add the missing icons (including the shells & fish bones).
- Make the music respond to the button.
- Make a pop-up window with game instructions.
- Implement a timer (or its equivalent).
- Make Stitch move on the sand squares more precisely.
- Add a sound effect for the failure.
- Make the fish bones appear as soon as Stitch touches the sand squares with them.
- Make the shell count as soon as Stitch touches them.