Создаем игру Пятнашки за 10 минут | ReactJS 15 Puzzle Game
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2024
- Все ссылки в Телеграм👉 t.me/tipichnyj_web_razrabotch...
В этом видео создаем игру Пятнашки с нуля. За основу берем чистый шаблон Vite + React. Весь процесс создания игры с подробным описанием каждой функции занимает около 10 минут.
• React JS | Формы
• React JS | GSAP
• React JS | Изображения...
• React JS | Menu
• React JS | Хуки
• React JS | Полезные фишки
• IT-ЛайфXаки
Сложно 😅 но интересно! Спасибо за контент!
2:47 - В алгоритме ошибка. Такое перемешивание дает неразрешимые ситуации, т.к. в пятнашках важно сохранять паритет.
Для этого число свапов должно быть чётным, при этом нельзя включать пустую клетку в такой алгоритм, т.к. перемещение пустой клетки сбивает корректность подсчета количества свапов (перемещение двух чисел не тоже самое, что и перемещение пустой клетки, например, в соседнее число, результаты непредсказуемы).
Если обязательно нужно замешать пустую клетку, далее можно сгенерировать два случайных числа, и переместить ее в матрице по горизонтали и вертикали, таким образом можно корректно получить случайные состояния.
function getScramble(n) {
let arr = Array.from({ length: n * n - 1 }, (_, i) => i + 1), parity = false;
for (let i = 0; i < n * n - 3; i++) {
let t = Math.floor(Math.random() * (n * n - 1 - i)) + i;
if (i !== t) parity = !parity;
[arr[i], arr[t]] = [arr[t], arr[i]];
}
if (parity) [arr[n * n - 3], arr[n * n - 2]] = [arr[n * n - 2], arr[n * n - 3]];
arr.push(0);
let g = n * n - 1, d = Math.floor(Math.random() * n), r = Math.floor(Math.random() * n);
for (let i = 0; i < d; i++, g -= n) [arr[g], arr[g - n]] = [arr[g - n], arr[g]];
for (let i = 0; i < r; i++, g -= 1) [arr[g], arr[g - 1]] = [arr[g - 1], arr[g]];
return arr;
}
getScramble(4)
Привет. Огромное спасибо за комментарий. Похоже надо глубже изучать материал перед началом разработки. Сделал пошаговое перемешивание в 200 ходов.
надо учесть, что не каждый случайный набор возможно собрать в данной головоломке. есть алгоритм, проверяющий такую возможность, но я бы реализовал тасовку как просто 100 ходов в случайном направлении от пустого поля, кроме обратного хода.
Привет. Я так и сделал. Исправил функцию на гите проекта. Сделал 200 случайных ходов от пустого поля. Не нашел как добавить текстовую подсказку в видео чтобы не перезаливать.