Spain vs Argentina
Spain Loses To Argentina :(
Select Your Team (desktop)
Select Your Team (mobile)
Norway vs Argentina
Argentina Beats France!
Norway Wins!
Select Your Team (Laptop)
Argentina Beats Spain (Laptop)

Inspiration

Every football fan has replayed a real penalty shootout in their head and thought "I'd have saved that." I wanted to turn that instinct into something playable in under a minute. Pick a team, face a rival, and find out if your reads are actually as good as you think. Oh, and the World Cup is around too...

What it does

Choose from France, Spain, Argentina, or Norway. Argentina fans face France; Everyone else faces Argentina. Take 5 penalties by picking left, straight, or right, while the keeper tries to guess your side. Then the roles flip: your opponent shoots, and you have to guess where their shot is going so your own keeper dives the right way. Tied after 5? It goes to one kick each, until someone's ahead.

How we built it

Pure HTML, CSS, and vanilla JavaScript. No frameworks, no build step. Game state lives in a single object; the turn sequence is written with async/await so the flow reads top-to-bottom like a script instead of a chain of callbacks. Positioning for the ball and keeper share one coordinate system and one set of offsets, so a correct read and the actual shot always land in the same spot on screen.

Challenges we ran into

Getting the ball and the keeper to land in sync visually was harder than expected. Early versions positioned them relative to two different parent elements, so no amount of number-tweaking made them line up. Fixing it meant moving both elements into the same coordinate space and using identical offset math for both. I also went back and forth on the keeper AI: a fully random keeper is fair but forgettable, so I turned the opponent's keeper into something the player actively controls; You have to read the game to save shots, not just click.

Accomplishments that we're proud of

A fully playable, bug-free shootout loop: team select, 5 rounds, sudden death, win/lose states; built with zero dependencies, so it loads instantly and runs anywhere, including directly off GitHub Pages.

What we learned

How much small timing and pacing decisions (how long a result sits on screen before the next kick) change how a simple game feels, even with no new mechanics added.

What's next for PENALTY

Sound design (crowd tension, goal roar, save reaction), a live/upcoming World Cup match ticker, a signature celebration animation for clutch saves, and adjustable difficulty via opponent shot patterns.