nonogram.Game

by Zhou Qi

HTML

<script src="https://handsomeone.github.io/Nonogram/nonogram.min.js"></script>
<canvas id="c" style="transition: opacity 0.2s;"></canvas>
<div id="progress"></div>

CSS

#progress {
  width: 0;
  height: 8px;
  background-color: #47cf73;
  transition: width 1s;
}

JavaScript

var canvas = document.getElementById('c');
  var progress = document.getElementById('progress');
  new nonogram.Game([
    [3],
    [1, 1],
    [5],
    [1],
    [3]
  ], [
    [3],
    [1, 1, 1],
    [1, 1, 1],
    [1, 1, 1],
    [2]
  ], 'c', {
    theme: {
      width: 500,
    },
    onAnimationEnd: loadSecondNonogram,
  });

  function loadSecondNonogram() {
    canvas.style.opacity = '0';
    setTimeout(function() {
      canvas.style.opacity = '1';
      progress.style.width = '33%';
      new nonogram.Game([
        [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]
      ], 'c', {
        theme: {
          boldMeshGap: 4
        },
        onAnimationEnd: loadThirdNonogram,
      });
    }, 200);
  }

  function loadThirdNonogram() {
    canvas.style.opacity = '0';
    setTimeout(function() {
      canvas.style.opacity = '1';
      progress.style.width = '67%';
      var qr = new nonogram.Game([
        [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,...