-
Notifications
You must be signed in to change notification settings - Fork 0
/
image-puzzle.js
83 lines (74 loc) · 3.41 KB
/
image-puzzle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var timerFunction;
var imagePuzzle = {
stepCount: 0,
startTime: new Date().getTime(),
startGame: function (images) {
this.setImage(images);
helper.doc('playPanel').style.display = 'block';
helper.shuffle('sortable');
this.stepCount = 0;
this.startTime = new Date().getTime();
this.tick();
},
tick: function () {
var now = new Date().getTime();
var elapsedTime = parseInt((now - imagePuzzle.startTime) / 1000, 10);
helper.doc('timerPanel').textContent = elapsedTime;
timerFunction = setTimeout(imagePuzzle.tick, 1000);
},
setImage: function (images, gridSize = 2) {
var percentage = 100 / (gridSize - 1);
var image = images[Math.floor(Math.random() * images.length)];
helper.doc('imgTitle').innerHTML = image.title;
helper.doc('actualImage').setAttribute('src', image.src);
helper.doc('sortable').innerHTML = '';
for (var i = 0; i < gridSize * gridSize; i++) {
var xpos = (percentage * (i % gridSize)) + '%';
var ypos = (percentage * Math.floor(i / gridSize)) + '%';
let li = document.createElement('li');
li.id = i;
li.setAttribute('data-value', i);
li.style.backgroundImage = 'url(' + image.src + ')';
li.style.backgroundSize = (gridSize * 100) + '%';
li.style.backgroundPosition = xpos + ' ' + ypos;
li.style.width = 400 / gridSize + 'px';
li.style.height = 400 / gridSize + 'px';
li.setAttribute('draggable', 'true');
li.ondragstart = (event) => event.dataTransfer.setData('data', event.target.id);
li.ondragover = (event) => event.preventDefault();
li.ondrop = (event) => {
let origin = helper.doc(event.dataTransfer.getData('data'));
let dest = helper.doc(event.target.id);
let p = dest.parentNode;
if (origin && dest && p) {
let temp = dest.nextSibling;
p.insertBefore(dest, origin);
p.insertBefore(origin, temp);
let vals = Array.from(helper.doc('sortable').children).map(x => x.id);
var now = new Date().getTime();
helper.doc('stepCount').textContent = ++imagePuzzle.stepCount;
document.querySelector('.timeCount').textContent = (parseInt((now - imagePuzzle.startTime) / 1000, 10));
if (isSorted(vals)) {
// helper.doc('actualImageBox').style.display = 'none';
// helper.doc('gameOver').style.display = 'block';
helper.doc('actualImageBox').innerHTML = helper.doc('gameOver').innerHTML;
helper.doc('stepCount').textContent = imagePuzzle.stepCount;
}
}
};
li.setAttribute('dragstart', 'true');
helper.doc('sortable').appendChild(li);
}
helper.shuffle('sortable');
}
};
isSorted = (arr) => arr.every((elem, index) => { return elem == index; });
var helper = {
doc: (id) => document.getElementById(id) || document.createElement("div"),
shuffle: (id) => {
var ul = document.getElementById(id);
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}
}
}