惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

罗磊的独立博客
The GitHub Blog
The GitHub Blog
Hugging Face - Blog
Hugging Face - Blog
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
IT之家
IT之家
小众软件
小众软件
博客园_首页
G
Google Developers Blog
Apple Machine Learning Research
Apple Machine Learning Research
MyScale Blog
MyScale Blog
Engineering at Meta
Engineering at Meta
Jina AI
Jina AI
酷 壳 – CoolShell
酷 壳 – CoolShell
人人都是产品经理
人人都是产品经理
B
Blog RSS Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
D
Docker
B
Blog
雷峰网
雷峰网
WordPress大学
WordPress大学
Stack Overflow Blog
Stack Overflow Blog
宝玉的分享
宝玉的分享

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Solstice Panic! — Protect the Sun on the Longest Day of t...
Aashita · 2026-06-17 · via DEV Community

This is a submission for the June Solstice Game Jam


What I Built

On June 21 — the summer solstice — the sun is at its most powerful. The longest day. The peak of light. And in Solstice Panic!, shadows are trying to steal it.

Solstice Panic! is a fast-paced arcade game where you defend a golden Sun core against waves of encroaching shadow blobs on the longest day of the year. Tap them, smash them, swipe through them — don't let a single one reach the center or the sun starts to dim. The day is long. The shadows keep coming. Keep the light alive.

But here's what makes it more than a clicker:

Every power-up in the game is a real June celebration. The Summer Solstice. Pride Month. Juneteenth. The FIFA World Cup 2026. International Sushi Day. World Bicycle Day. International Yoga Day. World Music Day. Each one drops into the arena as a collectible, triggers a visual spectacle, and shows an educational banner about the real event that inspired it.

The metaphor is intentional and direct: the sun is light, joy, and freedom. The shadows are everything that tries to extinguish them. On the solstice — the day light wins — you make sure it stays that way. Every June celebration you've ever heard of shows up as a weapon in your hands.

Play it here: https://solstice-panic-750247458250.asia-southeast1.run.app/


Video Demo


Code

GitHub logo aashitanegii / SolsticePanicGame-

☀️ A fast-paced June Solstice arcade game where players defend the Sun using celebration-themed power-ups inspired by real June events.

☀️ Solstice Panic!

Defend the solstice sun light against falling shadows on the longest day of the year!

A fast-paced arcade survival game inspired by the June Solstice and June celebrations.


🎮 About The Game

Solstice Panic! is a fast-paced arcade survival game inspired by the June Solstice and a month full of global celebrations. In this game, players are tasked with defending a glowing Sun from relentless waves of incoming shadows. As you play, you can collect themed power-ups inspired by real-world events that happen in June, providing dynamic and engaging gameplay that also serves to celebrate these occasions!

✨ Features

  • Three Difficulty Modes: Tailor the challenge with Easy, Medium, and Hard modes.
  • Eight Unique June-Themed Power-Ups: Collect special abilities inspired by real-world June events.
  • Educational Event Banners: Learn about historical and global events as you play.
  • Combo & Multiplier System: Chain successful defenses for…

How I Built It

Stack

Tool Role
React 18 + Vite State-driven menus, difficulty screens, view transitions
TypeScript Strict interfaces for every game entity — shadows, particles, projectiles, power-up state queues
HTML5 Canvas API All gameplay rendering: vector movement, glow gradients, rotation, collision math
Tailwind CSS Warm golden UI palette, HUD modules, responsive layout
Framer Motion Spring animations on cards, start screen, and slide-in educational banners
Web Audio API Real-time synthesized sound — zero audio files, everything generated from raw math
LocalStorage Persistent high score across sessions

No audio files. No sprite sheets. No external game engine. Everything is generated by code.


Eight Power-Up Physics Systems in One Canvas Loop

The real technical challenge was coordinating eight completely distinct active power-up states simultaneously inside a single high-performance canvas rendering loop — without dropping frames.

Each power-up has its own physics:

  • World Cup Shot — real bounce vectors off arena boundaries, velocity preserved on each wall collision
  • Sushi Cannon — heat-seeking projectiles that recalculate their target vector every frame toward the nearest shadow
  • Bike Day Zoom — cursor drag velocity converted into a sweeping collision radius in real time
  • Pride Wave — gradient arc swept across the full canvas width in a single render pass
  • Solstice Crown — radial freeze state with simultaneous petal particle system running independently

Getting all eight coexisting — multiple power-ups active at once without corrupting each other's render cycle — required a clean TypeScript state queue where each power-up owns its update and draw functions independently.


The Proudest Feature: The Web Audio Synthesizer

Every sound in the game — smash pops, power-up sparkles, damage thuds, the freeze sweep, combo escalation tones — is generated in real time using the Web Audio API. No audio files anywhere in the project.

The detail I'm happiest with: the combo pitch system. As your streak climbs, the base frequency of each smash sound rises. A 3x combo sounds different from an 8x combo. The game literally sounds faster and more intense as you get better at it, without a single pre-recorded file.


The Decoy System (Why It's Not Just a Clicker)

Purple decoy pulses mix into the shadow waves. Clicking them costs score and breaks your combo streak. This one mechanic is the difference between an arcade game and a spam-clicking toy — it forces players to actually look before they tap. On Hard mode (Endless Twilight), decoy frequency increases significantly. That's what makes Hard genuinely hard rather than just fast.


Three Difficulty Modes as a Design Requirement

A jam game that only works for one skill level loses half its potential audience.

  • Easy (Golden Morning) — 3 shield charges, slower shadows, frequent drops. Lets casual players experience all eight power-ups before they're overwhelmed.
  • Medium (Solstice Balance) — Standard everything. The intended experience.
  • Hard (Endless Twilight) — Fast shadows, rare drops, 1.5x score multiplier. A real reflex test.

Every Power-Up Is a Real June Event

Power-Up June Event Effect
🌞 Solstice Crown Summer Solstice — June 21 Freezes all shadows 5s, golden rays burst, petals drift
🌈 Pride Wave Pride Month — all June Rainbow arc clears every shadow on screen
✊ Juneteenth Burst Juneteenth — June 19 2x score multiplier 10s, confetti explosion
⚽ World Cup Shot FIFA World Cup 2026 Bouncing soccer ball ricochets, deflects shadows
🍣 Sushi Cannon International Sushi Day — June 18 Heat-seeking sushi auto-targets shadows for 8s
🧘 Yoga Pose International Yoga Day — June 21 3s full pause, sun meter fully restored
🎵 World Music Day Fête de la Musique — June 21 Musical notes radiate outward, destroy on contact
🚲 Bike Day Zoom World Bicycle Day — June 3 Cursor becomes a high-speed shadow-sweeping trail

June 21 — the jam deadline — is the most power-up-dense day in the calendar. The Solstice, Yoga Day, and World Music Day all fall on the same date. If you're playing Solstice Panic! on submission day, every event you're collecting as a power-up is happening in the real world at the same time.


Prize Category

Best Google AI Usage

Solstice Panic! was built using multiple Google AI tools throughout the entire development lifecycle—from ideation and UI generation to coding, debugging, and deployment.

Google AI Studio + Gemini 2.0 Flash

Google AI Studio served as my primary development environment and Gemini 2.0 Flash acted as a collaborative engineering partner throughout the project.

I used Gemini to:

  • Design the game architecture and entity systems
  • Structure TypeScript interfaces and state management
  • Implement collision detection and power-up mechanics
  • Debug gameplay logic and rendering issues
  • Optimize Canvas performance
  • Generate educational content for June celebration banners
  • Refine game balance across Easy, Medium, and Hard modes

Rather than generating code once, development was highly iterative. I would describe a gameplay mechanic, test the implementation, provide feedback, and refine the system through multiple cycles until it behaved exactly as intended.

Stitch

I used Stitch to rapidly prototype and generate portions of the game's interface and visual structure.

This accelerated the transition from concept to playable experience, allowing me to spend more time refining gameplay systems, accessibility, animations, and overall player experience.

Gemini CLI

Gemini CLI became part of my development workflow for code generation, debugging, refactoring, and feature implementation.

Complex systems such as:

  • Multi-state power-up management
  • Projectile targeting logic
  • Audio synthesis architecture
  • Difficulty scaling systems
  • Persistent score storage

were developed and refined through an iterative CLI-assisted workflow.

Cloud Run Deployment

The final game was deployed using Google Cloud Run, allowing the application to be packaged and delivered as a scalable web experience.

Using Cloud Run simplified deployment and provided a production-ready environment for sharing the game with judges and players.

Why Google AI Was Meaningful

The scope of Solstice Panic! is significantly larger than a typical jam project:

  • Eight unique power-up systems
  • Three difficulty modes
  • Dynamic combo mechanics
  • Educational event banners
  • Particle effects
  • Canvas-based physics systems
  • Real-time audio synthesis
  • Persistent high-score tracking

Google AI tools helped transform a large idea into a finished, polished experience within a limited jam timeline.

Most importantly, they accelerated experimentation.

Instead of spending hours searching documentation or rebuilding systems from scratch, I could focus on design decisions, gameplay feel, player experience, and creative direction.

Google AI didn't replace development—it amplified it.

Solstice Panic! is the result of combining creativity, engineering, and Google's AI ecosystem to build a complete game experience in just a few days.


Built for the June Solstice Game Jam 2026. The sun held; WON. The shadows didn't win.