fuzzyworld

herd / files / README.md

README.md

2.3 KB · history · blame

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.

Play it →

How to Play

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

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

Source
1# Herd 🐑
2
3A browser game about herding sheep. Tap the field to move your border collie and guide the flock into the pen before time runs out.
4
5**[Play it →](https://apps.fuzzyworld.net/herd/)**
6
7---
8
9## How to Play
10
11- **Tap / click** anywhere on the field to send the dog to that spot.
12- The dog scares nearby sheep — use this to push the flock toward the pen.
13- Get enough sheep inside the pen to win the level.
14- If the timer runs out before the flock is penned, you lose.
15
16Sheep 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.
17
18---
19
20## Tech Stack
21
22| Tool | Role |
23| --- | --- |
24| TypeScript | Language |
25| Vite | Dev server & bundler |
26| HTML5 Canvas | Rendering |
27| npm | Package management |
28| GitLab Pages | Hosting |
29
30No game engine — physics, flocking AI, and rendering are all hand-rolled.
31
32---
33
34## Development
35
36### Prerequisites
37
38- Node.js 20+
39- npm 10+
40
41### Setup
42
43```bash
44git clone https://code.fuzzyworld.net/herd.git
45cd herd
46npm install
47```
48
49### Run locally
50
51```bash
52npm run dev
53```
54
55Opens at `http://localhost:5173`.
56
57### Build
58
59```bash
60npm run build # outputs to dist/
61npm run preview # serve the production build locally
62```
63
64---
65
66## Deployment
67
68Pushes to `main` automatically deploy to GitLab Pages via `.gitlab-ci.yml`. The live URL is `https://<namespace>.gitlab.io/herd`.
69
70---
71
72## Project Structure
73
74```text
75src/
76├── main.ts # entry point
77├── math/Vec2.ts # immutable 2D vector math
78├── game/ # loop, canvas setup, game state machine
79├── entities/ # Sheep, Dog, Pen
80├── ai/Boids.ts # flocking forces (separation, alignment, cohesion, flee)
81├── input/ # pointer event → world coordinate mapping
82└── levels/ # level configs (sheep count, pen size, time limit)
83```
84
85The sheep use a [boids](https://www.red3d.com/cwr/boids/) flocking algorithm extended with a flee force triggered by the dog's proximity.
86
87---
88
89## Credits
90
91Grass / field icon (favicon + logo) by [Icongeek26](https://www.flaticon.com/authors/icongeek26) from the [Flaticon outline collection](https://www.flaticon.com/authors/icongeek26/outline?author_id=296&type=standard).
92
93---
94
95## License
96
97MIT