As soon as we were introduced to the midterm assignment – i.e. make a game, I immediately knew that I wanted to make a game that involved a cat (I absolutely love cats). So I decided to make a game with the premise: “Oh no, my cat escaped into my brother’s room! Help me find him quick before my brother comes back from the bathroom!!” I would put a 1-2 minute timer, depending on how many items are in the space/how difficult it is to complete with trial and error.
The biggest struggle was trying to find an easy to understand code template for drag and drop an item within the canvas – once I figured that out with the help of the professor into making it a class, I was able to design the game how I wanted to. I tried making it look as much like a bedroom (with plausible decorations/furniture).
A discussion that I had with Jack when trying to get to instruct the game such that if the user clicks on the cat and it is not under any furniture/decoration, then change the screen to the winning screen. However, the drag and drop mechanism works like so:
There is a hidden small box where each item is placed onto and whenever the mouse hovers over this box, it switches from arrow cursor to hand cursor making it easy for the user to know when it is draggable. Each item has its own dimensions so only at the center of each item can it be dragged.
If I wanted the winning screen to only appear when the cat is not behind anything then it needs to not overlap with the box – considering that the box is small, this would not be feasible. In order for this idea to work, then the box would need to very specifically cover each item with all its curves, and have a specific box for each specific item since each item has their own dimensions. One small flaw of the game is that after the cat is clicked, even if it is behind an item, it would immediately change to the winning screen – so if the user were just clicking on random objects and not even dragging then they could win the game.
Nonetheless, after figuring out the main game screen and how to toggle between modes/screens (i.e. the instructions, actual game, winning the game and losing the game screens), I had to focus on how to integrate sound into the project. I needed to ask Jack for help in figuring out how to make my audio play only once, which led to making a hasPlayed variable. This variable and the timer is then reset every time the player returns to the main instructions screen.
It was important to me to have a timer on the screen – 1. to add suspense and stress 2. it is a fairly easy game, so I made the timer be 10 seconds. I had to figure out how to make the timer not flash as the countdown continued – but with a bit of changing a few variables here and there it all worked out.
Overall I am very proud and cannot believe I just made an entire game!! I cannot believe I kept at it and tried to understand each line of code one by one in order to make what I envisioned in my head happen. I’ve learnt so much and want to make more!
*sounds don’t work while embedded!*
Here it is: