@ben @jess This is a submission for the June Solstice Game Jam.
What I Built
Sushi Striker is a browser-based reflex game that mashes up two of June's most delightful celebrations - the World Cup and International Sushi Day (June 18). You play as a goalkeeper, but instead of football, you are blocking a relentless barrage of falling sushi rolls with your glove.
The game runs entirely in the browser with no dependencies. Everything - graphics, physics, audio, UI - is built from scratch using the HTML5 Canvas API and the Web Audio API.
Play it here: https://codepen.io/editor/Vimala-Gandham/pen/019e9383-cf95-7d9d-9b89-7c5a397ec100
Demo Video:
Theme Connection:
June is packed with reasons to celebrate, and Sushi Striker draws from two of them:
World Cup - The game is set in a football stadium complete with a colorful crowd in the stands, floodlights, pitch stripes, and a goal net at the bottom. The crowd even pulses and reacts when you go on a streak.
International Sushi Day (June 18) - Instead of a football, flying sushi rolls are your challenge. Each sushi type is hand-drawn on canvas with its own shape, color, and unique sound.
How to Play:
Move your mouse (or touch the screen on mobile) to control the goalkeeper glove. Block sushi rolls before they reach the goal. Miss too many and you fail the round.
Sushi types and points:
Nigiri - 1 pt, soft plop sound
Onigiri - 1 pt, hollow knock sound
Maki Roll - 2 pts, deep thud sound
Fish - 2 pts, bubbly boing sound
Shrimp - 3 pts, high-pitched ping (most valuable!)
Special objects:
Golden Sushi - rare, fast, worth 5 pts
Bomb - appears from Round 2 onwards. Do NOT catch it or you lose a life!
Mechanics:
Catch 5 in a row and your glove grows automatically (Big Glove power-up)
Combo multiplier kicks in at 3+ catches doubling your points
Streak counter shows on screen with crowd reacting at streak 5+
Screen shakes on misses and bomb hits
Round Structure:
The game has 3 rounds of 20 seconds each, with escalating difficulty:
Round 1 - Nigiri and Onigiri only. Warm up your reflexes.
Round 2 - Maki and Fish added. Bombs introduced. Faster speed.
Round 3 - Shrimp unlocked. Maximum chaos. No accuracy minimum, just score!
To advance from Round 1 to Round 2 you need a high enough accuracy (the bar must stay green). Round 2 to Round 3 requires even higher accuracy. The game does not tell you the exact number upfront - you watch the live accuracy bar and the yellow target marker. If you are failing, the bar turns red and warns you. The exact percentage is only revealed on the fail screen.
Each round shows a letter grade (S / A / B / C / D) based on your hit rate and score vs the round goal.
Difficulty modes:
Easy - 5 lives, slower speed
Normal - 3 lives, standard speed
Hard - 1 life, faster speed
Lives are shown as hearts on the start screen and update live when you switch difficulty so you understand the stakes immediately.
How I Built It:
Tech stack: Pure HTML, CSS, and JavaScript. No frameworks, no game engines, no external libraries.
Rendering: HTML5 Canvas with a fixed 640x420 game world. All sushi types are drawn procedurally using canvas shape primitives (ellipses, arcs, lines, bezier curves) rather than image files or emoji, which ensures they render consistently across all browsers and operating systems.
Physics: Delta-time based movement so the game runs at the same speed regardless of frame rate. Sushi rolls have velocity, gravity, and rotation applied each frame.
Audio: Web Audio API with a fully isolated audio module. Each sushi type has a unique synthesized sound built from oscillators, gain nodes, and frequency ramps. The module is wrapped in try/catch so any audio failure never touches the game loop.
Round system: Each round resets projectiles, spawn timers, caught/missed counters and accuracy tracking independently. Round transitions use a banner overlay with a countdown before the next round starts automatically.
Hit detection: Circle-to-circle collision between the glove radius and each sushi radius, scaled up when the Big Glove power-up is active.
Key technical decisions:
Canvas size is fixed once on load (inside a setTimeout to wait for layout) and never recalculated, which prevents mid-game rendering issues
Audio context is only created on the first user gesture (click), satisfying browser autoplay policies
All game objects use a dead flag rather than splicing arrays mid-loop to avoid index bugs
What I Learned
This was my first time building a complete game from scratch without any engine. The biggest lessons:
Audio is fragile - the Web Audio API can throw silently in some browsers. Wrapping every single call in try/catch saved the game from breaking entirely on audio errors.
Canvas sizing matters a lot - reading canvas dimensions before layout settles gives you zero width. Waiting 100ms after page load before setting the canvas size fixed every rendering issue.
Delta time is essential - without dt-based movement the game runs at wildly different speeds on different devices.
Game feel comes from juice - screen shake, particle bursts, crowd reactions, and sound feedback make a simple reflex game feel alive.
Future Ideas
Leaderboard using localStorage or a lightweight backend
Mobile haptic feedback on bomb hits
More sushi types per round
Animated sushi sprites
A World Cup bracket mode across multiple games
Built with HTML5 Canvas and Web Audio API by @snipforge
June 2026 - June Solstice Game Jam
Top comments (0)