This is a submission for the June Solstice Game Jam

A quick note on AI: I used an AI assistant while making this. It helped me shape the idea, write the code, and put together a first draft of this post. I read through everything, made my own edits, and did the testing and the deploy myself. Flagging it up front since DEV asks us to.

What I Built

SOLSTICE CIPHER is a small code breaking game about beating the sunset on the longest day of the year.

Here is the setup. You are standing at an observatory on June 21. A scrambled signal of colored light keeps pulsing over the horizon, six colors of the spectrum locked in some hidden order, and you have to figure out that order before the sun goes down. Every guess you make costs you an hour of daylight. The sun drops a little lower, the sky slides from midday blue into orange and then deep night, and the stars start coming out. Burn through all your daylight and you lose.

The part that tells you how close each guess was is not a plain hint box. I named it The Bombe, after the machine Alan Turing built to crack Enigma. If you get stuck, you can spend a Bombe Assist and let it work out one position for you.

🎮 Play it now (nothing to install, runs in the browser):

Heads up: CodePen does not load on every network. If it will not open for you, try a different network or a VPN, or just use the full screen version below.

Full screen:

It is built to be played on a laptop keyboard, so you can run the whole thing with the arrow keys and the number row. There are on screen buttons too if you are on your phone.

What I was going for was something you can understand in about five seconds but that still makes you think. I also wanted the June theme to live in how the game actually plays, instead of being pasted on top of something unrelated.

A few ways it ties back to the theme:

• ☀️ The solstice and the passage of time. Daylight is your resource. The sun, the sky color, and the stars all move based on how many guesses you have spent, and the longest day of the year hands you the most daylight to work with.
• 🌗 Light against darkness. That is literally how you win or lose. Crack the code and the beacon lights up. Run out of daylight and night takes over.
• 🧠 A nod to Alan Turing. June is his birth month, the whole game is built around breaking a code, and the feedback engine is his Bombe.
• 🏳️‍🌈 A nod to Pride too. The signal you are decoding is the six color spectrum, basically a rainbow. Turing was prosecuted for being gay, so decoding a rainbow in his name felt like the right thing for June.

Code

How I Built It

The whole game is one HTML file. No engine, no framework, no build step, and nothing external except two Google Fonts. You open the file and it runs. Keeping it to a single file made it really easy to host and to share.

Here is what is inside:

• HTML5 Canvas for the sky, the sun, the stars, the floating motes, the particles, and the screen shake
• Plain DOM and CSS for the board, the HUD, and the animations
• The Web Audio API for the little retro machine sounds (there are no audio files anywhere)
• Vanilla JavaScript for the game logic

The deduction core. Underneath, this is basically Mastermind with repeated colors allowed. The Bombe scores each guess in two passes. First it counts the exact hits, then it goes back over the leftover colors and finds the ones that are right but sitting in the wrong slot.

function evaluate(guess, secret){
  let exact = 0, partial = 0;
  const sc = Array(6).fill(0), gc = Array(6).fill(0);
  for (let i = 0; i < guess.length; i++){
    if (guess[i] === secret[i]) exact++;           // right color, right slot
    else { sc[secret[i]]++; gc[guess[i]]++; }       // tally the misses
  }
  for (let k = 0; k < 6; k++) partial += Math.min(sc[k], gc[k]); // right color, wrong slot
  return { exact, partial };
}

Daylight as the clock. There is no real countdown. Your guesses are the clock. One number drives the entire mood: f = guessesUsed / maxGuesses. The sky is three color keyframes that I blend together based on f, and the sun rides a curve that drops faster as the light runs low.

const SKY = [
  [[42,140,255],[170,214,255]],  // noon
  [[255,138,71],[255,205,150]],  // golden dusk
  [[8,10,40],[26,22,58]],        // night
];
// ...
const sx = W * (0.5 + 0.42 * f);       // drift toward the western horizon
const sy = H * (0.17 + 0.62 * f * f);  // fall faster as the daylight fades

The stars only fade in once f gets past about 0.4, so dusk is what actually brings out the night sky as you get low on time.

The Bombe Assist. Pressing B spends one of your two charges. It picks a slot you have not solved yet (it leans toward one you currently have wrong), shows you the right color, and locks it in. It is a small tip of the hat to how the real Bombe ruled out possibilities to shrink the search. It also costs you points, so you actually have to decide whether it is worth it.

Making it feel good. Crack the code and you get bursts of particles in the spectrum colors plus a quick arpeggio. A wrong guess gets a low buzz, and the lose screen gives the canvas a shake.

A couple of decisions I am happy with:

• It plays on the keyboard. Arrows to move, up and down or the number keys to set a color, Enter to decrypt, B for the Bombe. On a laptop you never reach for the mouse.
• Every orb has a number from 1 to 6 printed on it, so you can play by number and not only by color. That makes it work for people who are colorblind.
• Reusing that one f value for the sky, the sun, and the stars kept the whole atmosphere in sync with the stakes for almost no extra code.

It keeps going as long as you do. The codes grow from 4 to 5 to 6 symbols, your daylight scales from 10 to 12 to 14 guesses, and your score (level × 100 + daylight saved × 15 + Bombe charges held × 40) carries over from level to level until night finally wins.

Prize Category

🏅 Best Ode to Alan Turing

I went after this one on purpose, and I tried to work Turing into the game itself rather than just name dropping him.

• The actual gameplay is code breaking. The thing that grades your guesses is named The Bombe, after the real machine he built against Enigma, and the Bombe Assist echoes how that machine ruled out dead ends to narrow things down.
• The story around it leans on June being his birth month, with your deduction standing in as the light that holds off the dark.
• The code you are cracking is the six color spectrum, a rainbow, on purpose. Turing was prosecuted for being gay and only pardoned long after he died. Decoding a rainbow under his name pulls the solstice, Pride, and computing history into one picture.

🌞 Thanks for playing, and happy solstice 🌞