Check the live demo and find out how to build your own nonogram application.
You just need to attach
<script src="https://handsomeone.github.io/Nonogram/nonogram.min.js"></script>to <head>. A <canvas> element is required for each nonogram instance.
Creates a nonogram solver.
row: a two-dimensional array, consisting of the hints of each row as an array.column: a two-dimensional array, consisting of the hints of each column as an array.- optional
canvas: a canvas element, oridof the canvas to print the nonogram on. If not given, a new canvas element will be created and assigned tothis.canvasso you can put it to the document later. - optional
config: an object, see § Configuration Items.
Solves and prints the nonogram by given hints.
For example, if there is <canvas id="canvas1"></canvas>, then you can use
var s = new nonogram.Solver(
[
[1, 1],
[1, 1],
[1, 1],
[4]
],
[
[4],
[1],
[1],
[4]
],
'canvas1',
{ width: 500, delay: 100 }
)
s.solve()then the output will be like this:
██ ██ 1 1
██ ██ 1 1
██ ██ 1 1
████████ 4
4 1 1 4
Creates a nonogram editor.
m: number of rows, or the length of each column.n: number of columns, or the length of each row.- optional
canvas: same as that ofnonogram.Solver. - optional
config: an object, see § Configuration Items.
Randomly generates the grid.
For example, if you run
new nonogram.Editor(4, 6, 'canvas2', {threshold: 0.9})then the output is likely to be
████████████ 6
████ ██████ 2 3
██████████ 5
████████████ 6
2 4 1 4 4 4
1 2
Creates a nonogram game. The parameters have the same definitions as those of nonogram.Solver's.
theme: an plain object, controls the appearance.width(px): a number to set the canvas' width. If not given, the canvas' currentclientWidth(not the value of itswidthproperty) will be used.filledColor: filled cells' color.unsetColor: unset cells' color.correctColor: numbers' color of correct rows or columns.wrongColor: numbers' color of wrong rows or columns.meshColor: meshes' color.isMeshed:trueorfalse, coltrols whether to print the meshes or not.isBoldMeshOnly: default isfalse.isMeshOnTop: default isfalse.boldMeshGap: default is5. Controls how many cells are there between two adjacent bold meshes. If you don't want any bold meshes, simply set it to0.
-
delay(ms): default is50. Controls the delay between steps of the solving process. -
onSuccess(time): fired when the nonogram has been solved,timeis how many milliseconds cost. -
onError(err): when some contradiction has been found,errtells the bad hints' location (index starts at 1).
grid: a two-dimensional array, consisting of1s and0s, will be assigned to the nonogram's grid. For example, you can use
[[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 1, 1, 1]]to create
██ ██ 1 1
██ ██ 1 1
██ ██ 1 1
████████ 4
4 1 1 4
-
threshold: ifgridis not given, then the nonogram's grid will be randomly generated. Each cell of the grid has a chance of threshold*100% to be filled. Default is0.5. -
onHintChange(row, column): fired when the nonogram's hints have any change. To automatically create a new solver on hint change, you can use
new nonogram.Editor(4, 4, 'canvas1', {
onHintChange: function (row, column) {
new nonogram.Solver(row, column, 'canvas2').solve()
})
})-
onSuccess(): fired when the player has successfully solved the nonogram. -
onAnimationEnd(): fired when when the success animation has been finished.