Sarah Habbour
A basic drag and drop style game which uses a class constructor to define the draggable objects. When I first discovered internet games as a child, I was obsessed with dress up games and always dreamed of making my own; this project is a culmination of that dream (almost- it’s a cake and not a doll).
When I first proposed my project, I had envisioned a dress up game featuring my favorite comic book characters where you could click a button to start and end the game. My explicit goals were to have:
- A start screen with clickable button,
- An actual game screen with the character to be dressed and the draggable items next to them,
- A few items that are actually draggable, and
- Clickable button leading to the end screen.
By the time the milestone rolled around, I realized that it would be very hard and time consuming to find/create the images I needed for a dress up game, and instead I settled for a cake decorating game. Even though I made this alteration to save some time, I still did not get as much done as I had originally planned. All I had working was the bare bones: the background, a few cake decorations, and the clickable directory. I revised my goals to have:
- A start screen with clickable button,
- An actual game screen with the cake and the draggable items next to it, and
- Cake decorations that are draggable and can be placed on the cake.
I thought my revised goals were easy, but I was wrong. I am proud of what I have accomplished, but I still didn’t meet the goals I planned for myself. I have succeeded in creating a drag and drop cake decorating game, but I didn’t create any buttons for starting and ending the game.
Coding the drag and drop feature was a lot harder than I expected. I spent a lot of time and a lot of trial and error trying to figure out how to do things. I first practiced creating draggable shapes on p5.js following some examples from the p5 site. The hard part was figuring out how to replicate this dragging on a bunch of different pieces, without having to make a seperate code for each decoration.
I first tried just creating an array, but this made it so that everything dragged at once. Frustrated, I started watching TheCodingTrain’s video on arrays, only to stumble into another video on classes. This is where a new valuable too comes in: class constructors. This tool allowed me to create a template for what it means to be a decoration; instead of having to individually account for each decoration as a separate variable, I could just think of them as one type. A lot more trial and error was involved in trying to figure out image paths and offsets and such; without Mark’s help I would have never noticed a small and easy fix that was preventing the mouse from actually clicking and dragging. Ultimately, I was able to create a drag and drop game even if it didn’t have all the fancy stuff I originally envisioned for it.
TheCodingTrain’s YouTube Channel:
His videos were helpful for reviewing material we already went over in class and learning new concepts like class. This is the specific playlist that I found useful (from ‘chapter 6’ onward): https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
P5.js References/Examples:
Images: