Day & Night Game

Type Canvas Game
Timeline April 2024
Tools p5.js / JavaScript / HTML / CSS
My Role Web Designer & Developer

Overview

Day & Night Game is an interactive web game I designed and built with p5.js. The player moves between a daytime world and a nighttime world, collecting items from each to nurture a plant from sprout to bloom. What looks like a simple platformer is shaped around a quiet allegory about growth.

A short gameplay clip

How to Play

I kept the controls simple so the focus stays on exploration. The game runs on four inputs and one goal: collect every item across both worlds, then return to the plant to complete its bloom.

  • Use arrow keys to move and jump.
  • Press the spacebar to switch between day and night.
  • Collect items visible during the day or night to progress.
  • After collecting all seven items, walk to the plant to complete the game.

Design

Two Sides, One Plant

I designed the game around two worlds that the player can switch between at any time. Daytime offers sunlight, air, time, and pollination. Nighttime offers seeds, soil, and watering. Neither side is enough on its own. Only by moving between the two and gathering from both does the plant grow.

Day and night comparison — items visible in each world

Plant Growth

I wanted the plant's growth to feel earned. It moves through seven stages, from Sprout to Flower. With every item collected, the trunk grows taller and new branches extend from it, until leaves emerge and the final flower blooms.

Plant growth — seven stages from Sprout to Flower

Each Bloom Is Unique

I built each branch to grow at a random angle, so no two playthroughs end with the same flower.

Four different blooms — each playthrough produces a unique flower
Play Day & Night Game