Futbolito

• 

  Match Setup — players enter names and pick formations before the match

• 

  Live match — blue vs red, marble at center, full soccer field with nail players

• 

  GOAL!! — scorer's name appears with celebration overlay, jose leads 2-1

Inspiration

I played this game as a kid in El Salvador. A handmade wooden board with nails as players, a marble as the ball, and a popsicle stick to flick it. Every neighborhood had one. Nobody has digitized it properly so I built it.

What it does

Futbolito is a two-player browser game that recreates the classic nail soccer board game. Players drag back on the marble to aim and shoot — slingshot mechanic. The marble bounces off nails and nylon string borders. First to 3 goals wins. Goals trigger celebrations with confetti and animations. A random bird flies across and drops on the board mid-game.

How we built it

Single HTML file with embedded CSS and JavaScript. Matter.js handles the physics — marble collisions, nail bouncing, goal detection. Built using spec-driven development: scope document → PRD → technical spec → build checklist → code.

Challenges we ran into

Getting the visuals to feel like a physical handmade object instead of a generic video game. Required two full visual overhaul passes during the build.

Accomplishments that we're proud of

The board actually looks and feels like the real game. The slingshot mechanic is intuitive. The bird drop event makes people laugh.

What we learned

Spec-driven development — planning with documents before writing code makes the build faster and cleaner. This process will apply to every future project.

What's next for Futbolito

Online multiplayer, mobile PWA version, more board skins and environments, tournament mode.

Built With

• css
• html
• javascript
• matter.js
• netlify