Concept oVERVIEW
I couldn’t recall the exact moment of picking up a copy of “Diary of a Wimpy Kid,” but it has simply always been a part of my childhood. First and foremost, allow me to introduce the author of this masterpiece, Jeff Kinney. Kinney’s unique style breaks the norms of traditional literature/books. Unlike typical novels, his books use a diary format with personal writing and illustrations. The use of lined paper, childlike font, and unconventional chapter structure sets his work apart and thats what makes it so memorable. (source)
That being said, Inspired by the “Diary of a Wimpy Kid” books, I wanted my project to bring back those nostalgic feelings, with simple drawings and everything in black & white. My goal was to involve the user in the diary and make the project interactive, allowing them to feel like they were part of the story. So, I titled it “Diary of an NYUAD Kid” to grasp that mix of memories & relatable experiences. In creating my project, I initially planned to develop four games inspired by various elements of the “Diary of a Wimpy Kid” series, with an NYUAD twist. However, I narrowed down my focus to three main games: “Elevator Rush,” “Cheese Touch,” and “My Diary.”
Game Details
1. Menu
Despite my initial attempts, I encountered challenges in embedding the menu screen above. At some point, I managed to make it work with a few bugs, but ultimately, it didn’t function as intended (discussed in detail in another section below). Further, the design of the main menu page draws inspiration from the cover page of the “Diary of a Wimpy Kid” books. Clicking the “i” button reveals instructions for each game.
2. Elevator Rush
“Elevator Rush” is a game born from the frustration of waiting for elevators, especially during busy times like the 10-minute rush between classes in the C2 Building. You know, maybe the delays are intentional to nudge students towards taking the stairs, was this their plan all along? In the game, you control the elevator using the UP & DOWN keys, hurrying to pick up students so they’re not late for class. Every time a passenger gets picked up, a sound plays to signify success. The background music is the classic “elevator music” sourced from YouTube. With every student you pick up, you earn one point, but if you miss a student, you lose a point. To add difficulty, students appear and disappear quickly, and they are NOT patient. The game ends when the time runs out or if your score drops to -3. Upon game over, a screen pops up with the option to click to restart.
3. Cheese Touch
In the “Cheese Touch” game, inspired by the popular game played at Westmore Middle School in “Diary of a Wimpy Kid,” players aim to gather as many candies as possible while avoiding the dreaded Cheese Touch. In the original story, having the Cheese Touch makes someone a social outcast until they pass it on to someone else by touching them (source). Using the LEFT and RIGHT keys, the player must navigate the area while trying to gather candies and avoid the Cheese Touch. Additionally, when a player successfully collects candy, a cheerful audio plays to signify their success (+1 point). Conversely, if a player encounters the Cheese Touch, a sticky audio plays to indicate their loss (-1 point). The game continues until the time runs out or if a player’s score drops to -3, indicating they’ve had too many encounters with the Cheese Touch. Upon game over, a screen pops up with the option to click to restart.
4. My Diary
In the final somewhat game, titled “My Diary,” I wanted to capture the idea of doodling and scribbling found in “Diary of a Wimpy Kid.” This option allows users to paint on a canvas using colors inspired by the books. They can also change the brush size, erase the canvas, and save their artwork as a PNG file. To enhance the experience, each button plays a sound when clicked. Moreover, the save button triggers a different audio to signify that the image has been saved successfully. To further simulate the feel of real paper, I incorporated the sound of scribbles each time the user draws on the canvas. The main idea behind this “game” was to use audio cues to create a realistic experience for the users. Below are some of the images I have saved during the debugging process:
Visuals, Audios, & Resources
1. Menu
Background: by me using Procreate
Penguin Logo source
2. Elevator Rush
Background music source
Remaining audio source
Background: by me using Procreate, inspired by NYUAD
Characters: Diary of a Wimpy Kid
Chatgpt debugging: draw function (passenger spawn interval, passenger spawn, time) & Passenger class
3. Cheese Touch
Audio source
Cheese image source
Candy image source
Face image source
Game over image: by me using Procreate
Chatgpt debugging: obstacle & candy detection, draw function, audio errors (replay/pause)
4. My Diary
All audio source
Background: by me using Procreate
Colors: inspired by the “Diary of a Wimpy Kid” books
Chatgpt debugging: button effect & draw function
Challenges & Areas of improvement
One of my biggest challenges was attempting to merge all three games into a single JavaScript file, given that I have worked on them separately. Despite my best attempts, the complexities of combining multiple game modes within one file led to organizational/functional issues that remained unresolved. At some point it functioned with some issues, but my attempts to fix these problems led to further complications.
function draw() {
if (scene == "main") {
drawMenu();
} else if (scene == "game 1") {
drawGame1();
} else if (scene == "game 2") {
drawGame2();
} else if (scene == "game 3") {
drawGame3();
}
}
For “Elevator Rush,” I encountered several challenges, particularly in managing the spawning of passengers at specific intervals and ensuring they appeared on random floors, excluding the floor where the elevator was located (it did not look visually appealing, as if the passenger was already in the elevator, caused some quick flashes). Implementing this required generating random floor numbers while avoiding duplication with the elevator’s current floor. Additionally, I had to adjust the spawn intervals to balance between keeping the game challenging and preventing overwhelming/underwhelming spawns.
//spawn passengers
if (millis() - lastSpawnTime > spawnInterval) {
let floorToSpawn = floor(random(4));
if (floorToSpawn !== currentFloor) {
passengers.push(new Passenger(floorToSpawn));
lastSpawnTime = millis();
}
}
Another challenge came about when measuring the game screen and drawing assets in Procreate. Despite using Procreate’s grid assist feature, ensuring the correct proportions for each floor was pretty tricky. Moreover, this caused the elevator to appear either too small or too large on certain floors, hence I adjusted the elevator’s dimensions until it fit within each floor’s layout.
//draw elevator
let elevatorWidth = 55;
let elevatorHeight = floorHeight - 2;
let elevatorX = width / 2;
image(elevatorImage, elevatorX - elevatorWidth / 2, elevatorY - elevatorHeight / 2, elevatorWidth, elevatorHeight);
As for “Cheese Touch,” one of the challenges was precisely detecting the cheese touch and candy, which relied heavily on precise x and y coordinate calculations, leading to many trials & errors to create accurate collision detection.
collects(candy) {
return (
this.x < candy.x + candy.w &&
this.x + this.w > candy.x &&
this.y < candy.y + candy.h &&
this.y + this.h > candy.y
);
}
hits(obstacle) {
return (
this.x < obstacle.x + obstacle.w &&
this.x + this.w > obstacle.x &&
this.y < obstacle.y + obstacle.h &&
this.y + this.h > obstacle.y
);
}
Additionally, initial attempts to use a notepad background encountered a persistent issue where the screen froze upon game restart attempts, despite multiple efforts to solve the problem through redraws. This issue likely stemmed from an error in managing the background image or memory management concerns. Consequently, I resorted to using a white background instead.
Overall, I faced many challenges and made some mistakes along the way. Looking back, I realize there are ways I could have done better. For example, I worked on each game mode separately, but when I tried to put them all together, they didn’t work well. Perhaps it wasn’t the best idea to start working in separate JavaScript files. In terms of the games, I also could have added extra obstacles to make each game more challenging (due to the simplicity, I resorted to creating more than one game.). For instance, in the “Cheese Touch” game, I could have added bonus elements that had power-ups. And in all the games, I could have included a leaderboard, using CSV files, to track score.
Conclusion
All in all, developing this project based on “Diary of a Wimpy Kid” presented a lot of challenges…integrating the menu screen with other screens was difficult, and attempts to merge all games into one JavaScript file were unfortunately unsuccessful. However, I managed to incorporate at least one shape, one image, one sound, on-screen text, and Object-Oriented Programming into the project. The menu screen initially provided instructions when the “i” button was clicked, but there were issues directing to the games (yet, each game did have a start & restart option). After completing each game experience, a restart option was available by clicking the screen without restarting the sketch, except for the last game, where users needed to click “erase.” Safe to say that I’m proud of my project, the visuals, and the menu design for being accurate & fulfilling my vision, especially in the elevator game, which initially seemed ambitious.