Skip to content

Arcade › Tidegrid

Tidegrid

  • 3d
  • exploration
  • sailing
  • procedural
  • pixel-art
  • top-down
  • browser
0
Remix it Discord

17 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. Dustin Freeman built it with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about Tidegrid yet. Play it, then tell Dustin Freeman what you would add next.

Make your own game

Tidegrid was built by Dustin Freeman with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix Tidegrid opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for Tidegrid

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a playable browser game titled “Tidegrid,” using a Three.js ES-module 3D scene with a top-down/trailing third-person camera following a small stylized pixel-art sailing boat. The player sails across a finite 28 by 28 tile ocean world; each tile is 18 world units square, making a 504 by 504 map. Build the world procedurally and deterministically from smooth noise into four biome types: Vast Ocean, Coral Reefs, Mangrove Swamp, and Volcanic Region. Each tile should be a low rectangular water block with a biome-specific nearest-neighbor pixel texture. Ocean water is deep blue with light foam streaks; coral water is bright turquoise with colorful speckles; mangrove water is muted green with dark and light marsh-like marks; volcanic water is ash-brown with dark rocks and orange flecks. Use a large dark sea-floor cylinder underneath, atmospheric fog, a bright sky-colored background, hemisphere ambient light, and a warm directional sun with shadows.

Scatter islands according to biome-specific noise thresholds, with more islands in coral and mangrove areas. Islands are chunky square low-poly blocks rising above the water. Use sandy textured bases for ordinary, ocean, coral, and mangrove islands, and dark rocky bases for volcanic islands. Add scenery that visibly distinguishes biomes: ocean islands have a blocky palm trunk and four angular green fronds; mangrove islands have three brown trunks with cubic green canopies; coral islands have several colorful blocky coral heads in pink, cyan, yellow, and salmon; volcanic islands have a dark faceted cone with a bright glowing orange lava vent at the top. Also place small colorful coral clusters on non-island coral tiles. Use generated pixel textures with nearest-neighbor filtering so the world has a crisp pixel-art/low-poly aesthetic.

Create a small blocky boat centered in the map. It has a wooden rectangular hull, raised bow, wooden cabin, tall mast, pale square sail with a blue patch, and a small yellow flag. The boat floats at water level, gently bobs and tilts as it moves, and rotates to face its heading. Boat movement is momentum-based: W or Up accelerates forward, S or Down reverses/brakes, A or Left and D or Right steer, and Shift boosts acceleration and maximum speed. Normal maximum movement speed is about 13 and boosted maximum is about 20; reverse speed is about -6. Apply drag when no throttle is held and stronger turning based on current speed. Add a subtle procedural water drift. Keep the boat inside the map boundaries. Islands are solid obstacles: if the boat approaches one, push it away from the island and reduce its speed. When traveling faster than roughly 4.2, periodically spawn pale translucent rectangular wake planes behind/around the boat; make them expand and fade out over less than a second.

Use a trailing elevated perspective camera around 82 units high, positioned behind the boat relative to its current heading at roughly 34 units distance, smoothly interpolating as the boat moves and looking toward a point ahead of the boat. The visible composition should show many tile seams, water texture, islands, and the boat from above, with fog blending distant map edges into the biome-colored sky. When the boat enters a different biome, change the scene fog and background color and ambient-light tint to match that biome: ocean blue, coral pale cyan, mangrove pale green, or volcanic warm orange.

Add a fixed responsive HUD using dark translucent rounded panels, thin pale borders, soft shadows, and light sans-serif text. At the upper left/top area show the title “Tidegrid” in uppercase cyan-accent lettering and the subtitle “Sail the biome chart — mangroves, coral shelves, volcanic waters, and open ocean.” Show live stats for Tile (grid x,y), Heading (one of N, NE, E, SE, S, SW, W, NW), and Speed in knots. At the bottom center show the current biome in large uppercase accent text and a biome-specific description, followed by “Explored X/784 tiles.” Start with the boat’s tile marked unseen and increment the explored count whenever a new tile is entered; update the biome banner live. On desktop show a lower/right hint reading “WASD / Arrow keys to sail • Shift to boost • Explore the full grid map.” On mobile hide that hint and provide a touch D-pad in the lower left with four press-and-hold arrow buttons for forward, reverse, left, and right steering, plus a large round “Wake” button in the lower right that acts as boost. Prevent page scrolling, support safe-area insets, and resize the renderer/camera with the window.

Expose window.getGameState() returning the player x/z position, heading, speed, current biome, explored tile count, and world dimensions. Expose window.setGameState(patch) allowing live updates to player x, z, heading, speed, and exploredTiles, then refresh the HUD. There is no combat, inventory, quest system, minimap, trading, or win screen: the core loop is simply sailing, avoiding islands, discovering the generated biome grid, and watching the changing ocean scenery.”

More free browser games

Browse the whole Arcade →