🏝️ Drysland

🥇 1st place in the Three.js Journey Challenge 017

Try it live here 👉 drysland.dammafra.dev

Inspired by classic pipe-connection games, Drysland is a relaxing, minimalist puzzle experience where you restore the flow of a river across a parched island by rotating and reconnecting its broken segments to bring water — and life — back to the land.

Each level in Drysland is a procedurally generated island that gradually increases in size and difficulty. Pipe networks are created using a simplified version of the Growing Tree algorithm, ensuring each puzzle is both solvable and unique.

Technologies Used

• Three.js (3D rendering)
• Tweakpane (Debug)
• @yomotsu/camera-controls
• @pmndrs/pointer-events
• GSAP
• Firebase
• Tailwind

Setup

# Install dependencies (only the first time)
npm install

# Run the local server at localhost:5173
npm run dev

# Build for production in the dist/ directory
npm run build

Features

TBD

Level Generation

All levels in Drysland are guaranteed to be solvable. The game uses a custom adaptation of the Growing Tree algorithm, commonly used for maze generation.

The core idea is to “carve” one or more continuous paths through a fixed-size hexagonal grid, primarily using a depth-first traversal (DFS).

Once the main paths are generated, the algorithm performs a second pass to insert additional connections between blocks along the existing routes, subtly increasing the complexity without breaking solvability.

Finally, all tiles are randomly rotated to scramble the solution and form the playable puzzle.

The algorithm is configurable, the main parameters currently in use are:

• Traversal strategy: defines the node selection method during path carving (e.g. DFS, BFS, or hybrid approaches).
• Grid radius: determines the size of the hexagonal level.
• Grid coverage: controls how much of the grid is used to generate the main path(s).
• Extra link probability: chance to add additional connections between blocks during the second pass.
• Dead-end preservation: percentage of dead ends that are intentionally left untouched to preserve challenge and variety.

These parameters allow for fine-tuning the level structure and difficulty, and can be adjusted to explore different types of puzzle layouts. There’s room to explore more sophisticated path-building strategies.

Save System & Sync

Drysland automatically saves your progress locally using the browser’s local storage, so you can pick up right where you left off. For cross-device play, you can optionally log in with a Google account to sync your progress across multiple devices. If differences are detected between the local and cloud save data, a simple conflict resolution system will help you choose which version to keep.

Graphics Settings

Drysland offers a simple toggle between Quality and Performance modes. This setting adjusts shadows, water effects, and other visual details to strike a balance between visual fidelity and smooth performance. Your preference is saved and applied automatically each time you return.

Mobile-Friendly

Drysland is optimized for mobile devices, providing a smooth and engaging experience on smartphones and tablets. It adapts to smaller screens, ensuring easy interaction and navigation on touch interfaces.

|

|

|

|

Credits

Check out the credits section in the project for a full list of resources used

• Hexagon Kit
  by Kenney.nl

• Cursor Pack
  by Kenney.nl

• Wind flow implementation
  by @boytchev from CodePen

• Happy Relaxing Loop Sound Effect
  by Sergei Chetvertnykh from Pixabay

• Swing Whoosh In Room 8
  by floraphonic from Pixabay

• UI Pop Up 7
  by floraphonic from Pixabay

• Multi Pop 1
  by floraphonic from Pixabay

• Ocean Waves
  by Lynda Smith from Pixabay

• Notification Sound
  by Rasool Asaad from Pixabay

• Skybox
  from Freestylized

• Low-Poly Seagull (with Animation & Rigged)
  by simonaskLDE [CC] from Sketchfab

• Sail Ship
  by Quaternius from Poly Pizza

• Sailboat
  by Poly by Google [CC] from Poly Pizza

Feedback

If you have any suggestions, feel free to reach out!

License

© 2025 Francesco Dammacco
This project is licensed under the GNU Affero General Public License v3.0.
See the LICENSE file for details.