Skip to content
A TypeScript class that makes it easy to create grid based games. Minesweeper Demo:
TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


A TypeScript class that makes it easy to create grid based games.

GridGame is a TypeScript helper class that creates a playing field.
It needs to know the amount of tiles you want horizontally and vertically.
It also supports a function that it can call that will set custom information that the game needs per tile.
For example a click counter or a secret that lies beneath the tile.
For Minesweeper the secret would be the kind of the tile: Is it a bomb or not.

GridGame contains the following helper methods: (see end of document)

It lets you create a lot with just a few lines of code:

  • Minesweeper: 45 lines of code
  • Sokoban: 67 lines of code
  • Tic-tac-toe with decision tree AI: 137 lines of code
  • Chess with Toledo Nanochess AI: 70 lines of code
  • Peg-Solitair: 36 lines of code
  • Lightsout: 25 lines of code
  • Tetris: unfinished

Here are some demos:









Tetris (unfinished)

GridGame contains the following primary methods:


import { GridGame } from './GridGame';
var gg = new GridGame(5, 5);
gg.onClick(function click(x, y) {

This will create a table with 5 rows and 5 columns.
If you click on a tile it will change color and looks slightly.
Just like a toggle button.

To make it look pretty use a style sheet like this:

td {
  width: 80px;
  height: 80px;
  border:5px outset orange;
  background-color: orange;
} {
  background-color: darkorange;
  border-style: inset;


Get back your custom information class instance that can contains things like counter or kind.

setClass(x: number, y: number, class: string)

Set the HTML style sheet class for a tile (td).

toggleClass(x: number, y: number, class: string)

Toggle the HTML style sheet class for a tile (td).

toggleButton(x: number, y: number)

Convenience function.
Simply calls toggleClass(x,y,"off").
Used in many of the demos.

onClick(callback: (x: number, y: number, button: number) => void)

Call callback on mouse click. Passes x,y coordinate of tile clicked.
As well as the mouse button that was clicked.

isPressed(x: number, y: number): boolean

Convenience function.
Returns true if x or y are out of bounds (this helps some demos work better)
Returns true if the classList contains "off".

getAllNeighbours(x: number, y: number, includeThyself=false): number[][]

Returns an array of 8 or 9 tuples with the x,y coordinates of a tile and its surrounding neighbours.
It starts top left and ends bottom right.
Why does it return x,y coordinates and not simply the tile itself ?
Because a tile is not guaranteed to have the x,y coordinates.
So this way it is guaranteed that the caller has acceess to both.

remove(x: number, y: number)

calls getTD(x,y).style.visibility = "hidden";

removeAllNeighbours(x: number, y: number, includeThyself=false)

calls getAllNeighboursTD(x,y,includeThyself).forEach((td) => = "hidden")

setHidden(x: number, y: number, trueOrFalse: boolean)

calls getTD( x,y ).style.backgroundColor = trueOrFalse ? "white" : null

hide(x: number, y: number)

calls getTD( x,y ).style.backgroundColor = "white".
The idea here is to make the tile disappear on a white page.


calls getTD( x,y ).style.backgroundColor = null.
The idea here is to make the tile use the style from the style class definition and usually reappear.


return this.getTD(x, y).style.backgroundColor == "white";
Note: Working on the Minesweeper demo made me realize that this method might not be named well...

reveal(x: number, y: number, backgroundColor: string, text: string, borderStyle = 'inset')


  • = backgroundColor;
  • = borderStyle;
  • td.innerHTML = text;

Can be used to show a hidden tile secret (like in Minesweeper).

setText(x: number, y: number, text: string)

Sets td.innerHTML = text

setTextForList(list: [[number, number]], text: string)

Pass in an array of number tuples, which are used as x,y coordinates to call setText in a loop.

getText(x: number, y: number): string

return td.innerHTML


Randomizes the tile class instances using Fishers-Yates

getRandomInt(min: number, max: number): number

returns an integer number between min and max. BOTH LIMITS ARE INCLUSIVE.

arrayEquals( array1, array2)

A nice array equals method I found on Stackoverflow.

GridGame contains the following leaky abstraction methods:

getTD(x: number, y: number): HTMLElement

Get access to the underlying HTML element.

getAllNeighboursTD(x: number, y: number, includeThyself=false): HTMLElement[]

Returns an array of 8 or 9 HTMLElements containing a td and its surrounding neighbours. It starts top left and ends bottom right.

forEachTD(callback: (x: number, y: number, td: HTMLElement) => void)

Call the callback for each tile td. Passes in x,y,td.


Add some text to the HTML document.
Usefull for quick debugging.

reveal(x: number, y: number, backgroundColor: string, text: string)

visually reveal a tile

setText(x: number, y: number, text: string)

only set the text of a tile, useful for markings


shuffle the custom information tiles so that their final location is random

You can’t perform that action at this time.