This is a submission for the June Solstice Game Jam
(🇧🇷 Para a versão em Português, role até o final do post / Scroll down for Portuguese!)
What I Built
While the Northern Hemisphere celebrates the summer solstice, here in Brazil, this astronomical event marks the arrival of winter. We celebrate it with a massive, traditional, and culturally rich event called Festa Junina (June Festival)!
To honor this theme, I built Arraial do Solstício (Solstice Festival), a digital interactive courtyard entirely from scratch using Vanilla JavaScript, HTML5 Canvas, and CSS. No heavy game engines, just pure code!
The project features a living Hub and 3 distinct minigames (endless runner, physics balancing, and a frantic clicker), fully equipped with a real-time global language switcher (i18n) and a local localStorage Medal Board!
Video Demo
Code
Arraial do Solstício 🌽🔥
Bem-vindo ao Arraial do Solstício, uma Festa Junina interativa construída inteiramente com tecnologias web nativas! Este projeto foi criado para a June Solstice Game Jam do Dev.to, unindo a temática global do solstício com a nossa riquíssima cultura brasileira.
🎮 Jogue Agora
Clique aqui para jogar online!
✨ Funcionalidades
- Hub Interativo: Um pátio vivo com fogueira animada, bandeirinhas, e caipiras passeando aleatoriamente pela vila. Tudo embalado com música temática junina!
- Minigame: Pula Fogueira 🔥: Desvie das fogueiras, pegue pamonhas e coma maçãs do amor neste endless runner super divertido.
- Minigame: Ralando a Pamonha 🌽: Teste sua velocidade no mouse para ralar o milho antes que a barraquinha não aguente o tranco!
- Minigame: Equilibrando o Quentão 🍷: Mantenha o equilíbrio do copo de quentão com movimentos precisos do mouse.
-
Sistema de Ranking 🏆: Pontuações locais (via
localStorage) para você competir com…
How I Built It
🗺️ The Hub: A Living Courtyard
When you enter the app, you are greeted by a central bonfire, clickable stalls, and characters walking around randomly. To bring the scene to life without overloading the DOM, I used inline SVG to draw the characters and manipulated their positions with pure JavaScript.
🔥 Minigame 1: Fire Jumper
Chrome's classic dinosaur game got a festive version! Here, you control a character who needs to jump over bonfires, collect pamonhas (corn treats for points), and candy apples (for invincibility). This was rendered frame-by-frame using the <canvas> API with a parallax effect for the background.
🍷 Minigame 2: Drink Balancer (Quentão)
The challenge here is to keep a cup of Quentão (a traditional hot mulled wine) upright using just your mouse! Instead of a complex physics engine, I used basic math to calculate the cup's rotation and inertia based on the mouse position. If you tilt it too much, the cup "spills" with a fluid animation using ctx.rotate().
🌽 Minigame 3: Corn Grater (Pamonha)
A "click/swipe as fast as you can" game, where the player has to "grate" corn by dragging the mouse frantically. Each grated corn adds to your score, and the difficulty increases until the grater structure (literally) explodes.
🌍 Internationalization (i18n) & 🏆 Local Ranking
Since the jam is global, I implemented a custom i18n module! The game automatically detects your browser language and serves the UI in English or Portuguese, switching instantly without page reloads.
To spice things up, I integrated a global "Medal Board" using the browser's localStorage API, keeping the Top 3 high scores for each minigame. Creating games in Canvas and Vanilla JS gives you incredible control over pixels and performance, plus it's an excellent logic exercise!
🇧🇷 Versão em Português
Esta é uma submissão para a June Solstice Game Jam
O que eu construí
Enquanto o Hemisfério Norte celebra o solstício de verão, aqui no Brasil esse evento marca a chegada do inverno e a nossa tradicionalíssima Festa Junina!
Para honrar o tema, construí o Arraial do Solstício, um pátio digital interativo feito do zero com Vanilla JavaScript, HTML5 Canvas e CSS. Sem engines pesadas, apenas código puro!
O projeto conta com um Hub vivo e 3 minigames distintos, totalmente equipado com troca de idioma em tempo real (i18n) e um Quadro de Medalhas usando localStorage.
Vídeo de Demonstração
Código Fonte
Arraial do Solstício 🌽🔥
Bem-vindo ao Arraial do Solstício, uma Festa Junina interativa construída inteiramente com tecnologias web nativas! Este projeto foi criado para a June Solstice Game Jam do Dev.to, unindo a temática global do solstício com a nossa riquíssima cultura brasileira.
🎮 Jogue Agora
Clique aqui para jogar online!
✨ Funcionalidades
- Hub Interativo: Um pátio vivo com fogueira animada, bandeirinhas, e caipiras passeando aleatoriamente pela vila. Tudo embalado com música temática junina!
- Minigame: Pula Fogueira 🔥: Desvie das fogueiras, pegue pamonhas e coma maçãs do amor neste endless runner super divertido.
- Minigame: Ralando a Pamonha 🌽: Teste sua velocidade no mouse para ralar o milho antes que a barraquinha não aguente o tranco!
- Minigame: Equilibrando o Quentão 🍷: Mantenha o equilíbrio do copo de quentão com movimentos precisos do mouse.
-
Sistema de Ranking 🏆: Pontuações locais (via
localStorage) para você competir com…
Como eu construí
🗺️ O Hub: Um Pátio Vivo
Quando você entra no app, é recebido por uma fogueira central, barraquinhas clicáveis e personagens passeando aleatoriamente. Usei SVG inline para desenhar os caipiras e manipulei as posições via JS.
🔥 Minigame 1: Pula Fogueira
O clássico jogo do dinossauro ganhou versão junina! Renderizado frame a frame via <canvas>, com direito a efeito parallax. Você coleta pamonhas (pontos) e maçãs do amor (invencibilidade).
🍷 Minigame 2: Equilibrando o Quentão
O desafio é manter um copo de quentão em pé usando o mouse! Em vez de usar uma engine de física complexa, usei matemática básica para calcular a rotação e inércia do copo.
🌽 Minigame 3: Ralando a Pamonha
Um jogo estilo "clique o mais rápido que puder", arrastando o mouse freneticamente até o ralador (literalmente) explodir.
🌍 Internacionalização (i18n) e 🏆 Ranking Local
Criei um sistema i18n do zero para jogadores do mundo todo jogarem em Inglês ou Português. Também integrei um "Quadro de Medalhas" usando a API de localStorage para salvar seus recordes!
Criar jogos em Canvas e Vanilla JS te dá um controle absurdo sobre os pixels e a performance, além de ser um excelente exercício de lógica. Qual sua barraquinha favorita na Festa Junina? Conta aí nos comentários! 👇