nonogram.Editor

new nonogram.Editor(
  4,
  8,
  'edit1',
  { theme: {
    threshold: 0.2,
    isMeshed: true,
    boldMeshGap: 2 }})

new nonogram.Editor(
  2,
  4,
  'edit2',
  { grid: [[1, 0, 1, 0], [0, 1, 0, 1]] })

nonogram.Game

new nonogram.Game(
  [[1,1], [1,1]],
  [[1], [1], [1], [1]],
  'play1',
  { theme: {
    filledColor: '#0c6',
    correctColor: '#0c6' }})

new nonogram.Game(
  [[1,1], [1,1]],
  [[2], [], [2], []],
  'play2')

nonogram.Solver

new nonogram.Solver(
  [[1,1], [1,1]],
  [[2], [], [2], []],
  'solve1',
  { delay: 200 }).solve()

window._row = [
  [7, 2, 2, 7],
  [1, 1, 1, 2, 1, 1],
  [1, 3, 1, 3, 1, 1, 3, 1],
  [1, 3, 1, 2, 1, 1, 3, 1],
  [1, 3, 1, 2, 1, 3, 1],
  [1, 1, 2, 2, 1, 1],
  [7, 1, 1, 1, 7],
  [2],
  [2, 3, 2, 1, 4],
  [1, 1, 3, 3, 2, 1],
  [3, 1, 3, 2, 2],
  [1, 1, 1, 3, 1, 1],
  [1, 5, 1, 1, 1, 1],
  [1, 1, 1, 1, 3, 1],
  [7, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1, 3, 1, 1, 1, 2, 2],
  [1, 3, 1, 2, 1, 2, 1, 1],
  [1, 3, 1, 1, 1, 2],
  [1, 1, 2, 1, 1],
  [7, 1, 3, 1],
]

window._column = [
  [7, 1, 2, 7],
  [1, 1, 1, 1, 1, 1],
  [1, 3, 1, 1, 1, 3, 1],
  [1, 3, 1, 1, 1, 1, 3, 1],
  [1, 3, 1, 1, 1, 1, 3, 1],
  [1, 1, 2, 1, 1],
  [7, 1, 1, 1, 7],
  [4],
  [4, 2, 2, 2, 2, 2],
  [1, 2, 1, 1, 1, 2, 3],
  [1, 2, 2, 2],
  [2, 3, 1, 1, 1, 1, 1],
  [3, 3, 2, 3, 1, 1],
  [1, 1, 3, 2],
  [7, 1, 1],
  [1, 1, 1, 1, 1, 1, 1],
  [1, 3, 1, 3, 2, 3],
  [1, 3, 1, 2, 2, 1, 1],
  [1, 3, 1, 1, 1, 1, 1],
  [1, 1, 5, 3],
  [7, 1, 1, 2, 1],
]

new
  nonogram.Solver(
    window._row,
    window._column,
    'solve2')
  .solve()

Advanced Usages

Create Your Own Nonogram

Here is an example showing how to use listeners to create nonogram.Game and nonogram.Solver instances automatically.

function f() {
  window.advEditor1 = new nonogram.Editor(
    +document.getElementById('m').value,
    +document.getElementById('n').value,
    'adv-edit1',
    { threshold: +document.getElementById('threshold').value,
      grid: window.advEditor1 ? window.advEditor1.grid : undefined,
      onHintChange(row, column) {
        new nonogram.Game(row, column, 'adv-play1', { theme: { boldMeshGap: 0 } })
        new nonogram.Solver(row, column, 'adv-solve1').solve()
      } })
}
document.getElementById('m').addEventListener('change', f)
document.getElementById('n').addEventListener('change', f)
document.getElementById('threshold').addEventListener('change', f)
f()

Interactive Nonogram Solver

This example shows how to solve the nonogram by given hints, which are separated by newlines and commas.

Put your rows in the first textarea, columns in the second textarea. One row (or column) a line, numbers separated by any non-numerical characters. To represent an empty row (or column), you can use an empty line, or a line including the number 0 as well. However, empty lines at two ends will be dropped, since they are really unnecessary.

If the process end with an error, please check your input carefully.

function parseArray(text) {
  return text
    .replace(/[^\d\n]+/g, ' ')
    .trim()
    .split('\n')
    .map(row => (row.match(/\d+/g) || [])
      .map(parseFloat)
      .filter(Math.sign))
}

document.getElementById('btn-solve2').addEventListener('click', () => {
  new nonogram.Solver(
    parseArray(document.getElementById('txt-row-hints2').value),
    parseArray(document.getElementById('txt-col-hints2').value),
    'adv-solve2',
    { theme: {
        isMeshed: true,
        isBoldMeshOnly: true,
        isMeshOnTop: true },
      delay: +document.getElementById('delay').value,
      onSuccess(time) {
        document.getElementById('timecost').innerHTML =
        'Solved in ' + time + 'ms.'
      } }).solve()
})