TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published


    Provides logic for tilemaps. There is no actual drawing involved, that is something you need to do for yourself.


    • Small and simple
    • Provides only the logic for tilemaps
    • No dependencies


    npm install tilelogic

    (or if you prefer Yarn it would be yarn add tilelogic)

    Constructing a tilemap

    import { TileLogic } from 'tilelogic';
    var tileLogic = new TileLogic(10, 10);
    // Creates a 10 by 10 tilemap

    By default all tiles will be filled with null. In order to fill the tile map with the values you would like you would need to provide a third parameter (a so-called reviver) which is a function that provides the x and y coordinate and needs to return the data

    const tileLogic = new TileLogic(4, 4, (x, y) => {
      if (x === 0 && y === 0) {
        return 'Hello';
      return 'World';

    If you are using TypeScript, TileLogic is using generics to set the type of the tiles

    const tileLogic = new TileLogic<string>(4, 4, () => 'Hello World');

    Accessing a tile

    Tiles can be accessed through a convienent get method.

    tilelogic.get({ x: 0, y: 0 }); // < The content at position x: 0 y: 0

    Setting content in a tile

    tileLogic.set({ x: 0, y: 0, content: 'Hello!' }); // < The content of the tile at position x: 0 y: 0 will now be "Hello"

    Helper functions


    Iterates through the tilemap without modifying it. Starts at the top-left tile and goes through it row by row.

    tilemap.forEach(function(x: number, y: number, tile: T) {
      // Iterate through the tilemap
      // x and y are the current position
      // tile is the content of each tile


    Iterates through the tilemap and returning

    tilemap.map(function(x, y, tile) {
      // Iterate through the tilemap
      // x and y are the current position
      // tile is the content of each tile
      return x;
    // We now get an array with all the x-values


    Returns a two-dimensional array with the data stored in the tile map.


    Takes in a two-dimensional array and returns a TileLogic instance

    const tiles = [
      [2, 2],
      [1, 1],
    const tileLogic = TileLogic.fromArray<number>(tiles);


    Compare two tilemaps with each other and returns true if they match.

    tilemap.equals(new TileMap(10, 10));


    Flattens the tile map into a one-dimensional array to make it easier to draw either on the DOM or canvas.

    tilemap.flatten(); // Returns an array with the content of each tile

    Immutable TileLogic

    This library also exports an immutable version of TileLogic where any change to its data returns a new instance. ImmutableTileLogic includes all functionality from TileLogic as well as some extra helpful tools

    import { ImmutableTileLogic } from 'tilelogic';
    const tileLogic = new ImmutableTileLogic<string>(4, 4, () => 'Hello');
    const newTileLogic = tileLogic.set({ x: 2, y: 2, data: 'World' }); //< Returns a new instance and leaves the original untouched
    const otherTileLogic = newTileLogic.swap({ x: 2, y: 2 }, { x: 0, y: 0 }); //< Returns a new instance where x: 2 y: 2 and x: 0 y: 0 have been swapped and 'World' is now at position x: 0 y: 0

    Using a cursor to navigate

    TileLogic also provides a cursor to navigate inside the tilemap. It is read-only and is not able to modify the tile map directly.

    const tileLogic = new TileLogic<string>(4, 4, () => 'Hello');
    const cursor = tileLogic.cursor({ x: 0, y: 0 });
    cursor.content(); // < Returns 'Hello'

    The cursor provides up, down, right, left and move methods to move in any direction.


    Tilelogic is public domain. If this does not work for you, you can alternatively use the MIT license.


    npm i tilelogic

    DownloadsWeekly Downloads





    (Unlicense OR MIT)

    Unpacked Size

    48.6 kB

    Total Files


    Last publish


    • stoney