Sound & Visual Feedback

Code

var audio = new Audio('static/connect.wav');
let berni = new Image();
berni.src = 'static/berni.jpg';
berni.onload = () => {
  const sound = new headbreaker.Canvas('sound-canvas', {
    width: 800, height: 650,
    pieceSize: 100, proximity: 20,
    borderFill: 10, strokeWidth: 1.5,
    lineSoftness: 0.18, image: berni,
    strokeColor: 'black'
  });

  sound.adjustImagesToPuzzleHeight();
  sound.autogenerate({
    horizontalPiecesCount: 6,
    insertsGenerator: headbreaker.generators.random
  });

  sound.draw();

  sound.onConnect((_piece, figure, _target, targetFigure) => {
    // play sound
    audio.play();

    // paint borders on click
    figure.shape.stroke('yellow');
    targetFigure.shape.stroke('yellow');
    sound.redraw();

    setTimeout(() => {
      // restore border colors later
      figure.shape.stroke('black');
      targetFigure.shape.stroke('black');
      sound.redraw();
    }, 200);
  });

  sound.onDisconnect((it) => {
    audio.play();
  });
}

Demo

ShuffleShuffle GridShuffle ColumnsSolve