Herd 🐑
A browser game about herding sheep. Tap the field to move your border collie and guide the flock into the pen before time runs out.
How to Play
- Tap / click anywhere on the field to send the dog to that spot.
- The dog scares nearby sheep — use this to push the flock toward the pen.
- Get enough sheep inside the pen to win the level.
- If the timer runs out before the flock is penned, you lose.
Sheep flock together naturally, so a little pressure in the right direction goes a long way. Chasing them head-on scatters the herd — work from the sides and behind.
Tech Stack
| Tool | Role |
|---|---|
| TypeScript | Language |
| Vite | Dev server & bundler |
| HTML5 Canvas | Rendering |
| npm | Package management |
| GitLab Pages | Hosting |
No game engine — physics, flocking AI, and rendering are all hand-rolled.
Development
Prerequisites
- Node.js 20+
- npm 10+
Setup
git clone https://code.fuzzyworld.net/herd.git
cd herd
npm install
Run locally
npm run dev
Opens at http://localhost:5173.
Build
npm run build # outputs to dist/
npm run preview # serve the production build locally
Deployment
Pushes to main automatically deploy to GitLab Pages via .gitlab-ci.yml. The live URL is https://<namespace>.gitlab.io/herd.
Project Structure
src/
├── main.ts # entry point
├── math/Vec2.ts # immutable 2D vector math
├── game/ # loop, canvas setup, game state machine
├── entities/ # Sheep, Dog, Pen
├── ai/Boids.ts # flocking forces (separation, alignment, cohesion, flee)
├── input/ # pointer event → world coordinate mapping
└── levels/ # level configs (sheep count, pen size, time limit)
The sheep use a boids flocking algorithm extended with a flee force triggered by the dog's proximity.
Credits
Grass / field icon (favicon + logo) by Icongeek26 from the Flaticon outline collection.
License
MIT