Operation Midnight Meridian — a tactical submarine tracking and code-breaking game set during the June Solstice.

This is a submission for the June Solstice Game Jam

What I Built

Operation Midnight Meridian — a tactical submarine tracking and code-breaking game set during the June Solstice.

You play as a naval intelligence commander operating a radar station that monitors submarine movements across both hemispheres. Your primary mission: intercept encrypted enemy transmissions and decode them before the cipher key rotates at solar midnight — a mechanic directly inspired by the daily Enigma key changes that Alan Turing's team at Bletchley Park had to crack each morning during World War II.

How It Connects to the Theme

The June Solstice is at the heart of every game mechanic:

• Day/Night Hemisphere Cycle: During the June Solstice, the Northern Hemisphere experiences its longest day while the Southern Hemisphere endures its longest night. This asymmetry is rendered in real-time on the radar — the lit hemisphere reveals submarines clearly, while contacts in darkness fade to near-invisible "ghost" signals.
• Solar Midnight as a Turning Point: When the in-game clock strikes 00:00 (solar midnight), the enemy cipher key automatically rotates, re-encrypting the current intercepted message. This creates urgent, time-pressured gameplay — decode the message before midnight, or face a completely new puzzle.
• The Equator as a Dividing Line: The radar's amber equator line splits the world into two hemispheres with opposing light conditions, visualizing the solstice's global duality — longest day for one half, shortest for the other.

Key Features

• 🎯 Live Radar Display — HTML5 Canvas rendering with a rotating scan line, submarine blips with pulse animations, trailing paths, and CRT scanline overlay
• 🔐 Turing Code-Breaker Panel — Caesar cipher decryption with real-time preview, alphabet mapping visualization, offset dial with slider/buttons/keyboard input
• ☀️ Dynamic Solstice Cycle — 24-hour solar time with hemisphere-dependent light levels that affect submarine visibility
• 🔄 Midnight Key Rotation — Dramatic visual event (red flash + warning banner) when the cipher key changes at solar midnight
• ⏱️ Time Controls — Pause, 1×, 2×, 4× speed controls to manage urgency
• 📖 Interactive Tutorial — 13-step spotlight-based guided tour that auto-launches for first-time players
• 📱 Responsive Design — Adapts gracefully from desktop to mobile viewports

Screenshots

🎮 Play Operation Midnight Meridian

How to play: Adjust the cipher offset (0–25) until the decoded preview reads as coherent English, then hit SUBMIT DECODE. Each correct decode earns 100 Intel Points. Watch the clock — at solar midnight, the key rotates and you must crack the new cipher!

Code

karthic-keyan / operation-midnight-meridian

A tactical submarine logistics and code-breaking game for the June Solstice Game Jam, honoring Alan Turing.

Tech Stack: Vanilla HTML5, CSS3, JavaScript (ES Modules), HTML5 Canvas, Vite

No frameworks. No libraries. Just the browser platform.

How I Built It

Architecture

The game is structured as three clean ES modules:

Module	Purpose
main.js (~1100 lines)	Game engine — Canvas rendering, game loop, HUD updates, UI event handling
cipher.js (~200 lines)	Cipher engine — Caesar encryption/decryption, key rotation, message pool management
tutorial.js (~450 lines)	Tutorial system — Spotlight-based interactive tour with keyboard navigation

Technical Highlights

Canvas Radar Rendering — The radar is rendered entirely with the Canvas API using requestAnimationFrame. Each frame draws 13 layers in order: background gradient → grid → concentric rings → hemisphere day/night overlay → crosshairs/equator → noise particles → submarine trails → scan line with 60° trailing glow → submarine blips → border with tick marks → compass labels → center dot → time arc. DPI-aware scaling ensures crisp rendering on Retina displays.

Solstice Light Model — Hemisphere light levels follow a cosine curve tied to solar time:

// North light peaks at noon (12:00), minimum at midnight (00:00)
state.northLight = 0.5 + 0.5 * Math.cos((state.time - 12) * Math.PI / 12);
state.southLight = 1.0 - state.northLight;  // Inverse for southern hemisphere

This creates the characteristic solstice asymmetry — when the North is bathed in light, the South is in darkness, and vice versa.

Submarine Visibility — Each submarine's visibility is a function of its hemisphere's current light level, creating a genuine tactical dynamic: contacts in the dark hemisphere become "ghosts" that are nearly impossible to track.

Cipher Key Rotation — At solar midnight, cipher.rotateKey() generates a new random shift (1–25) and re-encrypts the current message. This mirrors how Enigma operators changed their daily key settings, and how Bletchley Park cryptanalysts like Turing had to crack each new configuration from scratch every morning.

CRT Aesthetic — The entire UI uses a military terminal aesthetic with Share Tech Mono and Orbitron fonts, a dark-mode green phosphor color palette, glowing text shadows, and a CSS-only CRT scanline overlay on the radar using repeating-linear-gradient.

Design Decisions

1. No external game engine — I wanted to demonstrate that a compelling, thematic game can be built with just vanilla web technologies. The Canvas API is surprisingly powerful for 2D rendering.
2. Caesar cipher over Enigma — While Enigma would have been more historically accurate, a full Enigma simulation would overwhelm players. The Caesar cipher preserves the core loop — intercept → analyze → decode — while remaining accessible. The daily key rotation mechanic captures the essence of Turing's challenge.
3. Time as a resource — The solstice theme naturally lends itself to time-based mechanics. Solar time isn't just a clock; it drives visibility, cipher rotation, and strategic urgency.

Prize Categories

🏆 Best Ode to Alan Turing

This game is a direct tribute to Alan Turing and his work at Bletchley Park:

• The Core Mechanic IS Code-Breaking — The entire gameplay loop revolves around breaking substitution ciphers, directly inspired by Turing's work cracking Enigma.
• Daily Key Rotation — The cipher key changes at solar midnight, mirroring how German Enigma operators changed their settings daily and how Turing's team had to crack each new configuration every morning under immense time pressure.
• The "Turing Code-Breaker" Panel — Named explicitly in his honor, featuring an offset dial reminiscent of the Bombe machine's rotor settings.
• Turing's Own Words — The sidebar features his famous quote: "Sometimes it is the people no one imagines anything of who do the things that no one can imagine."
• The Classification "TOP SECRET // ULTRA" — References the "Ultra" intelligence designation used for information derived from Turing's Enigma decrypts at Bletchley Park.

🏆 Best Google AI Usage

This entire game — every line of HTML, CSS, JavaScript, the game design, the tutorial system, and this submission post — was built using Antigravity (Google's AI-powered coding assistant).

Antigravity served as my AI pair-programmer throughout the entire development process:

• Architecture & Design — Antigravity helped architect the modular structure (game engine, cipher engine, tutorial system) and designed the military terminal aesthetic
• Canvas Rendering — The complex 13-layer radar rendering pipeline was developed iteratively with Antigravity, including the DPI-aware scaling, hemisphere overlay system, and scan line trail effect
• Game Mechanics — The solstice light model, submarine visibility system, and cipher rotation mechanics were all developed collaboratively with Antigravity
• Tutorial System — The spotlight-based interactive tour with 13 contextual steps was designed and implemented with Antigravity's assistance
• CSS Design System — The comprehensive design token system with CSS custom properties, CRT effects, and responsive breakpoints were crafted with Antigravity

The experience demonstrated how Google AI can serve as a powerful creative partner — not just writing code, but contributing to game design decisions, thematic coherence, and user experience.