Math in Grid | HTML5 Game - Phaser 4

Math in Grid is a grid arithmetic puzzle game template (built with Phaser 4 + TypeScript) where the player places the operators of a level between its numbers and the results have to add up to the target. It ships with three packs of levels, six lessons that teach the rules as they are played, and a generator that draws and verifies new levels.

Core Gameplay

• The puzzle: every number has to be used by an operator beside it, and the results have to add up to the target at the top of the screen.
• Placing operators: the operators a level offers wait on a shelf below the board. Tap one and then the slot it belongs in, or drag it across. Each of the four operators (+, -, ×, /) works on the numbers around the cell it lands in.
• Reading the board: a placed operator shows its result in its cell, the board adds those results up above itself, and a level that reaches its target takes a checkmark and a burst of confetti.
• Lessons and progress: each pack opens with short lessons that teach one step at a time, solved levels are saved in the browser and marked in the level list, and the next packs open as the player comes along.

Level Generator

• Fresh levels whenever you need them: a built-in generator draws new levels for the board, so the game does not run out of puzzles.
• Every level is checked before it is accepted: the generator takes a level only when exactly one placement of its operators reaches the target, every number on the board is used, and the tiles sit together in the middle of the board instead of scattered around it.
• You choose how hard: from two or three operators on an easy level up to six on an expert one.
• Draw a new set, or review the old one: the generator can redraw the levels of the packs, and it can read the levels already in the game back and report how each one solves.
• Look at a level before you play it: it can sketch a level as a small grid in the terminal, so a board can be checked without opening the game.

Template Features

• Reskin-ready with a dedicated reskin guide and comprehensive documentation.
• Complete documentation including architecture overview, gameplay rules, asset catalog, and reskin guide.
• Designed for 1080×1920 (9:16 portrait) mobile target resolution.

Tech Stack

• Phaser 4
• TypeScript
• Vite

Asset Credits

• Images: toffeecraft (itch.io), zeromatrix (itch.io)
• Music: donat-baracsi (itch.io)