Nonogram
Nonogram copied to clipboard
Another nonogram (also known as hanjie, picross and griddlers) editor and solver. No dependencies.
Nonogram
Usage
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.
API
class nonogram.Solver
#constructor(row, column, canvas[, config])
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, orid
of the canvas to print the nonogram on. If not given, a new canvas element will be created and assigned tothis.canvas
so you can put it to the document later. -
optional
config
: an object, see § Configuration Items.
#solve()
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
class nonogram.Editor
#constructor(m, n, canvas[, config])
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.
#refresh()
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
class nonogram.Game
#constructor(row, column, canvas[, config])
Creates a nonogram game. The parameters have the same definitions as those of nonogram.Solver
's.
Configuration Items
-
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 itswidth
property) 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
:true
orfalse
, 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
.
-
nonogram.Solver
-
delay
(ms): default is50
. Controls the delay between steps of the solving process. -
onSuccess(time)
: fired when the nonogram has been solved,time
is how many milliseconds cost. -
onError(err)
: when some contradiction has been found,err
tells the bad hints' location (index starts at 1).
nonogram.Editor
-
grid
: a two-dimensional array, consisting of1
s and0
s, 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
: ifgrid
is 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()
})
})
nonogram.Game
-
onSuccess()
: fired when the player has successfully solved the nonogram. -
onAnimationEnd()
: fired when when the success animation has been finished.