This is a submission for the June Solstice Game Jam
What I Built
TURNING POINT is a solstice‑inspired puzzle platformer built with HTML5 Canvas and WebAudio. The core mechanic flips the world between light and darkness every 21 seconds. In the light, platforms are solid; in the dark, they fade into shadow and become intangible. Players must time movement and jumps to reach a glowing solstice altar and progress through multiple levels.
The game is intentionally symbolic:
Solstice — the 21‑second flip is a literal turning point of day and night.
Pride — transformation and self‑revelation are echoed in color and music changes.
Juneteenth — the passage from shadow toward light is a subtle metaphor for liberation.
Time — the mechanic forces players to plan around a repeating cycle.
Playable demo: https://codepen.io/editor/Dancodepen-io/pen/019cd8fc-ebb7-7d47-9d2e-ad6bc6425233
Video Demo
Short demo (recommended): record a 60–90 second clip showing the title screen, one full flip cycle, a timed jump across disappearing platforms, and reaching the altar to complete a level. Add a brief voiceover describing the flip mechanic and the symbolic intent.
Code
Where to find the code
CodePen demo: https://codepen.io/editor/Dancodepen-io/pen/019cd8fc-ebb7-7d47-9d2e-ad6bc6425233
Key files and snippets included in the demo
index.html — canvas and UI container
styles.css — pixel rendering and layout
game.js — game loop, physics engine, level loader, sprite renderer, title/win screens
audio.js — WebAudio chiptune sequencer and flip‑driven brightness control
How I Built It
Architecture
Single HTML5 Canvas for rendering; all visuals are drawn procedurally for a compact CodePen build.
A small custom physics engine implements:
Horizontal acceleration and friction
Gravity and variable jump height
Coyote time for forgiving jumps
Collision detection only active in the light state
Levels are data objects (arrays of platform definitions and altar coordinates). Loading a level replaces the platform array and repositions the altar.
Game states: title, play, win. Title screen draws the pixel logo and waits for a keypress to start.
Visuals
Pixel art style achieved with ctx.scale and image-rendering: pixelated.
A procedurally drawn 8×8 pixel logo and a 12×12 player sprite (three frames: idle, walk, jump) are rendered on the canvas so the whole project stays self‑contained.
Audio
WebAudio API powers a tiny chiptune sequencer:
Two oscillators (square bass, sawtooth lead) with a lowpass filter and master gain.
A simple step sequencer plays an 8‑note melody in 8th‑note steps.
setBrightness(bright) adjusts filter cutoff and master gain when the world flips, so the soundtrack brightens in light and softens in dark.
Controls
Left / Right arrows — move
Up arrow — jump (coyote time allows forgiving timing)
Any key — start from title screen
Audio starts on first user gesture to satisfy browser autoplay policies.
Design decisions
The 21‑second flip is literal and memorable; it’s long enough to plan but short enough to create tension.
Platforms only colliding in the light forces players to think ahead and use momentum rather than relying on static safe zones.
Pixel art and chiptune keep the aesthetic compact and evocative while remaining easy to author procedurally.
Assets Included
Logo — 8×8 pixel pattern drawn on canvas; color flips with the world state.
Player sprite — 12×12 pixel frames (idle, walk, jump) drawn procedurally.
Soundtrack — short looping chiptune built with WebAudio; reacts to flips by changing filter and volume.
Multi‑Level Structure
Levels are defined as objects with platforms and altar fields.
Progression: reaching the altar loads the next level; finishing the last level shows a win screen.
The demo includes two sample levels; the structure supports adding more levels by appending to the levels array.
Prize Category
I’m submitting to the following categories:
Best Ode to Alan Turing — optional entry rationale: the game’s mechanics are deterministic, timing‑based puzzles that reward logical planning and pattern recognition, echoing computational thinking and algorithmic problem solving.
Best Google AI Usage — not submitted: this build does not use external AI; it’s a handcrafted, lightweight demo. (If desired, I can add a small AI‑driven hint system in a later iteration.)
How to Run Locally
Open the CodePen link above and press any key to start.
For local development, copy the HTML/CSS/JS into a simple static project and open index.html in a modern browser.
Ensure you interact with the page (press a key) to start audio due to autoplay restrictions.
Future Improvements
Add more levels with new platform types (moving platforms, one‑way platforms, timed switches).
Add particle effects and a short victory jingle on level completion.
Expand the narrative with short text vignettes between levels that explore solstice, Pride, and Juneteenth themes more explicitly.
Optional: an accessibility mode with longer flip intervals and color‑blind friendly palettes.
Credits
Code and design — you (author)
Assets — procedurally generated in the demo (logo, sprite, soundtrack)
Special thanks — the June Solstice Game Jam organizers and the DEV community for hosting the challenge
Short Play Tip
When the world is about to flip, look for the altar glow and plan a momentum jump: sometimes you must jump before the platform becomes solid so you land when the world flips back to light.
Top comments (0)