Is there any ready-made solutions Puzzle on js?

Hi all , need to do the puzzles without using js frameworks on the net.
Can anyone have some idea or ready-made solution , please tell me.
Is the idea just to take a square image and divided into small squares , with drag and drop.
How to do it?
There is such code but it tag.




 <meta charset="utf-8">
the <title>Tag</title>
 <script src="puzzle15.js"></script>
 <link rel="stylesheet" href="style.css"> 


 <canvas id="puzzle15">Tag</canvas>
the <script>
init();
</script>



function init() {
 var canvas = document.getElementById("puzzle15");
 canvas.width = 620;
 canvas.height = 620;
 var cellSize = canvas.width / 4;
 var context = canvas.getContext("2d");
 var field = new game15(); // create the object tag
 field.mix(350); // mix thoroughly soderjamoe box
 field.setCellView(function (x, y) { // set the appearance of the tag
 context.fillStyle = "#59409f";
 context.fillRect(x + 1, y + 1, cellSize - 2, cellSize - 2);
});
 field.setNumView(function () { // font settings for the numbers
 context.font = "bold" + (cellSize / 2) + "px Sans";
 context.textAlign = "center";
 context.textBaseline = "middle";
 context.fillStyle = "#ffffff";
});
 context.fillStyle = "#222";
 context.fillRect(0, 0, canvas.the width of the canvas.height);
 field.draw(context, cellSize);

 function event(x, y) { // function performs the necessary action when clicking(touching)
 field.move(x, y);
 context.fillStyle = "#222";
 context.fillRect(0, 0, canvas.the width of the canvas.height);
 field.draw(context, cellSize);
 if (field.victory()) { // if the puzzle is folded, the tag re-shuffled
 alert("Collected" + field.getClicks() + " seconds."); // output messages about winning!!
field.mix(300);
 context.fillStyle = "#222";
 context.fillRect(0, 0, canvas.the width of the canvas.height);
 field.draw(context, cellSize);
}
}
 canvas.onclick = function (e) { // handle mouse clicks
 var x = (e.pageX - canvas.offsetLeft) / cellSize | 0;
 var y = (e.pageY - canvas.offsetTop) / cellSize | 0;
 event(x, y); // vichov actions
};
 canvas.ontouchend = function (e) { // handle touch finger
 var x = (e.touches[0].pageX - canvas.offsetLeft) / cellSize | 0;
 var y = (e.touches[0].pageY - canvas.offsetTop) / cellSize | 0;
 event(x, y);
};
}

game15 function() {
 var cellView = null;
 var numView = null;
 var arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]];
 var clicks = 0;

 function getNull() { // the function returns the coordinate of the empty cells
 for (var i = 0; i < 4; i++) {
 for (var j = 0; j < 4; j++) {
 if (arr[j][i] === 0) {
 return {
 "x": i
 "y": j
};
}
}
}
};
 // function returns a random Boolean value
 getRandomBool function() {
 if (Math.floor(Math.random() * 2) === 0) {
 return true;
}
}
 // method returns the number of touches
 this.getClicks = function () {
 return clicks;
};
 // method moves the "tag" in a blank gray t 
 this.move = function (x, y) {
 var nullX = getNull().x;
 var nullY = getNull().y;
 if (((x - 1 == nullX || x + 1 == nullX) && y == nullY) || ((y - 1 == nullY || y + 1 == nullY) && x == nullX)) {
 arr[nullY][nullX] = arr[y][x];
 arr[y][x] = 0;
clicks++;
}
};
 // checking victory conditions
 this.victory = function () {
 var e = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]];
 var res = true;
 for (var i = 0; i < 4; i++) {
 for (var j = 0; j < 4; j++) {
 if (e[i][j] != arr[i][j]) {
 res = false;
}
}
}
 return res;
};
 // method "mixes" tag
 this.mix = function (stepCount) {
 var x, y;
 for (var i = 0; i < stepCount; i++) {
 var nullX = getNull().x;
 var nullY = getNull().y;
 var hMove = getRandomBool();
 var upLeft = getRandomBool();
 if (!hMove && !upLeft) {
 y = nullY;
 x = nullX - 1;
}
 if (hMove && !upLeft) {
 x = nullX;
 y = nullY + 1;
}
 if (!hMove && upLeft) {
 y = nullY;
 x = nullX + 1;
}
 if (hMove && upLeft) {
 x = nullX;
 y = nullY - 1;
}
 if (0 <= x && x <= 3 && 0 <= y && y <= 3) {
 this.move(x, y);
}
}
 clicks = 0;
};
 // finish tag
 this.setCellView = function (func) {
 cellView = func;
};
 // font settings of digits
 this.setNumView = function (func) {
 numView = func;
};
 // Method draws our tag on canvas
 this.draw = function (context, size) {
 for (var i = 0; i < 4; i++) {
 for (var j = 0; j < 4; j++) {
 if (arr[i][j] > 0) {
 if (cellView !== null) {
 cellView(j * size, i * size);
}
 if (numView !== null) {
numView();
 context.fillText(arr[i][j], j * size + size / 2, i * size + size / 2);
}
}
}
}
};
}
July 2nd 19 at 14:14
1 answer
July 2nd 19 at 14:16
Like written without jquery. - Mario_Nienow commented on July 2nd 19 at 14:19
: and to maintain as when you change the object model of the browser ? ) - Marcel commented on July 2nd 19 at 14:22

Find more questions by tags JavaScriptWeb Development