× Haoshu #1 The Lost PenBox #2 STAR TREE Generator #3 Match Clock #4 Lonely Universe Monster #5 Chinese Name Mondrian Encoder #6 Put your mask on! #7 A Day with Tech #8 Put your mask on! v2.0 #9 Daily Laughter #10 Apple Global Suppliers #11 Nested For Loop Visualizer
☰ Menu

Project #7 Bitmap Game | A Day with Tech

Click here for a better experience.

Designed by Haoshu Yang.


The technological developments have led to the generation of negative effects. According to Fuzzy Logic Modelling Of The Impact of Using Technology On Anxiety And Aggression Levels Of Students, extended and uncontrolled use of technology inevitably cause psychological, physical and behavioral disorders.

In order to help more people realize how they rely on the technology at hand in their daily life that may bring out increasing tech anxiety, I develop this game to simulate a particular day’s life as a college student.

The player firstly gets up at home in the morning and buys breakfast. Then, he drives to school along the road. Next, he takes a class at school and has meal from the food stalls near the school. Finally, he goes back home, has some entertainment and goes to sleep. In such 4 scenes including home in the morning, road, school and home at night, player collects coins and answers the questions about whether they tend to use the technology or not in a certain circumstance. At the end of the day, a score from previous answers is shown and the game tells you how you depend on the technology and how you are likely to be tech anxious.


It’s a lot of work!

Unlike other game engine, p5.js doesn’t have the specific functions for the game elements like operate animations, collision detection, build-in interface, game nodes, etc. So, I have to figure them out all by myself.

Specially, I want to introduce my ways of collecting coins (showing questions) and detecting collision.

For collecting coins, each coin is built as an object with parameters including showing status, coordinates, questions, question types, special operations for different answers and new coins to add. Then, when the player ‘intersects’ with the coin, questions, interfaces and following operations are shown based on those parameters.

For detecting collision, I manually define the rectangles as obstacles with diagonal coordinates. So, when the player is moving, the game will calculate whether players rectangle is about to intersect with the obstacle rectangles according to the moving direction. As an example, the obstacle rectangles in the first scene, home, is shown as red rectangles below.