Procrastinator

Fall/2021

JavaScript  |  Creative Coding  |  Game

* Press "<--" or "-->" keys to move, press "space" to create excuses.

overview

In this project, I created a bitmap game of my procrastination problem. I utilized arrays and user-defined classes for this project and was able to better understand object-oriented programming. I also explored scene changings and used conditional statements to create events that interacted with the players of the game. This is by far the most comprehensive project and it integrates much knowledge I’ve learned before, which is also a great practice for me to test my understanding.

Technical components that I explored in this project:

- JavaScript Object & Dot Operator

- Mouse & Key interactions

- Class and Objects

- Array and Objects

- Switch Statements

- Collision Detection

- Splice()

 

Process

I wanted to create this procrastination game because I’ve personally experienced both procrastinating and not, and I feel lucky to quit being a procrastinator. I used to make up excuses to myself and keep pushing the work until the very end, pulling all-nighters to finish them. Yet that only resulted in higher anxiety levels and two extremely obvious “panda eyes”. Therefore, I used those elements to design my character in the game, who at the beginning looks joyous, but almost dead at the end after finishing all the work.

I specifically added dark circles to my character, referencing the previous me. I also used flashy colors in the second scene, because pulling all-nighters always feels like a blast to me and I had to use all my survival instinct to finish the work. Looking back at it, I’m so glad that I gave up on that habit, and can finish my work more efficiently with schedules. I hope this game can be used as a kind little warning to other procrastinators.

My initial design ideas and storyboards:

14b337d5-58e1-4723-84f1-8e5c6e96f2a1_1.jpg
14b337d5-58e1-4723-84f1-8e5c6e96f2a1_2.jpg
14b337d5-58e1-4723-84f1-8e5c6e96f2a1_3.jpg
14b337d5-58e1-4723-84f1-8e5c6e96f2a1_4 (1).jpg
 

reflection

Working on a larger project like this, I truly feel it is crucial to have a clear logic and plannings ahead of time. When there’re so many things to keep track of, it is very easy to get lost in my code, not to mention debugging. I began my project by typing comments and having a big picture in mind, such as what kind of functions should I create for this object, where do I put it, and how to trigger the next scene. After planning, I started to fill in the blank little by little, but it’s a lot easier to navigate through code with the planning done.

Another thing I learned in this project is to be creative with the codes to achieve what I want. There are times when I couldn’t think of a way to transition the scenes, and I came up with ways like changing the color of the text or the sizes, then using conditional statements to trigger the next scene. I’m sure there are more efficient ways of doing this, but I wanted to test myself with my understanding of the knowledge I’ve learned, so I used my way to solve those problems. Sometimes, the result is actually quite surprising. I feel being creative is really important to me in the future if I want to create something completely new in the field, despite the fact that there is still a lot for me to learn to achieve that level, it’s always good to train our creative mindset when possible.