This is a submission for the
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:
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:
🧠 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…
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:
CODERED = 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:
CODEInput: 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 aportalIdchannel 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
↗ Original-Artikel auf dev.to lesenVollständiger Original-BerichtAusführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.Wie bewertest du diesen Beitrag?1 Klick FeedbackTeilen mit Netzwerk & Team:Hat Ihnen dieser Tipp / Anleitung geholfen?Community-Analysen & Experten-Meinungen 0
Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog.Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf „ Eigene Analyse verfassen“!Community Pulse: Relevanz-Einschätzung1 Klick Experten-Votum🔴 Akute Relevanz 0%🟡 In Evaluierung 0%🟢 Keine Auswirkung 0%Spannende Innovation 0%Port 8095 EngineVerwandte Story-Cluster & Quellen (Vektor-KI)
Tipp: Mit Pfeiltasten [ ← ] und [ → ] blättern![]()
Ähnliche Beiträge
🔍 Verwandte NewsAuch interessante Nachrichten Solstice Crypt - Decrypt the Light
Thematisch verwandte Begriffe: Solstice, Crypt, Decrypt, Light · 6 Treffer
⚠️ Malware / Trojaner / Viren Security AffairsJSCeal Hides Crypto Malware in V8 Bytecode
🔧 Programmierung Exploit Developmentdrakoarmy/datadome-rs: High-end Rust DataDome deobfuscator & solver with VM disassembly — all 3 challenge types (tags, interstitial, slider).
⚠️ Malware / Trojaner / Viren Elastic Security LabsNETWIRE Dynamic Configuration Extraction
🔧 Programmierung Elastic Security LabsCobalt Strike Beacon Extractor
Laden...Videos werden geladen ...
Laden...Beiträge werden geladen ...
Laden...Videos werden geladen ...
Laden...Beiträge werden geladen ...
Laden...Videos werden geladen ...
Laden...Beiträge werden geladen ...
Laden...Videos werden geladen ...
Laden...Beiträge werden geladen ...
Laden...Videos werden geladen ...
SOCIAL SHARE CARD GENERATOR