Dream It, Build It: A Whole Block World in a Single HTML File

Oct 28

Dream It, Build It: A Whole Block World in a Single HTML File

Some ideas sound like they need a game engine, an installer and a few gigabytes of downloads. A first-person world made of blocks, one you can walk across, dig into and build on, is one of them. Our newest demo does it in one web page.

Meet Dream It, Build It. Open the link, press Start building, and you’re standing on a small island under a blue sky. The opening screen sums it up plainly: an island, nine kinds of block, and no rules.

What You Can Do

The island is yours to reshape. Break blocks, place blocks, carve a cave into a hillside, raise a tower on the beach. The block bar at the bottom holds nine materials: grass, dirt, stone, sand, log, leaves, planks, brick and glass. Leaves and glass are see-through, so windows and canopies look the way they should.

Want a better view of your work? Hit Fly and lift off. Bored of this island? New world rolls a fresh one.

Controls on Any Device

The page notices whether you’re on a computer or a phone and adjusts itself.

On desktop: W A S D to move, Space to jump, the mouse to look around, left click to break and right click to place. Number keys 1 to 9 or the scroll wheel pick a block, and F toggles flight.
On touch screens: drag on the left side to move and the right side to look. Tap a block to build or break, and use the round button to switch between the two. Fly, Jump and Down buttons handle the air.

A ? button brings the controls back up anytime.

How the Island Gets Made

Every island is generated on the spot from a seed, a single number that drives a small random generator. That randomness feeds a noise function that shapes smooth hills and valleys across a 40 × 40 block footprint, up to 28 blocks tall.

The terrain then gets its layers. Grass on top, a few blocks of dirt beneath, stone below that. Low ground near the water turns to sand, giving the island its beaches. The edges slope down so the land reads as an island rather than a square. Finally a scattering of trees goes in, each a trunk of logs topped with a rounded crown of leaves.

Same seed, same island. New seed, new world.

Under the Hood

The 3D rendering runs on three.js, a widely used JavaScript library for WebGL graphics. The world itself is stored as one compact array of numbers, one entry per block position, which makes reading and changing it fast.

When you click, the page casts a ray from your eye into the grid to find exactly which block you’re pointing at. Collision checks keep you from walking through walls, and stop you from placing a block inside your own body.

Your world also saves automatically in your browser’s local storage. Close the tab, come back later, and your tower is still standing. Nothing is uploaded anywhere; the save lives on your device.

Why Build It This Way

This is the same spirit as our earlier walkthrough on fetching API data with plain JavaScript: show how much the modern browser can do with very little. No app store, no account, no install. One file holds the whole thing, terrain generator, physics, controls and save system together.

Dream It, Build It: A Whole Block World in a Single HTML File

Dream It, Build It: A Whole Block World in a Single HTML File

What You Can Do

Controls on Any Device

How the Island Gets Made

Under the Hood

Why Build It This Way

Go Build Something

Fetch, Parse, Render: A Live Walkthrough of Public API Data in Plain JavaScript

Your Site Title

email@example.com