This is a submission for the June Solstice Game Jam
What I Built
A grid-based laser decryption puzzle where you rotate mirrors to route colored light through portals, filters, and unstable "Solstice Drift" systems before the puzzle rearranges itself.
Solstice Crypt is a real-time optical decryption puzzle where players rotate mirrors to route and combine colored light beams through unstable grid systems. Built entirely in vanilla HTML/CSS/JS with zero dependencies, the game features 8 progressively challenging sectors, a Creative Lab level editor with shareable cipher codes, optic portals, wavelength filters, and a full procedural audio synthesizer.
How It Connects to the Theme
🌞 June Solstice - Light & Dark:
The core mechanic is light itself. Players manipulate beams of light across a dark grid. The signature "Solstice Drift" mechanic represents the instability of the solstice transition - certain mirror nodes automatically rotate over time, threatening to undo your carefully aligned paths. You must route active beams through drifting nodes to "lock" them in place with an Optical Lock, stabilizing light against encroaching darkness.
🏳️🌈 Pride - Color Synthesis:
The game's puzzle logic is built on additive color mixing - the physics of light itself. White light splits through prisms into Red, Green, and Blue. Players must then route and recombine these primary beams to synthesize secondary colors:
- Red + Blue = Magenta
- Red + Green = Yellow
- Green + Blue = Cyan
- All three = White
Each color is a bitwise flag (R=001, G=010, B=100), making the Pride spectrum a literal gameplay mechanic, not a cosmetic overlay.
💻 Alan Turing - Code-Breaking:
The entire UI is framed as a retro cryptographic terminal. Players "decrypt" each sector by solving optical logic gates. The narrative console displays Turing's quotes on computation and intelligence, contextualizing each puzzle as a code-breaking challenge. The grid itself functions like a physical Turing machine - deterministic, state-based, and solvable through systematic logic.
Video Demo
A visual walkthrough of all 8 sectors demonstrating: mirror rotation, prism splitting, color synthesis, portal tunneling, wavelength filtering, drift locking, and the Creative Lab level editor.
Code
GitHub Repository:
kanyingidickson / SolsticeCrypt
Decrypt the Light
🌞 Solstice Crypt - Decrypt the Light 🏳️🌈
Solstice Crypt is a real-time, responsive optical decryption puzzle game built entirely in vanilla HTML5, CSS3, and JavaScript (ES Modules) with zero dependencies. The game is played inside a retro-futuristic terminal UI with gorgeous glassmorphic styling, glowing laser beams, CRT scanlines, and real-time audio synthesized procedurally using the Web Audio API.
Route and split colored light beams through a grid - using mirrors, prisms, portals, and filters - to match receiver requirements before the system drifts.
🎮 Play the Game
- GitHub Repository: https://github.com/kanyingidickson/SolsticeCrypt
- Live URL: https://kanyingidickson.github.io/SolsticeCrypt
🧠 Core Gameplay Mechanics
- Optical Routing (Rotate Verb): Click or tap any highlighted grid tile to rotate it 90 degrees clockwise. This changes the direction of mirrors and splitter prisms.
- Color Decomposition (RGB Prisms): Guide white light into a prism to split it into its component wavelengths: Red, Green, and Blue.
- Additive…
🚀 How to Play
Option 1: Run Locally
git clone https://github.com/kanyingidickson/SolsticeCrypt.git
cd SolsticeCrpty
npm install
npm run dev
Open the URL shown in terminal (typically http://localhost:5173/).
Option 2: Play Online
Controls
- Click any highlighted tile to rotate it 90° clockwise
- Arrow Keys to navigate the grid cursor
- Space / Enter to rotate the selected tile
- Goal: Route the correct color beam into each receiver
- Watch the drift timer - lock drifting nodes before they rotate!
- After completing Sector 08, unlock the Creative Lab to design your own puzzles
How I Built It
Tech Stack
| Layer | Technology | Why |
|---|---|---|
| Rendering | HTML5 Canvas | Zero-dependency 2D graphics |
| Logic | Vanilla JavaScript (ES Modules) | No framework overhead, instant iteration |
| Styling | Vanilla CSS | Glassmorphic terminal aesthetic with CRT scanlines |
| Audio | Web Audio API | Procedural sound synthesis - no audio files needed |
| Build | Vite | Fast dev server and production bundling |
| Fonts | Google Fonts (Outfit + Share Tech Mono) | Modern retro-futuristic typography |
Core Engineering Decisions
1. Deterministic Raycasting Engine
The light propagation system uses an iterative BFS queue - not recursion - to trace every beam path. Each ray state is tracked as (x, y, dx, dy, color) in a visited set, which provides a hard guarantee against infinite reflection loops. The engine recalculates all beam paths on every single tile rotation, ensuring the player always sees a perfectly accurate, real-time simulation.
2. Bitwise Color Composition
Colors are represented as 3-bit flags:
RED = 001 (1)
GREEN = 010 (2)
BLUE = 100 (4)
Mixing is a simple bitwise OR: RED | BLUE = 101 = MAGENTA. This makes color logic mathematically bulletproof - order-independent, idempotent, and immune to race conditions from overlapping beams.
3. Splitter Truth Table (Hardware Safeguard)
The prism/splitter component uses explicit CCW/CW vector rotation instead of nested function calls:
Input: White Light (R=1, G=1, B=1)
Out1 (Left/CCW) → Red (001)
Out2 (Straight) → Green (010)
Out3 (Right/CW) → Blue (100)
Failsafe: Side-entry → Absorbed (High-Z)
4. Solstice Drift & Optical Lock
Driftable nodes rotate on a configurable timer. When any beam passes through a drifting node, it becomes "locked" - visually indicated by a green padlock icon and border shift. Locked nodes are immune to drift rotation but can still be manually rotated by the player. This creates the game's core tension loop: solve the puzzle AND maintain beam paths to prevent drift from undoing your solution.
5. Optic Portals
Portals are paired via a portalId channel system (Alpha, Beta, Gamma). When a beam enters a portal, it exits the matched partner portal traveling in the same direction. This enables non-linear puzzle layouts where beams can "quantum tunnel" across the grid.
6. Wavelength Filters
Filters use bitwise AND masking: incomingColor & filterColor. A Red filter (001) will strip Green and Blue from a White beam (111), passing only Red (001). This enables precise color isolation puzzles where players must route specific wavelengths through filtering gates.
7. Procedural Audio Synthesis
All audio is generated at runtime using Web Audio API oscillators:
- Tile rotation → short square-wave click (800Hz → 100Hz, 50ms)
- Console typewriter → randomized triangle-wave pips
- Drift warning → sawtooth sweep (150Hz → 50Hz, 400ms)
- Level complete → ascending C-major arpeggio (C4→E4→G4→C5→E5)
- Ambient music → procedural pad chords (plays on by default)
No audio files. Zero asset overhead.
8. Creative Lab (Level Editor)
A full-featured level designer allowing players to:
- Place all 8 element types (Emitter, Mirror, Splitter, Receiver, Wall, Portal, Filter, Empty)
- Toggle between Design and Play modes for real-time testing
- Auto-generate Base64 cipher share codes for puzzle distribution
- Import other players' puzzles via cipher code
- Built-in guide with element reference and a pre-loaded "Quantum Gateway" demo
Level Design Philosophy
| Sector | Name | Purpose | Mechanic |
|---|---|---|---|
| 01 | Solstice Dawn | Teach the verb | Mirrors only - click to rotate, guide beam to target |
| 02 | Turing's Prism | Introduce decomposition | Splitter breaks white into RGB components |
| 03 | Pride Synthesis | Color combination | Route Red + Blue into the same receiver = Magenta |
| 04 | Solstice Drift | Controlled instability | Drift timer + Optical Lock mechanic |
| 05 | Crypt-Breaker | Mastery test | All systems active: splitting + synthesis + drift |
| 06 | Quantum Tunnel | Non-linear routing | Optic Portals for beam teleportation |
| 07 | Spectral Sieve | Precision filtering | Wavelength Filters for color isolation |
| 08 | The Grand Solstice | Final challenge | 8×8 grid with all mechanics at maximum complexity |
| 🛠 | Creative Lab | Player expression | Design, test, and share custom puzzles |
Each level introduces exactly one new concept. No information overload.
Prize Categories
🏅 Best Ode to Alan Turing
The game is structured as a cryptographic decryption exercise. Each sector is framed as a locked cipher that can only be "cracked" through systematic optical logic. The terminal UI displays Turing's own words:
"We can only see a short distance ahead, but we can see plenty there that needs to be done."
The grid itself functions as a physical computation machine - deterministic state transitions triggered by rotation inputs, with light beams acting as data signals flowing through logic gates (mirrors, splitters, receivers). The player isn't just solving a puzzle; they're operating a simplified Turing machine made of light.
The Creative Lab extends this further - players can design their own Turing-like optical circuits and share them as cipher codes, embodying Turing's vision of universal computation.
🏅 Best Google AI Usage
Developed entirely using the Antigravity IDE powered by Google AI. Gemini served as a "Game Jam Execution Director" throughout development:
- Architecture Design: Used Gemini to stress-test multiple game concepts against strict jam-survival filters (Technical Stability, Cognitive Legibility, Attention Value, Expressive Depth) before writing a single line of code.
- Engine Development: Gemini wrote and debugged the optical raycasting engine, including the cycle-detection system and bitwise color composition logic.
- Feature Expansion: Gemini designed and implemented the Portal teleportation system, Wavelength Filter masking, and the full Creative Lab level editor with Base64 sharing.
- Scope Control: Gemini actively pruned feature creep - rejecting secondary verb systems, unnecessary UI animations, and over-engineered level designs that would have jeopardized jam stability.
- Bug Hardening: Gemini identified and fixed critical rendering bugs (missing beam path segments), unsolvable level layouts (receiver placement collisions), Level 8 autocomplete bug (mirror angle scrambling), and fragile splitter logic (replaced triple-nested rotation calls with a clean CCW helper function).
-
Test Suite: Gemini built an automated test runner (
test_game.mjs) that brute-forces all mirror combinations to mathematically verify every level is solvable, plus unit tests for portals, filters, drift, and color composition.
The AI wasn't used as a code generator - it was used as a ruthless production engineer, ensuring every system survived simplicity pressure, debug pressure, and player confusion pressure.
Tags: #gamedev #indiedev #webdev #javascript #github #opensource #browsergames #gamedesign #indiegame #programming #creativecoding
Top comments (0)