Appearance
Skip to content
Arcade › MetroCraft
MetroCraft
How to play
Click the game above and it runs right here in your browser. No download, no installer, no account needed. omar dash built it with Cinevva, so it works on a phone or a tablet too.
Discussion
Nobody has said anything about MetroCraft yet. Play it, then tell omar dash what you would add next.
Make your own game
MetroCraft was built by omar dash 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 MetroCraft 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 MetroCraft
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 browser-based isometric city-building simulation titled “MetroCraft: City Architect” (brand shown as MetroCraft). Use a dark navy/charcoal application shell with a fixed top HUD, a large central canvas map, and a fixed bottom control bar. The game should be playable with mouse or touch by selecting a construction tool and clicking map tiles. World and camera: Render a 40×40 tile city map in an isometric projection on a full-size HTML canvas. Each tile is a diamond approximately 34×17 pixels at the default zoom, with a centered origin near the top-middle of the canvas. Sort/render tiles in diagonal depth order. The interior is green grass; the outer three tiles along every edge are dark blue water, creating a broad rectangular island surrounded by water. Draw thin dark green grid outlines between all tiles. There is no camera panning or zoom control. Keep the canvas beneath the UI and resize it to the available viewport between the header and footer. Map visuals and construction: Grass tiles are #4f963f-like green, water tiles dark teal-blue, and roads dark gray. A road occupies a tile and has a thin golden center marking. On a grass tile, placing Residential creates a small low-rise isometric/simple 2D building: tan body, yellow peaked roof, dark windows; Commercial uses a pale blue body; Industrial uses a muted reddish-brown body. Buildings are drawn above their tile as simple block forms. Residential capacity is 12; commercial buildings provide 8 jobs; industrial buildings provide 10 jobs. A Park can be placed for
2,000, zero population and jobs. Display the balance as a signed dollar amount. At the right show a pause/play button and simulation speed buttons 1×, 2×, and 4×, with 1× active initially, plus a Save button.
Construction sidebar: Place a translucent near-black panel in the upper-left over the map, titled CONSTRUCTION. Provide a two-column button grid with: Select; Road
20; Residential $300; Commercial $500; Industrial $450; Park
50; Demolish; and New City. Highlight the active tool blue. Under it show muted instructional text: “Click a tool, then click a tile. Roads connect automatically. Buildings need road access and utilities in later milestones.” Selecting Select and clicking a tile opens its details in the inspector. Selecting a build tool and clicking a valid grass tile performs the construction and displays a temporary rounded toast notification. Road construction costs 20 and sets that tile as a road. A building tile cannot receive another building. Residential/commercial/industrial placement sets the corresponding zone, building type, capacity/jobs, resets age to zero, and subtracts its cost. Demolish clears road, zone, and building from a tile and changes treasury by -$50, with a notification saying “Removed · $50 refund applied.” Clicking water should instead show “That tile is not buildable”; insufficient money should show “Not enough treasury.” New City asks for confirmation and reloads/resets the game.
Inspector: Place a dark panel in the upper-right titled INSPECTOR. Initially show “Select a tile to inspect its terrain, zoning, and development.” When a tile is selected, show rows for Cell (x,y), Terrain, Road (Connected or None), Zone (or em dash), Building (type or Empty), Population, Jobs, and Land value. Grass without a road has land value 38; grass with a road has 72; water shows an em dash. Selected tiles receive a bright blue outline around their isometric diamond. Update the status text in the footer to identify the current tool and selected cell.
Simulation rules: Run a lightweight timed simulation unless paused. Increase each building’s age toward 100 by the current speed. Residential population is min(12, floor(age/2)+2), so newly constructed residential buildings begin at 2 residents and grow over time. Total population is the sum of residential population; total jobs are commercial jobs plus industrial jobs. Income per simulation tick is floor(population×0.8 + jobs×0.45). Costs are roads×0.15 plus buildings×0.4. Treasury changes over time by (income-cost)×0.08×speed, and the date advances by speed×0.08 days per tick, displayed as Mar 1 + floor(day/30), 2042. Pause freezes aging, date, and treasury changes. Cars should appear only after roads are built: periodically spawn up to min(18, floor(number of road tiles/2)) small yellow cars on connected road routes, moving from tile center to tile center. Generate short random non-repeating routes through orthogonally adjacent road tiles; remove a car when it reaches a dead end unless it can start a new route. Use traffic density to color road tiles based on orthogonal road neighbors: green for low, amber for more than one, red for more than two.
Bottom controls: Use a dark footer with overlay buttons Normal, Traffic, Land Value, Power, and Density. Normal shows standard terrain/road colors. Traffic colors road tiles according to neighboring road count as above. Land Value shows water dark blue, developed/building land light green, and other land darker green. Power shows water dark blue, roads bright blue, and other land dark green. Density colors residential buildings blue, commercial buildings amber, industrial buildings red, water dark blue, and other land green. Highlight the selected overlay in blue. Include a lower-left legend over the map for grass, road, and selected colors, and a lower-right minimap panel around 150×100 pixels with a blue/green miniature of the whole 40×40 map; roads are gray and buildings are yellow/orange marks. Show transient blue-bordered pill-shaped toast messages near the top-center for actions such as construction, pause/resume, saving, and loading.
Persistence: The Save button stores the complete tile state, treasury, and day in browser localStorage under a MetroCraft save key and displays “City saved locally.” On startup, restore a valid saved city and show “Saved city restored.” Keep the art style clean, minimal, flat-color, developer-tool-like UI with crisp sans-serif text, thin borders, compact buttons, and no unnecessary decorative imagery.
