nonogram.Answer

by Zhou Qi

HTML

<script src="https://handsomeone.github.io/Nonogram/nonogram.min.js"></script>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

CSS

body {
  display: flex;
}
canvas {
  flex: 1;
}

JavaScript

var canvases = document.querySelectorAll('canvas')
new nonogram.Solver([
  [3],
  [1, 1],
  [5],
  [1],
  [3]
], [
  [3],
  [1, 1, 1],
  [1, 1, 1],
  [1, 1, 1],
  [2]
], canvases[0], {
  theme: {
    filledColor: '#09f',
    correctColor: '#09f',
    wrongColor: '#f90',
  },
})

new nonogram.Solver([
  [4],
  [8],
  [10],
  [2, 2, 2],
  [3, 2, 3],
  [12],
  [2, 6, 2],
  [2, 6, 2],
  [2, 4, 2],
  [3, 3],
  [8],
  [4]
], [
  [4],
  [8],
  [5, 3],
  [2, 3, 2],
  [3, 4, 2],
  [9, 2],
  [9, 2],
  [3, 4, 2],
  [2, 3, 2],
  [5, 3],
  [8],
  [4]
], canvases[1], {
  theme: {
    filledColor: '#f09',
    correctColor: '#f09',
    wrongColor: '#0f9',
  },
})

new nonogram.Solver([
  [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]
], [
  [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]
], canvases[2], {
  theme: {
    filledColor: '#390',
    correctColor: '#390',
    wrongColor: '#c9f',
  },
})