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

推荐订阅源

量子位
D
Docker
月光博客
月光博客
MongoDB | Blog
MongoDB | Blog
Vercel News
Vercel News
美团技术团队
博客园 - 叶小钗
I
InfoQ
Jina AI
Jina AI
博客园 - 司徒正美
雷峰网
雷峰网
B
Blog
Y
Y Combinator Blog
A
About on SuperTechFans
WordPress大学
WordPress大学
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
Microsoft Security Blog
Microsoft Security Blog
Stack Overflow Blog
Stack Overflow Blog
腾讯CDC
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Recent Announcements
Recent Announcements
V
V2EX
N
Netflix TechBlog - Medium

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
I Built a Juneteenth Game for the June Solstice Game Jam ...
snipforge · 2026-06-05 · via DEV Community

@ben @jess This is a submission for the June Solstice Game Jam

I'll be honest, I wasn't sure what to build for this jam. The theme is wide open and I kept going back and forth between something silly and something that actually meant something.
Then I started reading about Juneteenth and I just thought... this is it. This is the one.

What I Built:
March to Freedom is a top-down arcade survival game where you lead a growing group of marchers to freedom. Your player follows your mouse across the field. Scattered marchers join your group when you reach them. Shadow enemies try to stop you. Collect lanterns to charge special abilities. Reach 250 marchers to win.
Every 50 marchers you rescue unlocks a real story card about Juneteenth history - the 1865 announcement in Galveston, the first celebrations, how the tradition spread across America, the Texas state holiday in 1980, and finally the 2021 federal holiday.

Play it here:

The Idea :
I wanted the gameplay to mirror the theme. You're not fighting - you're gathering. You're not destroying. you're protecting. The goal isn't to kill the most enemies, it's to bring the most people along with you.
The shadow forces representing oppression get faster at night (day/night cycle tied to the solstice theme), and your lanterns symbols of hope and light are what charge your abilities and restore your strength.
It's a small metaphor but I think it works.

How to Play:

Mouse moves your leader directly (1:1 cursor tracking)
WASD works too if your mouse leaves the canvas
Tab cycles through your 5 abilities
Space activates the selected ability

Abilities: each charged by collecting lanterns:
AbilityWhat it doesShieldRipple wave pushes all enemies backSpeedMove faster for 3 secondsTorchFire projectiles in 8 directionsFreezeSlow all enemies for 5 secondsRallyPull all scattered followers to you instantly

Enemy types:
Scout - small and fast, 1 hit with torch
Heavy - big and slow, hits harder, needs 2 torch hits
Boss - appears every 100 marchers, takes 3 torch hits, drops 2 lanterns when defeated

Day/Night cycle - the field darkens every 30 seconds. Enemies spawn faster and move quicker at night. Lanterns glow brighter. Survive until dawn.

How I Built It
Pure HTML5 Canvas and Web Audio API. No libraries, no game engine, no frameworks. Just a single HTML file.
I started with the mouse tracking and immediately ran into the classic problem - getBoundingClientRect() returning the wrong dimensions before layout settles. The fix was wrapping everything in a setTimeout(100ms) and reading canvas.offsetWidth once after layout was done, then fixing those values for the entire session. No dynamic resizing, no device pixel ratio scaling - just simple fixed coordinates. That solved every rendering issue I had.
Audio is all synthesized using oscillators and gain nodes. Each sound type has its own function - sfxCollect, sfxBossDie, sfxNight etc. I kept them separate rather than in a big object because it was easier to tweak individual sounds that way.
The game loop uses delta time throughout so it runs consistently regardless of frame rate. I spent more time on this than I expected - getting the followers chain movement to feel right took a few iterations. They follow in sequence (each one targets the position of the one in front) which gives that natural snake-like trail.
Things that were harder than expected:

Getting the day/night cycle to feel smooth without jarring transitions - ended up using a sine curve over a 30 second period
Boss HP bar positioning when the boss is at the edge of the screen
Making the victory parade feel actually celebratory - ended up with 300 confetti particles and rainbow spinning followers

Things that came together quickly:

The story card system (just an array of objects, pause the game, show the card, resume)
Web Audio synthesized sounds - once you get the pattern down for one sound, the rest are variations
The high score system using localStorage

The History Cards:
I wanted to make sure the history was accurate so I researched each card carefully before writing them. These are real dates and real events:

June 19, 1865 - Gordon Granger arrives in Galveston with General Order No. 3
1866 - First organized Juneteenth celebrations in Texas
Early 1900s - As the Great Migration spread, so did Juneteenth
1980 - Al Edwards successfully lobbied for Texas state recognition
June 17, 2021 - President Biden signs the Juneteenth National Independence Day Act

I kept the text short because it's displayed mid-game, but I wanted each card to feel genuine and worth reading, not just filler.

What I'd Add with More Time:

A proper marching drumbeat that gets louder as your group grows
More story cards between 250 and some higher milestone for endless mode
Mobile haptic feedback when the boss appears
An accessibility mode with a slower day/night cycle

Final Thoughts:
This was my first time building a game for a jam and doing the whole thing in vanilla Canvas. Honestly it was more fun than I expected. There's something satisfying about getting particle effects and collision detection working from scratch with no help from a library.
If you play it, I hope the story cards land. Juneteenth deserves more than a passing mention - it's been celebrated for 160 years and only became a federal holiday three years ago. That's wild when you think about it.
Go lead your marchers. Happy Juneteenth. 🕯️

Built with HTML5 Canvas and Web Audio API
@snipforge - June 2026