This is a submission for the June Solstice Game Jam
Solstice Asteroids
Video: Solstice Asteroids
From X-Asteroids to Solstice Asteroids, How a Simple Arcade Game Found Its Soul
Let me be honest with you. When I first sat down to build something for the June Solstice Game Jam, I didn't have a clever plan. I had an idea, sure, but it was a safe one. I built X-Asteroids.
You can still play it here, X-Asteroids
It's a solid game. The controls work. The scoring system is tight. The high score table saves to your browser. It's everything you'd expect from a classic Asteroids clone, clean, functional, and utterly forgettable.
The problem? It had nothing to do with the solstice.
I'd built a game, but I hadn't built a story. And the jam wasn't about building a game, it was about building something that captured the feeling of the longest day.
The Pivot, Finding the Theme
The June solstice is the longest day of the year. It's a moment of abundance, of light, of celebration. But it's also a moment of transition, after the solstice, the days begin to shorten. The light starts to fade.
I realized I had a choice. I could slap a sun icon on my game and call it a day, or I could actually build the solstice into the mechanics.
So I scrapped the name. X-Asteroids became Solstice Asteroids.
But renaming wasn't enough. I needed to make the solstice matter.
The Evolution, Building the Solstice Into Every Second
The Daylight Timer
The first thing I added was the Daylight bar. Right under your lives, you'll see a timer counting down from 120 seconds. This isn't just a clock, it's the heart of the game.
In the early game, when the sun is high, play is normal. You destroy asteroids, collect points, and build up your lives. But as the timer drops below sixty seconds, the pressure mounts. Your score multiplier climbs to two times. At thirty seconds, it reaches two and a half times. And in those final moments before midnight, every shot is worth three times its normal value.
The Score Multiplier, Risk vs. Reward
In X-Asteroids, every asteroid was worth one hundred points. In Solstice Asteroids, that same asteroid can be worth three hundred points, if you're brave enough to wait until the last moments of daylight.
The multiplier creates tension. Do you play it safe early, building up a comfortable score without taking risks? Or do you push into the danger zone, knowing that every second of daylight is precious, and every asteroid you destroy is worth more than the last?
The choice is yours. But the timer doesn't wait.
Midsummer Magic, The Powerup
Scattered across the void are glowing flowers. Collect one, and your ship becomes supercharged with Midsummer Magic, triple-shot lasers, a purple aura, and six seconds of pure power.
The powerup isn't just a convenience. It's a lifeline. When the King appears, those six seconds can mean the difference between victory and defeat. Save it for the right moment, and you'll turn the tide of battle.
The Solstice King, The Climax
When the timer hits zero, the game changes completely. A massive crimson flower asteroid, the Solstice King, spawns at the center of the screen. It has twenty hit points. It moves slowly, but it's surrounded by minions. If you can defeat it, you earn a bonus of five thousand times your current multiplier, potentially fifteen thousand points in a single moment.
The King isn't just a boss. It's the final sunset. If you survive, you've held onto the light.
The Visual Transformation
X-Asteroids was clean and minimal. The asteroids were gray polygons. The ship was a triangle. It worked, but it didn't inspire.
Solstice Asteroids is a garden in space.
The asteroids are flowers, sunflowers, daisies, and bluebells, each with swaying petals and warm colors. The ship has a golden glow and, with Midsummer Magic, a purple aura. The background is a deep gradient of night blues fading to red at the horizon. Fireflies, shooting stars, and drifting clouds fill the void.
Every visual choice reinforces the theme. The light is warm. The darkness is deep. The transition between them is the game.
How It's Built, One File, Pure Vanilla
Solstice Asteroids is a single HTML file. No frameworks. No build tools. No dependencies. Just HTML, CSS, and JavaScript running directly in your browser.
The markup is HTML5, structuring the UI overlays, the score, lives, timer, controls, and game over screen. The styling is pure CSS3, with responsive design, glass-morphism effects, animations, and a dark theme that makes the colorful asteroids pop. The logic is all vanilla JavaScript, handling the game loop, physics, collision detection, AI, scoring, and persistence. Rendering is done with the Canvas API, drawing every graphic, ship, flower asteroids, particles, and backgrounds, by hand. Local storage saves high scores directly in the browser.
There's no game engine like Unity or Godot. No physics library like Box2D or Matter.js. No UI framework. Every line of code is hand-written. The entire game fits in a single file, making it easy to deploy, easy to modify, and easy to play.
The game loop runs at sixty frames per second, updating positions, checking collisions, and redrawing the canvas. The ship moves with momentum-based physics, just like the original Asteroids. The asteroids drift and sway, each with its own rotation and petal animation. The lasers travel in straight lines, and when they hit an asteroid, the asteroid explodes into petals and sparkles.
The timer is updated every frame, decrementing by one-sixtieth of a second. The score multiplier is recalculated based on the remaining time, creating a smooth curve from one times to three times. The King's health is tracked separately, and when it reaches zero, the victory sequence triggers.
The mobile controls are touch-based, with on-screen buttons for left, right, thrust, fire, and hyperspace. The desktop controls use the keyboard, arrow keys for movement, space to fire, and shift for hyperspace. Both work seamlessly, and the game adapts to whichever input method you're using.
Why This Matters
Game jams are about more than just making something that works. They're about making something that resonates.
X-Asteroids worked. Solstice Asteroids resonates.
The timer creates genuine tension. The multiplier forces you to balance risk and reward. The King is a climax worth fighting for.
But more than that, the game tells a story. It's a story about light and darkness, about the longest day and the shortest night, about the beauty of holding onto something you know is fading.
That's the solstice. That's the game.
Play It Yourself
You can play Solstice Asteroids here, Solstice Asteroids
Controls:
- Desktop, Arrow keys plus space to fire, shift for hyperspace
- Mobile, On-screen touch buttons
Pro tip, Save your Midsummer Magic for the King. Triple-shot makes the difference between surviving midnight and fading into the dark.
Final Thoughts
I'm proud of X-Asteroids. It was a solid foundation. But I'm proud of Solstice Asteroids in a way that feels different. This isn't just a game, it's a reflection.
The June solstice is a gift. The light is abundant, but it's also fleeting. In Solstice Asteroids, you're not just shooting asteroids. You're defending the light.
And when the King falls, and the victory screen appears, you feel like you've truly earned the longest day.
Thank you to the DEV team for hosting this jam. This project pushed me to think differently about game design, and I'll carry those lessons with me.
Now go. Defend the light.
Top comments (0)