Skip to content

grid

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

grid

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
_web.js
_web.js
 
 
index.js
index.js
 
 

README.md

Grid utils

CDN: https://unpkg.com/@litecanvas/utils/dist/grid.js

Usage

Lets build an arena with ASCII graphics like in classic roguelikes.

import { Grid } from "@litecanvas/utils"

// make a grid 7x7
let grid = new Grid(7, 7)

// fill the entire grid with "."
grid.fill(".")

// put a '@' in the middle
grid.set(grid.width / 2, grid.height / 2, "@")

// loop over the grid and put "#" around
for (let [x, y, cellValue] of grid) {
  if (x === 0 || y === 0 || x === grid.width - 1 || y === grid.height - 1) {
    grid.set(x, y, "#")
  }
})

document.body.innerHTML = "<pre>" + grid.toString() + "</pre>"

The result:

# # # # # # #
# . . . . . #
# . . . . . #
# . . @ . . #
# . . . . . #
# . . . . . #
# # # # # # #

.forEach()

Instead of a for-of loop, you can use the .forEach() method:

grid.forEach((x, y, cellValue, grid) => {
  if (x === 0 || y === 0 || x === grid.width - 1 || y === grid.height - 1) {
    grid.set(x, y, "#")
  }
  // optional: you can return `false` to break/stop that loop
  // return false
})

Typed Grid

You can create a grid structure thats uses a typed array rather than a "normal" array.

import { TypedGrid } from "@litecanvas/utils"

// by default, uses Uint8Array
let u8grid = new TypedGrid(5, 5)

// or specify your typed array
let i16grid = new TypedGrid(5, 5, Int16Array)

Note: TypedGrid inherits all methods from Grid.