Phase How to Make a Turn Based Game (Browser Grid Loop 2026)

Most beginners who search “how to make a turn based game” want a grid, a select-move-act loop, and an End Turn button that advances initiative — not a 40-hour grand-strategy economy on day one. A full Fire Emblem campaign with support conversations and permadeath branches is a specialist craft. A browser tactics skirmish is different. A coding agent scaffolds the grid, path flood-fill, and action-point rules from one prompt, and AI generation covers terrain tiles, unit sprites, and UI cues. On desktop or web, that means WizardGenie for the select-move-act interpreter, Tileset Forge for grass and wall tiles, Quick Sprites for knight and slime portraits, and SFX Gen for select, move, and hit clips. This guide is the honest end-to-end for how to make a turn based game in 2026, as a weekend build you can finish once.

What how to make a turn based game actually means in 2026

The query “how to make a turn based game” hides three intents. Some searchers want a commercial engine with prefab tactics templates and multiplayer matchmaking — that is storefront shopping, not a minimal playable loop. A second intent is a macro strategy game with fog of war, resource ticks, and empire building — that is covered in the sibling guide on how to make a strategy game. A third intent is a dungeon crawl with room graphs and FOV — see how to make a dungeon crawler. The intent this guide targets is a browser grid loop: click a unit, show move range, path to a tile, spend an action to attack or wait, then end the turn and advance initiative. That is a weekend build, it demos the Sorceress toolset, and it is the format most turn based game tutorial and javascript turn based game searchers actually want.

The presentation contract is small and strict. A title screen shows the stage name, control hints (click to select, click a blue tile to move, click an enemy in range to attack, End Turn), and Play. The play screen shows an 8×8 or 10×10 grid, an initiative strip along the top, action-point text under the selected unit, and optional mute toggle. When every living player unit has acted or you press End Turn, resolve enemy AI for one unit at a time, then start the next round. The turn-based strategy overview on Wikipedia (verified 2026-08-28) groups chess-like and tactics-grid designs under discrete turns — cite that page when you write your itch.io blurb so players know you shipped a browser tactics game grid loop, not a real-time click-fest.

The turn-based grid loop in one minute (select, move, act, end turn)

Five moving parts, repeated until one side has no living units. First, select — click a friendly unit whose turn it is (or allow free selection within the current side’s phase). Second, show range — flood-fill walkable tiles up to the unit’s move budget, tint them blue, and mark attackable enemies in red. Third, move — click a blue tile, animate or snap the unit along the path, and subtract path length from remaining move points. Fourth, act — attack an adjacent enemy, use a wait action, or skip; spending the act flag usually ends that unit’s turn. Fifth, end turn / advance — move initiative to the next living unit, refresh move and act budgets at the start of each round. Opportunity attacks, overwatch, and multi-attack chains are polish layered after one honest three-unit skirmish is readable at sixty frames per second.

Pick your engine for how to make a turn based game: Phaser, Canvas, or WizardGenie

Three good targets in 2026, each with a different trade-off. Vanilla Canvas is the honest default and the pick this guide recommends for a first build. Store the map as a 2D array of tile types, blit terrain from a tileset image, and draw unit sprites centered on cell coordinates. Click maps to grid indices with Math.floor(x / TILE) and Math.floor(y / TILE). The MDN Canvas API docs (verified 2026-08-28) cover everything you need for an html5 turn based game prototype in under 300 lines including flood-fill move range, path reconstruction, and a simple initiative queue.

Action points versus full-move-then-attack matter for jam scope: give each unit a move budget (for example 4 tiles) and one act flag per turn. Moving spends the budget; attacking or waiting spends the act flag. Checking remaining move and act before accepting clicks is the single habit that separates a fair grid tactics tutorial from a unit that teleports twice and still attacks.

Phaser v4.2.1 “Giedi” (released 9 July 2026, verified 2026-08-28 on the official Phaser stable download page) becomes the right pick if you want Scene stacks, cameras that pan a larger map, tweened unit hops between cells, or a mission select screen. Phaser does not invent your initiative rule — you still need the same select-move-act state machine. Use Phaser when Scene stacks and cameras are the product; use raw Canvas when the product is a turn based game tutorial people can read in one sitting. A phaser turn based campaign is a fine v2 once the Canvas prototype proves the feel.

WizardGenie is not a separate tactics engine — it scaffolds whichever of the two you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-28 in src/app/_home-v2/_data/tools.ts). For tactics loops, any frontier model scaffolds grid math, flood-fill, and initiative queues in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.

Step 1 — model grid, units, initiative, and action points

Nothing else in the pipeline matters if pathfinding walks through walls or End Turn skips the active unit. Start with a small, testable model:

const TILE = 48;
const COLS = 8, ROWS = 8;
const map = Array.from({ length: ROWS }, () =>
  Array.from({ length: COLS }, () => 0) // 0 floor, 1 wall
);
// stamp a few walls
[[3,3],[3,4],[4,3]].forEach(([r,c]) => { map[r][c] = 1; });

const units = [
  { id: "knight", side: "player", r: 6, c: 1, hp: 12, move: 4, atk: 4, acted: false },
  { id: "archer", side: "player", r: 6, c: 2, hp: 8, move: 3, atk: 3, acted: false },
  { id: "slime", side: "enemy", r: 1, c: 5, hp: 10, move: 3, atk: 2, acted: false },
];

let initiative = [...units]; // sorted each round by speed if you add it
let idx = 0;
let selected = null;
let moveTiles = new Set();
let phase = "select"; // select | moved | done

function key(r, c) { return r + "," + c; }

function flood(unit) {
  const reach = new Map(); // key -> steps
  const q = [[unit.r, unit.c, 0]];
  reach.set(key(unit.r, unit.c), 0);
  while (q.length) {
    const [r, c, d] = q.shift();
    if (d >= unit.move) continue;
    for (const [dr, dc] of [[1,0],[-1,0],[0,1],[0,-1]]) {
      const nr = r + dr, nc = c + dc;
      if (nr < 0 || nc < 0 || nr >= ROWS || nc >= COLS) continue;
      if (map[nr][nc] === 1) continue;
      if (units.some(u => u.hp > 0 && u.r === nr && u.c === nc && u.id !== unit.id)) continue;
      const k = key(nr, nc);
      if (reach.has(k) && reach.get(k) <= d + 1) continue;
      reach.set(k, d + 1);
      q.push([nr, nc, d + 1]);
    }
  }
  return reach;
}

function current() { return initiative[idx]; }

function endUnitTurn() {
  current().acted = true;
  selected = null;
  moveTiles = new Set();
  phase = "select";
  do {
    idx = (idx + 1) % initiative.length;
  } while (initiative[idx].hp <= 0);
  if (initiative.every(u => u.side === "player" ? u.acted || u.hp <= 0 : true)) {
    // refresh player acted flags at round boundary — simplify as needed
  }
}

Unit-test three cases before you generate art: a knight can flood to a four-tile diamond on open ground; a wall blocks the flood; and selecting an enemy unit during the player phase is rejected. Those three tests catch ninety percent of javascript turn based game bugs. Keep attack range to adjacent orthogals on the first build — diagonal and ranged attacks are a second afternoon.

Step 2 — wire select-move-act-end-turn in WizardGenie

With grid helpers drafted, open WizardGenie. Drop in a bare index.html shell that loads a 384×384 canvas (8×8 at 48px tiles), a HUD for initiative and action points, and an End Turn button. Give the agent one paragraph: Build a browser turn-based tactics game on an 8x8 grid. Floor and wall tiles. Three units: player knight, player archer, enemy slime. On click, if it is a player unit’s turn, select it and flood-fill move range up to its move budget, skipping walls and occupied cells. Click a blue tile to move. After moving, allow one adjacent attack or Wait. Attacking deals atk damage; at 0 HP remove the unit. End Turn advances initiative to the next living unit. Enemy slime on its turn moves one step closer and attacks if adjacent. Show initiative strip, remaining move, and remaining HP. Autosave best clear time to localStorage. Feed that to any coding model in the lineup and the interpreter scaffolds in under five minutes.

The remaining hour is polish via follow-up prompts. Add a path preview — dashed polyline from unit to hovered blue tile — ten lines. Add a damage float — “-4” rising for 400ms after a hit — eight lines. Add a win / lose screen — all enemies dead versus all players dead — twelve lines. Add a restart that resets unit positions without reloading the page — ten lines. Each item is a follow-up prompt, and the whole browser tactics game comes together over a Saturday afternoon.

Optional siblings: if your jam needs continuous-time base building instead of discrete turns, the RTS angle belongs in a later Wave 146 brief on how to make an rts game. For deck-driven turns without a grid, borrow the draw loop from how to make a deck builder game. For checkers-style capture without action points, see how to make checkers.

Persist clear times with the MDN localStorage API (verified 2026-08-28) so a refresh still shows the player’s best skirmish. Keep the save payload tiny: map seed, unit HP, and elapsed seconds — not a full replay buffer.

Step 3 — Tileset Forge terrain, Quick Sprites units, SFX Gen cues

Flat colored rectangles read as a tech demo even when the state machine is perfect. Three asset passes cover the whole html5 turn based game experience:

• Terrain tiles — one grass/dirt/stone/wall sheet from Tileset Forge. Prompt for “top-down fantasy grass dirt stone wall tiles, seamless 48px game tileset, flat lighting, no text.” Generate with Nano Banana Pro at 18 credits per image (src/lib/models.ts). Keep a second 18-credit retry if edges do not slice cleanly. Blit floor and wall cells under the unit layer.
• Unit portraits — three generations from Quick Sprites at 9 credits each (CREDITS_PER_GEN in src/app/quick-sprites/page.tsx): “top-down pixel knight unit, transparent background”, “top-down pixel archer unit, transparent background”, “top-down pixel green slime, transparent background”.
• Optional stage frame — one parchment HUD border from AI Image Gen if you want a framed tactics board (Nano Banana Pro 18 credits). Skip it on the first pass if you are under a one-hour jam clock.

Open SFX Gen, describe each clip in plain language (“soft UI blip on unit select”, “short boot step on move”, “blade hit impact”, “whoosh end-turn chime”), and export WAV into your assets/audio/ folder. Billing is 1 credit per second of generated audio per src/app/sfx-gen/page.tsx — four short clips land around 5 credits total. Mute by default with a toggle — mobile browsers often block autoplay until the first click anyway.

Step 4 — playtest the browser grid loop like a jam judge

Before you share the build, run a five-minute checklist borrowed from game-jam judging:

1. Select is honest — only the current side’s living units highlight; enemy clicks during the player phase do nothing.
2. Move range is fair — walls and occupied cells block the flood; move cost equals path length.
3. Act gate works — after an attack or Wait, the unit cannot move again this turn.
4. Initiative advances — End Turn and auto-advance both land on the next living unit; dead units are skipped.
5. Win/lose is clear — wiping the slime shows Victory; wiping both player units shows Defeat and Retry.

Log issues as WizardGenie follow-ups, not rewrites. “Block diagonal moves on the first build” is one prompt. “Show remaining move points under the selected unit” is another. The Sorceress tools guide lists every asset tool if you want to swap Quick Sprites for a hand-drawn sheet later.

What how to make a turn based game costs on Sorceress in 2026

A honest budget for the stack above against the 2026 Sorceress rate card (verified 2026-08-28 against local source):

• Tileset Forge terrain sheet + one retry: 36 credits (0.36 USD)
• Three Quick Sprites units: 27 credits (0.27 USD)
• Four SFX Gen clips (~5 seconds total): ~5 credits (0.05 USD)
• Coding-model API time with planner + budget executor: under 0.40 USD

Total roughly 68 credits or 0.68 USD in generation, plus a small model bill. The free 100-credit signup grant (SIGNUP_GRANT in src/app/api/admin/credits/route.ts) covers the full asset stack outright. Lifetime Early Access sits at 49 USD (LIFETIME_PRICE in src/app/plans/page.tsx) if you want desktop WizardGenie with auto-update for the next jam. Credits convert at 100 per dollar (CREDITS_PER_DOLLAR in src/lib/models.ts).

That is the whole path for how to make a turn based game as a browser grid loop in 2026: prove select-move-act on Canvas, let WizardGenie scaffold the interpreter, dress the board with Tileset Forge and Quick Sprites, and ship the skirmish before the weekend ends. When you are ready for empire-scale turns instead of a single grid fight, graduate to the strategy sibling — but finish one honest action-point system first.