Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
1

Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript)

04.03.2019, 22:51. Просмотров 1296. Ответов 11

Есть три блока: блок изображения пазла, блок изображения пазла разбитого на 25 частей и такой же блок только полупрозрачный (50% прозрачности). Мне нужно чтобы с блока изображения пазла разбитого на 25 частей можно было перетаскивать одну из этих частей на второй такой же, полупрозрачный блок.
Нужно использовать для реализации перестаскивания элементов пазла с одного блока на другой технологию Drag'N'Drop. Помогите мне, пожалуйста. Вот ссылка на весь программный код реализации пазла: https://codepen.io/nightofpromises/pen/ZPbmdv.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.03.2019, 22:51
Ответы с готовыми решениями:

Фреймворк или чистый JavaScript?
Всем привет! Хочется узнать мнение общественности по поводу использования разнообразных...

Код JQuery на чистый JavaScript
Здравстуйте. Столкнулся с проблемой начинающего Веб-программиста. Нашел рабочий скрипт написанный...

Алгоритм автоматической сборки пазла
Всем привет, Есть игра пазлы, которая разбирает картинку на блоки и позволяет их перемещать....

Реализация плавной анимации чистый JS+CSS
Доброго вечера друзья. Суть вопроса такова. Есть код, на JS взаимодействующий с CSS. нужно...

Как используя чистый JavaScript присвоить элементу нужный ID
Здравствуйте друзья! Столкнулся с проблемой, что не знаю, как элементу присвоить id. Классы...

11
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
05.03.2019, 19:48  [ТС] 2
Я прошу вас не использовать JQuery, Ajax, а использовать чистый JavaScript.
0
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
06.03.2019, 14:01  [ТС] 3
JavaScript-код:
Javascript
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
document.getElementsByTagName('button')[0].addEventListener("click", function() { 
  var puzzlewrapper = document.querySelector(".puzzle-wrapper .container .pic .inner-pic");
           puzzlewrapper.style.backgroundImage = 'url("https://picsum.photos/600/600/?random")';
  var dropzone = document.querySelector(".dz .indz");
  dropzone.style.backgroundImage = 'url("https://picsum.photos/600/600/?random")';
  location.reload(true);
})
 
var img = document.getElementsByTagName("img")[0];
  img.src = 'https://picsum.photos/600/600/?random';
 
const board = document.querySelector('.puzzle-wrapper .container');
let movedPiece = null;
let shiftX = 0;
let shiftY = 0;
 
const dragStart = event => {
  if (event.target.classList.contains('pic')) {
    movedPiece = event.target;
    shiftX = event.pageX - event.target.getBoundingClientRect().left - window.pageXOffset;
    shiftY = event.pageY - event.target.getBoundingClientRect().top - window.pageYOffset;
  }
};
const drag = (x, y) => {
  if (movedPiece) {
    const minY = board.offsetTop;
    const minX = board.offsetLeft;
    const maxX = board.offsetLeft + board.offsetWidth - movedPiece.offsetWidth;
    const maxY = board.offsetTop + board.offsetHeight - movedPiece.offsetHeight;
    x = x - shiftX;
    y = y - shiftY;
    x = x > maxX ? maxX : x;
    y = y > maxY ? maxY : y;
    x = x < minX ? minX : x;
    y = y < minY ? minY : y;
    movedPiece.style.left = x + 'px';
    movedPiece.style.top = y + 'px';
    movedPiece.style.position = 'absolute';
 
  }
};
 
const drop = event => {
  if (movedPiece) {
    movedPiece.style.visibility = 'hidden';
    const check = document.elementFromPoint(event.clientX, event.clientY).closest('.inner-pic');
    movedPiece.style.visibility = 'visible';
    if (check) {
      check.appendChild(movedPiece);
      movedPiece.style.position = '';
      movedPiece = null;
    }
  }
};
 
document.addEventListener('mousedown', dragStart);
 
document.addEventListener('mousemove', event => {
  drag(event.pageX, event.pageY);
});
document.addEventListener('mouseup', drop);
 
document.addEventListener('touchstart', event => {
  dragStart(event.touches[0]);
});
document.addEventListener('touchmove', event => {
  drag(event.touches[0].pageX, event.touches[0].pageY);
});
document.addEventListener('touchend', drop);
CSS-код:
CSS
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
html {
  overflow: hidden;
}
 
body {
  height: 100vh;
  width: 100vw;
  padding-top: 1px;
}
 
.address {
  width: 524px;
  height: 25px;
  margin-top: 30px;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: Play, sans-serif;
}
.address input {
  width: 450px;
  height: 100%;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid #8B7AAE;
  outline: none !important;
  padding-left: 2px;
}
.address input:focus {
  border: 1px solid #A4447E;
}
 
.puzzlify {
  display: inline-block;
  width: 70px;
  height: 100%;
  background: #2B1657;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 1px;
  line-height: 25px;
  font-size: 1.1rem;
  text-align: center;
  color: #fff;
}
.puzzlify:hover {
  box-shadow: 0 0 5px #2B1657;
}
 
.puzzle-wrapper {
  font-size: 0;
  width: 524px;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: 40px;
  position: relative;
}
 
.dz {
  width: 50px;
  height: 50px;
  float: left;
  border: 1px solid #fff;
  background: #ccc;
  opacity: 0.4;
  overflow: hidden;
}
 
.indz {
  width: 250px;
  height: 250px;
  background-image: url("https://picsum.photos/600/600/?random");
  background-size: cover;
}
 
.drop-zone {
  width: 250px;
  height: 250px;
  display: inline-block;
  margin-left: 24px;
  font-size: 1rem;
}
 
.container {
  width: 250px;
  height: 250px;
  color: red;
  display: inline-block;
}
 
.pic {
  width: 50px;
  height: 50px;
  float: left;
  overflow: hidden;
  border: 1px solid #fff;
  position: absolute;
  z-index: 0;
  font-size: 1rem;
}
 
.inner-pic {
  width: 250px;
  height: 250px;
  background-image: url("https://picsum.photos/600/600/?random");
  background-size: cover;
  cursor: -webkit-grab;
  cursor: grab;
}
 
.grabbed {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
 
.inner-pic-1-1, .indz-1-1 {
  background-position: 0px 0px;
}
 
.pic-1-1 {
  left: 0px;
  top: 0px;
}
 
.inner-pic-1-2, .indz-1-2 {
  background-position: -50px 0px;
}
 
.pic-1-2 {
  left: 50px;
  top: 0px;
}
 
.inner-pic-1-3, .indz-1-3 {
  background-position: -100px 0px;
}
 
.pic-1-3 {
  left: 100px;
  top: 0px;
}
 
.inner-pic-1-4, .indz-1-4 {
  background-position: -150px 0px;
}
 
.pic-1-4 {
  left: 150px;
  top: 0px;
}
 
.inner-pic-1-5, .indz-1-5 {
  background-position: -200px 0px;
}
 
.pic-1-5 {
  left: 200px;
  top: 0px;
}
 
.inner-pic-2-1, .indz-2-1 {
  background-position: 0px -50px;
}
 
.pic-2-1 {
  left: 0px;
  top: 50px;
}
 
.inner-pic-2-2, .indz-2-2 {
  background-position: -50px -50px;
}
 
.pic-2-2 {
  left: 50px;
  top: 50px;
}
 
.inner-pic-2-3, .indz-2-3 {
  background-position: -100px -50px;
}
 
.pic-2-3 {
  left: 100px;
  top: 50px;
}
 
.inner-pic-2-4, .indz-2-4 {
  background-position: -150px -50px;
}
 
.pic-2-4 {
  left: 150px;
  top: 50px;
}
 
.inner-pic-2-5, .indz-2-5 {
  background-position: -200px -50px;
}
 
.pic-2-5 {
  left: 200px;
  top: 50px;
}
 
.inner-pic-3-1, .indz-3-1 {
  background-position: 0px -100px;
}
 
.pic-3-1 {
  left: 0px;
  top: 100px;
}
 
.inner-pic-3-2, .indz-3-2 {
  background-position: -50px -100px;
}
 
.pic-3-2 {
  left: 50px;
  top: 100px;
}
 
.inner-pic-3-3, .indz-3-3 {
  background-position: -100px -100px;
}
 
.pic-3-3 {
  left: 100px;
  top: 100px;
}
 
.inner-pic-3-4, .indz-3-4 {
  background-position: -150px -100px;
}
 
.pic-3-4 {
  left: 150px;
  top: 100px;
}
 
.inner-pic-3-5, .indz-3-5 {
  background-position: -200px -100px;
}
 
.pic-3-5 {
  left: 200px;
  top: 100px;
}
 
.inner-pic-4-1, .indz-4-1 {
  background-position: 0px -150px;
}
 
.pic-4-1 {
  left: 0px;
  top: 150px;
}
 
.inner-pic-4-2, .indz-4-2 {
  background-position: -50px -150px;
}
 
.pic-4-2 {
  left: 50px;
  top: 150px;
}
 
.inner-pic-4-3, .indz-4-3 {
  background-position: -100px -150px;
}
 
.pic-4-3 {
  left: 100px;
  top: 150px;
}
 
.inner-pic-4-4, .indz-4-4 {
  background-position: -150px -150px;
}
 
.pic-4-4 {
  left: 150px;
  top: 150px;
}
 
.inner-pic-4-5, .indz-4-5 {
  background-position: -200px -150px;
}
 
.pic-4-5 {
  left: 200px;
  top: 150px;
}
 
.inner-pic-5-1, .indz-5-1 {
  background-position: 0px -200px;
}
 
.pic-5-1 {
  left: 0px;
  top: 200px;
}
 
.inner-pic-5-2, .indz-5-2 {
  background-position: -50px -200px;
}
 
.pic-5-2 {
  left: 50px;
  top: 200px;
}
 
.inner-pic-5-3, .indz-5-3 {
  background-position: -100px -200px;
}
 
.pic-5-3 {
  left: 100px;
  top: 200px;
}
 
.inner-pic-5-4, .indz-5-4 {
  background-position: -150px -200px;
}
 
.pic-5-4 {
  left: 150px;
  top: 200px;
}
 
.inner-pic-5-5, .indz-5-5 {
  background-position: -200px -200px;
}
 
.pic-5-5 {
  left: 200px;
  top: 200px;
}
 
button {
  display: block;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto; 
  padding: 5px 25px;
  font-size: 20px;
  color: white;  
  background: #e65c00;
  border-color: #e65c00;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  transition: all 0.15s;
}
 
button:hover {
  background-color: #ff8c1a;
  border-color: #e67300;
}
 
button:active {
  background-color: #cc0000;
  border-color: #990000;
}
 
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
 
.grabbed
  cursor: grabbing
  
@for $row from 1 through 5  
  @for $col from 1 through 5
    .inner-pic-#{$row}-#{$col}, .indz-#{$row}-#{$col}
      background-position: (1 - $col) * 50px  (1 - $row) * 50px
    .pic-#{$row}-#{$col}
      left: ($col - 1)  * 50px
      top: ($row - 1) * 50px
HTML-код:
HTML5
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
</head>
 
<body>
  <br>
  <center><div><button style="next" type="submit">Next</button><br><img width="250px" src=""></div></center>
 
  
  <button style="puzzlify" type="submit">Puzzlify</button>
  
<div class="puzzle-wrapper">
  <div class="container">
    <div class="pic pic-1-1">
      <div draggable="true" class="inner-pic inner-pic-1-1"></div>
    </div>
    <div class="pic pic-1-2">
      <div draggable="true" class="inner-pic inner-pic-1-2"></div>
    </div>
    <div class="pic pic-1-3">
      <div draggable="true" class="inner-pic inner-pic-1-3"></div>
    </div>
    <div class="pic pic-1-4">
      <div draggable="true" class="inner-pic inner-pic-1-4"></div>
    </div>
    <div class="pic pic-1-5">
      <div draggable="true" class="inner-pic inner-pic-1-5"></div>
    </div>
    <div class="pic pic-2-1">
      <div draggable="true" class="inner-pic inner-pic-2-1"></div>
    </div>
    <div class="pic pic-2-2">
      <div draggable="true" class="inner-pic inner-pic-2-2"></div>
    </div>
    <div class="pic pic-2-3">
      <div draggable="true" class="inner-pic inner-pic-2-3"></div>
    </div>
    <div class="pic pic-2-4">
      <div draggable="true" class="inner-pic inner-pic-2-4"></div>
    </div>
    <div class="pic pic-2-5">
      <div draggable="true" class="inner-pic inner-pic-2-5"></div>
    </div>
    <div class="pic pic-3-1">
      <div draggable="true" class="inner-pic inner-pic-3-1"></div>
    </div>
    <div class="pic pic-3-2">
      <div draggable="true" class="inner-pic inner-pic-3-2"></div>
    </div>
    <div class="pic pic-3-3">
      <div draggable="true" class="inner-pic inner-pic-3-3"></div>
    </div>
    <div class="pic pic-3-4">
      <div draggable="true" class="inner-pic inner-pic-3-4"></div>
    </div>
    <div class="pic pic-3-5">
      <div draggable="true" class="inner-pic inner-pic-3-5"></div>
    </div>
    <div class="pic pic-4-1">
      <div draggable="true" class="inner-pic inner-pic-4-1"></div>
    </div>
    <div class="pic pic-4-2">
      <div draggable="true" class="inner-pic inner-pic-4-2"></div>
    </div>
    <div class="pic pic-4-3">
      <div draggable="true" class="inner-pic inner-pic-4-3"></div>
    </div>
    <div class="pic pic-4-4">
      <div draggable="true" class="inner-pic inner-pic-4-4"></div>
    </div>
    <div class="pic pic-4-5">
      <div draggable="true" class="inner-pic inner-pic-4-5"></div>
    </div>
    <div class="pic pic-5-1">
      <div draggable="true" class="inner-pic inner-pic-5-1"></div>
    </div>
    <div class="pic pic-5-2">
      <div draggable="true" class="inner-pic inner-pic-5-2"></div>
    </div>
    <div class="pic pic-5-3">
      <div draggable="true" class="inner-pic inner-pic-5-3"></div>
    </div>
    <div class="pic pic-5-4">
      <div draggable="true" class="inner-pic inner-pic-5-4"></div>
    </div>
    <div class="pic pic-5-5">
      <div draggable="true" class="inner-pic inner-pic-5-5"></div>
    </div>
  </div>
  <div class="drop-zone">
    <div class="dz dz-1-1">
      <div class="indz indz-1-1"></div>
    </div>
    <div class="dz dz-1-2">
      <div class="indz indz-1-2"></div>
    </div>
    <div class="dz dz-1-3">
      <div class="indz indz-1-3"></div>
    </div>
    <div class="dz dz-1-4">
      <div class="indz indz-1-4"></div>
    </div>
    <div class="dz dz-1-5">
      <div class="indz indz-1-5"></div>
    </div>
    <div class="dz dz-2-1">
      <div class="indz indz-2-1"></div>
    </div>
    <div class="dz dz-2-2">
      <div class="indz indz-2-2"></div>
    </div>
    <div class="dz dz-2-3">
      <div class="indz indz-2-3"></div>
    </div>
    <div class="dz dz-2-4">
      <div class="indz indz-2-4"></div>
    </div>
    <div class="dz dz-2-5">
      <div class="indz indz-2-5"></div>
    </div>
    <div class="dz dz-3-1">
      <div class="indz indz-3-1"></div>
    </div>
    <div class="dz dz-3-2">
      <div class="indz indz-3-2"></div>
    </div>
    <div class="dz dz-3-3">
      <div class="indz indz-3-3"></div>
    </div>
    <div class="dz dz-3-4">
      <div class="indz indz-3-4"></div>
    </div>
    <div class="dz dz-3-5">
      <div class="indz indz-3-5"></div>
    </div>
    <div class="dz dz-4-1">
      <div class="indz indz-4-1"></div>
    </div>
    <div class="dz dz-4-2">
      <div class="indz indz-4-2"></div>
    </div>
    <div class="dz dz-4-3">
      <div class="indz indz-4-3"></div>
    </div>
    <div class="dz dz-4-4">
      <div class="indz indz-4-4"></div>
    </div>
    <div class="dz dz-4-5">
      <div class="indz indz-4-5"></div>
    </div>
    <div class="dz dz-5-1">
      <div class="indz indz-5-1"></div>
    </div>
    <div class="dz dz-5-2">
      <div class="indz indz-5-2"></div>
    </div>
    <div class="dz dz-5-3">
      <div class="indz indz-5-3"></div>
    </div>
    <div class="dz dz-5-4">
      <div class="indz indz-5-4"></div>
    </div>
    <div class="dz dz-5-5">
      <div class="indz indz-5-5"></div>
    </div>
  </div>
  </div>
</body>
</html>
0
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
08.03.2019, 14:34  [ТС] 4
Реализация пазла должна быть как здесь: https://codepen.io/kiyutink/pen/NNrBxy. Только с использованием чистого JavaScript без использования Jquery, Ajax.
0
08.03.2019, 14:34
pavel666228
<h1>Hello world</h1>
17 / 16 / 3
Регистрация: 17.12.2016
Сообщений: 166
Записей в блоге: 6
Завершенные тесты: 2
08.03.2019, 19:06 5
https://learn.javascript.ru/drag-and-drop
1
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
08.03.2019, 20:53  [ТС] 6
Блок слайдера предназначен для выбора случайного изображения. Для получения другого изображения необходима кнопка «>» («Next»). Кнопка «Puzzlify», находящаяся под изображением, подтверждает выбор пользователем. В двух блоках сбора пазлов ниже отображается выбранное изображение. Правый блок представляет из себя подложку для сборки паззла –контейнер с «разрезанными», но не «перемешанными» частями выбранного изображения, прозрачность 50%. Левый блок представляет из себя контейнер с «разрезанными» и «перемешанными» частями выбранного изображения. Бэкграунд веб-приложения должен иметь линейный градиент.
Во всех блоках приложения пропорции изображения не должны быть изменены. Курсор в блоке сбора пазлов должен иметь вид «руки» (grab,grabbing). Изображение в блоке сборки пазла должно «разрезаться» на 25 частей (5 отрезков по вертикали и 5 –по горизонтали). Предусмотреть анимацию элементов управления.
Реализовать надо логику блока слайдера, воспользовавшись API сервера unsplash.com (https://unsplash.it/600/600/?random) для получения случайных изображений. При открытии в блоке слайдера отображается первое рандомное изображение, последующие генерации при нажатии кнопки «>» («Next»). При длительной загрузке вместо изображения должен отображаться лоадер (https://www.artmajeur.com/img/ajax-loader.gif). После успешной загрузки изображения должна стать активной кнопка «Puzzlify».
Надо реализовать функции «разрезания» на части изображения и «перемешивания» их для блока сбора пазлов. Создать обработчик кнопки «Puzzlify». По нажатию кнопки «Puzzlify» в двух блоках сбора пазлов ниже должно отображаться выбранное изображение, в правом только разрезанное, в левом –разрезанное и перемешанное.
Также необходимо реализовать функцию сборки пазла, включающую в себя:
− перетаскивание частей изображения с левого блока в правый;
− при верной локализации перетаскиваемой части реализация запрета дальнейшего движения;
− вывод сообщения в случае окончания сборки пазлов.
В целом функциональные возможности приложения следующими должны быть:
— предоставление выбора изображения в виде слайдера
— предоставление выбора изображения указанием ссылки
— задавать количество частей разбивки изображения
— разбивание выбранного или указанного изображения на заданное количество частей и генерация пазла
— предоставление возможности пользователю собирать сгенерированный пазл
— проверка статуса компоновки пазла, в случае если пазл собран, выдавать пользователю сообщение об успехе (и затраченном времени)
— реализация в приложении счетчика для хранения и отображения количества успешных сборов пазла
Пожалуйста, помогите срочно!!!!!!!
0
Миниатюры
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript)  
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
12.03.2019, 13:51  [ТС] 7
Перемешивание пазлов сделано, но я понятия не имею как реализовать перетаскивание частей пазла на другую прозрачную часть. Помогите вас, прошу вас, мне срочно нужно сделать
0
Миниатюры
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript)  
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
12.03.2019, 19:22  [ТС] 8
И еще у меня проблема следующего характера. Дело в том что когда я нажимаю на кнопку Next, пазл не должен разбиваться на части, а картинка пазла должна сама обновляться. Кто-нибудь, кто разбирается в Drag'N'Drop на чистом JavaScript, помогите мне!!!!!!!

Добавлено через 3 часа 58 минут
Вот ссылка на пазл на JavaScript: https://codepen.io/nightofpromises/pen/ZPXVva. Помогите мне, пожалуйста
На всякий случай выкладываю HTML, CSS и JavaScript-коды пазла на Drag'N'Drop:
HTML5
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
<!DOCTYPE HTML>  
  
<html>  
  
<head>  
  
    <title>Puzzle Game</title> 
 
    <link rel="stylesheet">
    
    <script type="text/javascript">  
    </script>  
  
</head>  
  
<body onload="init();">  
<center>
    <div class="header">
        <h1>Javascript Puzzle Game</h1>     
    </div>
  
  <div><button type="submit">Next</button><br><br><img width="250px" src=""></div><br>
  <input type="submit" value="Puzzlify"><br><br>
    <div class="puzzleFrame">   
      <canvas id="myCanvas"></canvas>
      <div class="drop-zone"></div>
    </div>
  
  </center>
</body>  
  
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
* {
    background-color: lightgrey;
}
 
.drop-zone {
  width: 600px;
  height: 600px;
  display: inline-block;
  margin-left: 24px;
  font-size: 1rem;
  background-image: url("https://picsum.photos/600/600/?random");
  opacity: 0.4;
}
Javascript
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
var img = document.getElementsByTagName("img")[0];
img.src = 'https://picsum.photos/600/600/?random';
 
document.getElementsByTagName('button')[0].addEventListener("click", function() { 
 var img = document.getElementsByTagName("img")[0];
img.src = 'https://picsum.photos/600/600/?random';
  location.reload(true);
})
 
const PUZZLE_DIFFICULTY = 5;
const PUZZLE_HOVER_TINT = '#009900';
 
var canvas;
var stage;
 
var img;
var pieces;
var puzzleWidth;
var puzzleHeight;
var pieceWidth;
var pieceHeight;
var currentPiece;
var currentDropPiece;
 
var mouse;
 
function init(){
    img = new Image();
    img.addEventListener('load',onImage,false);
    img.src = "https://picsum.photos/600/600/?random";
}
 
document.getElementsByTagName('input').addEventListener("onclick", function() {
  initPuzzle();
})
 
function onImage(e){
    pieceWidth = Math.floor(img.width / PUZZLE_DIFFICULTY)
    pieceHeight = Math.floor(img.height / PUZZLE_DIFFICULTY)
    puzzleWidth = pieceWidth * PUZZLE_DIFFICULTY;
    puzzleHeight = pieceHeight * PUZZLE_DIFFICULTY;
    setCanvas();
    initPuzzle();
}
 
function setCanvas(){
    canvas = document.getElementById('myCanvas');
    stage = canvas.getContext('2d');
    canvas.width = puzzleWidth;
    canvas.height = puzzleHeight;
    canvas.style.border = "1px solid black";
}
 
function initPuzzle(){
    pieces = [];
    mouse = {x:0,y:0};
    currentPiece = null;
    currentDropPiece = null;
    stage.drawImage(img, 0, 0, puzzleWidth, puzzleHeight, 0, 0, puzzleWidth, puzzleHeight);
    buildPieces();
}
 
function createTitle(msg){
    stage.fillStyle = "#000000";
    stage.globalAlpha = .5;
    stage.fillRect(100,puzzleHeight - 100,puzzleWidth - 200,40);
    stage.fillStyle = "#FFFFFF";
    stage.globalAlpha = 1;
    stage.textAlign = "center";
    stage.textBaseline = "middle";
    stage.font = "20px Arial";
    stage.fillText(msg, puzzleWidth / 2, puzzleHeight - 80);
}
 
function buildPieces(){
    var i;
    var piece;
    var xPos = 0;
    var yPos = 0;
    for(i = 0;i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY;i++){
        piece = {};
        piece.sx = xPos;
        piece.sy = yPos;
        pieces.push(piece);
        xPos += pieceWidth;
        if(xPos >= puzzleWidth){
            xPos = 0;
            yPos += pieceHeight;
        }
    }
    document.onmousedown = shufflePuzzle;
}
 
function shufflePuzzle(){
    pieces = shuffleArray(pieces);
    stage.clearRect(0,0,puzzleWidth,puzzleHeight);
    var i;
    var piece;
    var xPos = 0;
    var yPos = 0;
    for(i = 0;i < pieces.length;i++){
        piece = pieces[i];
        piece.xPos = xPos;
        piece.yPos = yPos;
        stage.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, xPos, yPos, pieceWidth, pieceHeight);
        stage.strokeRect(xPos, yPos, pieceWidth,pieceHeight);
        xPos += pieceWidth;
        if(xPos >= puzzleWidth){
            xPos = 0;
            yPos += pieceHeight;
        }
    }
    document.onmousedown = onPuzzleClick;
 
}
 
function shuffleArray(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}
 
function onPuzzleClick(e){
    if(e.layerX || e.layerX == 0){
        mouse.x = e.layerX - canvas.offsetLeft;
        mouse.y = e.layerY - canvas.offsetTop;
    }
    else if(e.offsetX || e.offsetX == 0){
        mouse.x = e.offsetX - canvas.offsetLeft;
        mouse.y = e.offsetY - canvas.offsetTop;
    }
    currentPiece = checkPieceClicked();
    if(currentPiece != null){
        stage.clearRect(currentPiece.xPos,currentPiece.yPos,pieceWidth,pieceHeight);
        stage.save();
        stage.globalAlpha = .9;
        stage.drawImage(img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight, mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
        stage.restore();
        document.onmousemove = updatePuzzle;
        document.onmouseup = pieceDropped;
    }
}
 
function checkPieceClicked(){
    var i;
    var piece;
    for(i = 0;i < pieces.length;i++){
        piece = pieces[i];
        if(mouse.x < piece.xPos || mouse.x > (piece.xPos + pieceWidth) || mouse.y < piece.yPos || mouse.y > (piece.yPos + pieceHeight)){
            //PIECE NOT HIT
        }
        else{
            return piece;
        }
    }
    return null;
}
 
function updatePuzzle(e){
    currentDropPiece = null;
    if(e.layerX || e.layerX == 0){
        mouse.x = e.layerX - canvas.offsetLeft;
        mouse.y = e.layerY - canvas.offsetTop;
    }
    else if(e.offsetX || e.offsetX == 0){
        mouse.x = e.offsetX - canvas.offsetLeft;
        mouse.y = e.offsetY - canvas.offsetTop;
    }
    stage.clearRect(0,0,puzzleWidth,puzzleHeight);
    var i;
    var piece;
    for(i = 0;i < pieces.length;i++){
        piece = pieces[i];
        if(piece == currentPiece){
            continue;
        }
        stage.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
        stage.strokeRect(piece.xPos, piece.yPos, pieceWidth, pieceHeight);
        if(currentDropPiece == null){
            if(mouse.x < piece.xPos || mouse.x > (piece.xPos + pieceWidth) || mouse.y < piece.yPos || mouse.y > (piece.yPos + pieceHeight)){
                //NOT OVER
            }
            else{
                currentDropPiece = piece;
                stage.save();
                stage.globalAlpha = .4;
                stage.fillStyle = PUZZLE_HOVER_TINT;
                stage.fillRect(currentDropPiece.xPos,currentDropPiece.yPos,pieceWidth, pieceHeight);
                stage.restore();
            }
        }
    }
    stage.save();
    stage.globalAlpha = .6;
    stage.drawImage(img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight, mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
    stage.restore();
    stage.strokeRect( mouse.x - (pieceWidth / 2), mouse.y - (pieceHeight / 2), pieceWidth,pieceHeight);
}
 
function pieceDropped(e){
    document.onmousemove = null;
    document.onmouseup = null;
    if(currentDropPiece != null){
        var tmp = {xPos:currentPiece.xPos,yPos:currentPiece.yPos};
        currentPiece.xPos = currentDropPiece.xPos;
        currentPiece.yPos = currentDropPiece.yPos;
        currentDropPiece.xPos = tmp.xPos;
        currentDropPiece.yPos = tmp.yPos;
    }
    resetPuzzleAndCheckWin();
}
 
function resetPuzzleAndCheckWin(){
    stage.clearRect(0,0,puzzleWidth,puzzleHeight);
    var gameWin = true;
    var i;
    var piece;
    for(i = 0;i < pieces.length;i++){
        piece = pieces[i];
        stage.drawImage(img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
        stage.strokeRect(piece.xPos, piece.yPos, pieceWidth,pieceHeight);
        if(piece.xPos != piece.sx || piece.yPos != piece.sy){
            gameWin = false;
        }
    }
    if(gameWin){
        setTimeout(gameOver,500);
        alert("You Win!");
    }
}
 
function gameOver(){
    document.onmousedown = null;
    document.onmousemove = null;
    document.onmouseup = null;
    initPuzzle();
}
Добавлено через 1 час 21 минуту
Помогите мне разобраться, как сделать так чтобы с блока пазла который разбивается на 25 частей можно было переносить на полупрозрачный блок как делается здесь: https://codepen.io/kiyutink/pen/NNrBxy, но с использованием чистого JavaScript, а не Ajax, Jquery. Как реализовать это?!
0
nightofpromises
0 / 0 / 1
Регистрация: 18.12.2016
Сообщений: 75
Завершенные тесты: 1
16.03.2019, 21:36  [ТС] 9
Ну помогите мне кто-нибудь разобраться в том что я выше перечислила, пожалуйста
0
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1900 / 1148 / 545
Регистрация: 16.04.2016
Сообщений: 3,069
Завершенные тесты: 2
17.03.2019, 21:29 10
nightofpromises, здравствуйте Анна. Прошу Вас не думать дурного про форум, помощи Вы не дождались вероятно потому, что люди удивляются - как человек с такой специализацией
C++, Visual C++, C#.NET, PHP, JavaScript, HTML, Базы данных
, еще не догадался найти и посмотреть документацию.
Например сюда - https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Drag_and_drop.
Также довожу до Вашего сведения, что Ajax не меняет синтаксис JS, это лишь технология, расширяющая возможности языка. Реализуя её, Вы будете писать на чистом JS. Это такое же нативный апи, как и Canvas.

Далее, зашедшие сюда, вероятно также недоумевают, зачем Вам Drag'nDrop на канве. Прочитав немного доку, думаю Вы их поймете.
Вот небольшой пример, использования апи DnD, и кода меньше - https://codepen.io/qwerty_wasd/pen/aMGgzG
Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="puzzle-fields">
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/858585/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/de688e/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/6876de/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/68cade/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/68dea1/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/76de68/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/c6de68/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/dec368/000000.png" alt=""/></div>
  <div class="item" draggable="true"><img src="https://dummyimage.com/100x100/de8668/000000.png" alt=""/></div>
</div>
<div class="puzzle-fields">
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
  <div class="item" draggable="true"></div>
</div>
CSS
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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
body {
  padding-top: 50px;
  text-align: center;
}
 
[draggable] {
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
 
.puzzle-fields {
  border: 2px solid red;
  display: inline-flex;
  flex-flow: row wrap;
  width: calc(3 * 104px + 4px);
  cursor: pointer;
}
.puzzle-fields .item {
  border: 2px solid #000000;
  display: inline-block;
  width: 104px;
  height: 104px;
}
Javascript
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
let opDnD = {
  buff: null,
  items: document.getElementsByClassName(`item`),
  events: {
    start: e => {
      opDnD.buff = e.currentTarget;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', e.currentTarget.innerHTML);
    },
    over: e => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    },
    end: e => {
      opDnD.buff.innerHTML = e.currentTarget.innerHTML;
      e.currentTarget.innerHTML = e.dataTransfer.getData('text/html');
    },
  },
}
 
Array.from(opDnD.items, elem => {
  elem.addEventListener(`dragstart`, opDnD.events.start);
  elem.addEventListener(`dragover`, opDnD.events.over);
  elem.addEventListener(`drop`, opDnD.events.end);
});


А для того чтобы разбить картинку на несколько частей, необязательно использовать Canvas. Почитайте о том, как использовать спрайты.
Но если уж Вам уперлась канва, то имитировать DnD можно следующим образом:
- работать с объектами перемещения придется к с экземплярами Path2D - https://developer.mozilla.org/en-US/docs/Web/API/Path2D
- создать для каждого экземпляра boolean флаг
- по событию mousedown на экземпляре, ставим флаг в true, проверяя при этом что координаты мыши попадают по цели
- по событию mouseup \ mouseleave флаг ставим в false.
- по событию mousemove на экземпляре, пересчитываем координаты вершин экземпляра с учетом флага и не забываем перерисовывать его.

Приведу пример кода, делал его для другой темы, но думаю разберетесь (ну лень портянку писать) - https://codepen.io/qwerty_wasd/pen/exyXOE
Кликните здесь для просмотра всего текста

Javascript
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
let opCnv = (function(w, d) {
 
  let opCnvR = {
    elem: d.getElementById(`exam`),
    ctx: d.getElementById(`exam`).getContext(`2d`),
    poly_1: {
      x: [100,150,125,75,50,100],
      y: [50,75,125,125,75,50]
    },
    poly_2: {
      x: [300,350,325,275,250,300],
      y: [50,75,125,125,75,50]
    }
  },
      tmp = {
        flag: [false, false],
        fill: `black`
      };
 
  const draw = p => {
    let figure = new Path2D();
    opCnvR.ctx.fillStyle = tmp.fill;
    opCnvR.ctx.beginPath();
    opCnvR.ctx.moveTo(p.x[0],p.y[0]);
    p.x.forEach((e, i) => figure.lineTo(e,p.y[i]));
    opCnvR.ctx.closePath();
    opCnvR.ctx.fill(figure);
    return figure;
  },
        collision = e => {
          if (tmp.flag.indexOf(true) > -1) {
            [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)].x.forEach((pos, ind) => {
              [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)].x[ind] += e.movementX;
              [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)].y[ind] += e.movementY;
              /* that condition observe collisions */
              tmp.fill = (opCnvR.ctx.isPointInPath(draw([opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(false)]),
                                           [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)].x[ind],
                                           [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)].y[ind]) ||
                  opCnvR.ctx.isPointInPath(draw([opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(true)]),
                                           [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(false)].x[ind],
                                           [opCnvR.poly_1, opCnvR.poly_2][tmp.flag.indexOf(false)].y[ind])) ?
                `red` : `black`;
            });
            opCnvR.ctx.clearRect(0, 0, opCnvR.elem.height*2, opCnvR.elem.width*2);
            [opCnvR.poly_1, opCnvR.poly_2].forEach(poly => draw(poly));
          }
        };
 
 
  [`resize`,`DOMContentLoaded`].forEach( e => {
    w.addEventListener(e , () => {
      opCnvR.elem.width = d.body.clientWidth - (parseInt(getComputedStyle(opCnvR.elem).borderWidth)*2);
      opCnvR.elem.height = d.body.clientHeight - (parseInt(getComputedStyle(opCnvR.elem).borderWidth)*2);
      opCnvR.ctx.clearRect(0, 0, opCnvR.elem.height*2, opCnvR.elem.width*2);
      [opCnvR.poly_1, opCnvR.poly_2].forEach(poly => draw(poly));
    });
  });
 
  [`mouseup`,`mouseout`].forEach(evt => {
    opCnvR.elem.addEventListener(evt, () => {
      tmp.flag.fill(false);
    });
  });
 
  opCnvR.elem.addEventListener(`mousedown`, e => {
    [opCnvR.poly_1, opCnvR.poly_2].forEach((p, i) => {
      if (opCnvR.ctx.isPointInPath(draw(p), e.clientX, e.clientY)) {
        tmp.flag[i] = true;
      }
    });
  });
  
[`mousemove`, `mousedown`, `mouseout`, `mouseup`].forEach(evt => opCnvR.elem.addEventListener(evt, collision));
  
  return opCnvR;
})(window, document);
2
8Observer8
2708 / 1667 / 293
Регистрация: 05.10.2013
Сообщений: 5,137
Записей в блоге: 87
18.03.2019, 00:51 11
Google Translate Result:

Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Далее, зашедшие сюда, вероятно также недоумевают, зачем Вам Drag'nDrop на канве.
Я бы тоже использовал <canvas> на ее месте. Canvas API имеет очень похожие принципы, такие как: C # / GDI +, C ++ / OpenGL и WebGL / JS. Например, очень просто перевести код из Canvas API в C # / GDI +. Я думаю, что сложнее перевести код из CSS в C # / GDI +. Мое мнение, что более логично продолжать использовать Canvas API для компьютерной графики и для разработки игр, потому что она уже написала много кода с использованием Canvas API. Я понимаю людей, которые изучают эти языки вместе: JavaScript, C ++ и C # посредством написания простых игр. Мы хотим иметь схожие принципы на этих языках. Мы не хотим тратить время на изучение совершенно разных способов рисования изображений. По этой причине я изучаю OpenGL, потому что могу использовать его в элементе <canvas>, и я просто переписываю свой код на C #, Java, C ++ и т. Д., Где у меня будет больше возможностей без ограничений браузера. Я думаю, что Canvas API - очень хороший инструмент для начинающих в компьютерной графике и разработке игр. Следующим шагом после Canvas API является WebGL и графические библиотеки, такие как Pixi.js, Phaser.js, Three.js, которые являются оболочками вокруг WebGL и Canvas API. В перспективе, если вы знаете OpenGL / WebGL, то вы знаете, как писать шейдеры в GLSL, а затем вы знаете, как писать шейдеры для Pixi.js, Phaser.js, Three.js и знаете, как очень эффективно обрабатывать изображения на видеокарте. , используя GLSL.

My Original Message in English

Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Далее, зашедшие сюда, вероятно также недоумевают, зачем Вам Drag'nDrop на канве.
I would use <canvas> on her place too. Canvas API has very similar principles like: C#/GDI+, C++/OpenGL, and WebGL/JS. For example, it is very simple to translate code from Canvas API to C#/GDI+. I think it is more difficult to translate code from CSS to C#/GDI+. My opinion that it is more logical to continue to use Canvas API for computer graphics and for game development because she already have written a lot of code using Canvas API. I understand people who is study this languages together: JavaScript, C++ and C# through writing simple games. We want to have similar principles in that languages. It this reason I study OpenGL, because I can use it on the <canvas> element, and it is simple to rewrite my code to C#, Java, C++ and so on, where I will have more power without browser restrictions. I think Canvas API is very good tool for beginners in computer graphics and game development. Next step after Canvas API is WebGL and graphics libraries like Pixi.js, Phaser.js, Three.js that are wrappers around WebGL and Canvas API. In perspective if you know OpenGL/WebGL then you know how to write shaders in GLSL and then you know how to write shaders for Pixi.js, Phaser.js, Three.js and you know how to process images with very efficient way on graphics card using GLSL.
1
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1900 / 1148 / 545
Регистрация: 16.04.2016
Сообщений: 3,069
Завершенные тесты: 2
18.03.2019, 17:24 12
8Observer8, hi!
I didn’t say to topstarter - "don't use Canvas" I said - "D'n'D and Canvas are incompatible things". For Canvas works with canvas (quibble ), api Drag'n'Drop - with DOM. And then I offered two variants as she did wanted.
0
18.03.2019, 17:24
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.03.2019, 17:24

Нужно ли знать чистый JavaScript для изучения библиотеки jQuery mobile
Доброго времени суток. Нужно ли знать чистый JavaScript для изучения библиотеки jQuery mobile, или...

Где найти чистый дистрибутив Windows 7 ? (Ну может и не совсем чистый)
Помогите найти дистрибутив Windows 7 с данными параметрами ! 1)Полностью чистый но с...

Dragndrop в 1С 8.1 УТП
Здратсвуйте! 1С 8.1 УТП. Есть обработка, которая ищет номенклатуру по некоторым параметрам. Есть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru