Waning Sun — a light-ray puzzle game

This is a submission for the June Solstice Game Jam.

Play it right now

A brief background

I built Waning Sun, a lightweight browser puzzle game, loosely inspired by the setting of All Summer in a Day by Ray Bradbury.

All Summer in a Day takes place on another planet. The main character, Margot, lives on Venus where the sun comes out for only one hour every seven years. Today is the big day, and everyone is eager to see it. Margot, a nine-year-old student, is the only child in her class who still remembers the sun. Struck with jealousy, her classmates lock her in a closet during the only hour of sunlight they'll get for the next seven years.

The June solstice made me think back on this story. For half the planet it's the longest day of the year, and for the other half the shortest. Days like that are a reminder of how much we value sunlight when it arrives in such small quantities.

What I built

Around that idea of treasuring sunlight, I built the puzzle game Waning Sun.

When the game starts, you're placed in the first of eight rooms. You complete each room by bending a beam of sunlight until it reaches every receptor. As you progress, the rooms get harder. There are tighter routes, more receptors that must be lit from specific directions, and a prism that splits one beam into two.

Here's the catch: every reflector you place spends from a single, limited reserve of daylight that carries across the entire game. Solve rooms inefficiently and you'll run out before the end - you miss the hour of sun and have to wait another seven years. Solve them with as few pieces as possible and you reach the surface in time to stand in the light.

Video demo

Code

How I built it

This game is deliberately lightweight. There's no framework; the whole project lives in a few files of HTML, CSS, and JavaScript. The puzzle board is drawn on an HTML5 canvas, while the menus and cutscenes are plain HTML and SVG. The only external files are the audio.

Each level is stored as a JavaScript object with parameters for the starting light source, the wall locations, the receptors, and whether the prism is allowed.

All styling lives in 'styles.css', applied through 'waning-sun-game.html', which acts as the index file. 'game.js' holds the entire flow of the game. A few of the more interesting functions:

• 'trace' — walks the beam through the grid cell by cell and decides what happens based on what it hits: a wall stops it, a mirror reflects it, a prism splits it in two, and a receptor lights up.
• 'reflect' — given the beam's incoming direction and a mirror's orientation, returns the outgoing direction.
• 'draw' — renders the room: grid, walls, beams, and receptors.

This project was planned, developed, and completed with Claude Opus 4.8.

Best Google AI usage

Google's Lyria 3 Pro model was used to generate the background music and the click and chime sound effects. Here's an example of a prompt I used in Google's playground to generate the background track:

"Slow, minimalist ambient instrumental for a contemplative puzzle game. Sparse, lonely solo piano playing soft, widely-spaced notes over a bed of cold, drifting synth pads. A faint, distant music-box melody appears now and then like a half-remembered memory. Quiet field-recording rain and far-off thunder underneath everything. Melancholy but gently hopeful, patient and unhurried, around 60 BPM. No drums, no percussion, no vocals. Seamless, loopable, low-key background texture that never demands attention."

Inspiration

I highly recommend reading All Summer in a Day if you haven't.
Here's a link.

Sources

• Google's Lyria 3 Pro model
• Claude Opus 4.8
• All Summer in a Day by Ray Bradbury