08.02.2022, 13:11
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Rise, да, Вы правы - с непривычки может казаться трудновыполнимым, но при объяснении со временем всё становится понятно и исполнимо... во всяком случае в материальной версии, но она фактически только на один раз, потому что легко запоминается первоначальное расположение. Ну, я так увидел, если что))
|
|
08.02.2022, 13:38
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 458
|
|
|
Борис К,
В вашем примере надо делать два клика за один ход: 1-ый клик - выбрать активный сегмент, 2-ой клик - выбрать соседний сегмент. А вы описывали это как просто делать клик на соседний. Если вы не можете даже сами правильно объяснить эту игру, то вряд ли сам играющий в этом быстро разберется.
Приходится постоянно перекликивать активный сегмент даже если он был тем же самым на прошлом ходе. Это не совсем очевидное поведение было для меня.
Последний раз редактировалось Rise, 08.02.2022 в 13:44.
|
|
08.02.2022, 13:42
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Rise, да, видимо, всё как Вы и описали... виноват!((
|
Сообщение от Rise
|
|
Приходится постоянно перекликивать активный сегмент даже если он был тем же самым на прошлом ходе.
|
Да, именно так!
|
Сообщение от Rise
|
|
Это не совсем очевидное поведение было для меня.
|
Это моя оплошность!(((((
|
|
08.02.2022, 14:02
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
Rise, Оплошность в смысле, что изначально неправильно на словах объяснил "поведение" кликов для обмена сегментами... должно быть, как я представил в последнем коде на этой страничке (нахожу это решение просто идеальным), но только у меня трудности его объединения с кодом генерации изображения, которое было представлено Aetae и Рони выше:
https://javascript.ru/forum/css-html...tml#post543474
|
|
09.02.2022, 11:18
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 458
|
|
|
Сообщение от Борис К
|
|
заменена следующей таблицей с отправкой к стиля
|
Скорее всего надо всё на канвас переписывать, возможно для вас это будет сложнее, чем стили и таблицы, с другой стороны не придётся разбираться в CSS и HTML, так как при работе с канвас вы погружаетесь полностью только в JS, ничего лишнего, идеальный вариант покапаться в языке, если цель не только игра, но и некое изучение.
Соединить эти две части можно, но это будет кривовато смотреться, и на будущее не очень, если захотите что-то поменять.
Последний раз редактировалось Rise, 09.02.2022 в 11:24.
|
|
09.02.2022, 12:36
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Сообщение от Rise
|
|
Скорее всего надо всё на канвас переписывать
|
Придётся изучать canvas... а что делать?!)
|
Сообщение от Rise
|
|
Соединить эти две части можно
|
Буду экспериментировать понемногу... в силу своих "способностей"))
Rise, спасибо Вам!!! |
|
09.02.2022, 23:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
игра пазлы собрать картинку
Борис К,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td {
width: 56px;
height: 56px;
background-size: cover;
background-image: var(--url);
}
.game.end{
border-collapse: collapse;
border-spacing: 0px;
}
</style>
</head>
<body>
<br>
<br>
<table class="game">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button id="btn">Shuffle</button>
<script>
function imagedata_to_image(imagedata) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = imagedata.width;
canvas.height = imagedata.height;
ctx.putImageData(imagedata, 0, 0);
return canvas.toDataURL();
}
// функция перемешивающая массив
function shuffle(array) {
let i = array.length;
while (i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
const x = 150; // ширина одного
const y = 150; // высота одного
const w = 2; // сколько в ряду
// картинки, должны быть на том же домене или иметь Access-Control-Allow-Origin
const images = [
"https://loremflickr.com/150/150/girl?random=1",
"https://loremflickr.com/150/150/dog?random=2",
"https://loremflickr.com/150/150/red?random=3",
"https://loremflickr.com/150/150/kitten?random=4"
];
const h = Math.ceil(images.length / w); // сколько в столбце
const canvas = Object.assign(document.createElement('canvas'), {
width: w * x,
height: h * y
});
document.body.prepend(canvas);
const ctx = canvas.getContext('2d'),
arrSrc = [],
tb = document.querySelector('.game'),
cells = Array.from(tb.querySelectorAll('td'));
let win, temp = [];
function endGame()
{
tb.classList.add('end');
}
function exch(event) {
if (win) return;
let td = event.target.closest('.game td');
if (td) {
let cellIndex = td.cellIndex;
let rowIndex = td.closest("tr").rowIndex;
if (temp.length) {
let x = Math.abs(cellIndex - temp[1]);
let y = Math.abs(rowIndex - temp[2]);
if ((x == 0 && y == 1) || (x == 1 && y == 0) || td === temp[0]) {
let url = td.style.getPropertyValue('--url');
td.style.setProperty('--url', temp[0].style.getPropertyValue('--url'));
temp[0].style.setProperty('--url', url);
temp = [];
}
} else {
temp = [td, cellIndex, rowIndex];
}
win = cells.every(({
style
}, i) => {
let url = style.getPropertyValue('--url');
style.setProperty('--url', arrSrc[i]);
let patern = style.getPropertyValue('--url');
style.setProperty('--url', url);
return url === patern
});
if (win) endGame();
}
}
tb.addEventListener("click", exch);
const createImg = () => Promise.all(
shuffle(images).map((src, i) => new Promise(
(onload, onerror) => Object.assign(new Image(), {
crossOrigin: 'anonymous',
src,
onerror,
onload
})
).then(({
target
}) => {
const hPos = Math.floor(i / w);
const wPos = i - (hPos * w);
ctx.drawImage(
target,
wPos * x,
hPos * y,
x,
y
)
}))
).then(() => {
const wh = w * x / tb.rows.length;
arrSrc.length = 0;
win = false;
temp = [];
tb.classList.remove('end');
for (let i = 0; i < tb.rows.length; i++) {
for (let j = 0; j < tb.rows[i].cells.length; j++) {
let imagedata = ctx.getImageData(wh * j, wh * i, wh, wh);
let url = imagedata_to_image(imagedata);
arrSrc.push(`url(${url})`);
}
}
shuffle(arrSrc.slice(0)).forEach((url, i) => cells[i].style.setProperty('--url', url))
});
btn.addEventListener('click', createImg);
createImg()
</script>
</body>
</html>
Последний раз редактировалось рони, 24.10.2022 в 07:21.
|
|
10.02.2022, 11:14
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Рони - javascript-атлант,
Сразу видно, что талант,
Гений мысли и труда,
Кладезь знаний и ума!
©
Последний раз редактировалось Борис К, 10.02.2022 в 17:32.
|
|
10.02.2022, 12:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Борис К,
строки 24 - 58 можно менять, 2 х 2, 3 х 3, 4 х 4, и т.д., да и код, с миру по нитке, больше сборная солянка, чем деликатес.  
|
|
10.02.2022, 13:23
|
|
Кандидат Javascript-наук
|
|
Регистрация: 22.02.2017
Сообщений: 145
|
|
|
Сообщение от рони
|
|
строки 24 - 58 можно менять, 2 х 2, 3 х 3, 4 х 4, и т.д.
|
Да, спасибо, я на таком уровне понимаю)
|
Сообщение от рони
|
|
да и код, с миру по нитке
|
Ну, не всё идеально в этом мире... главное, что отлично работает всё, как и представлялось бессонными ночами))
|
Сообщение от рони
|
|
больше сборная солянка, чем деликатес
|
Я понимаю... но не скромничайте!)
Рони, огромная благодарность Вам!!!
|
|
|
|
