Разрабатываем умный SHUFFLE для игры «Пятнашки» на JavaScript

В видео будем вместе разрабатывать игру «Пятнашки»: верстка + JavaScript.
❤️ Мой telegram канал: t.me/webelart
❤️ Поддержать развитие канала: / webelart
Небольшой кусочек кода в этом уроке, я позаимствовала у нас на проекте в loveholidays.com с одного мероприятия.
⭐️ Предыдущий урок: • Разрабатываем игру «Пя...
⭐️ Демо: webelart.com/lessons/fifteen_...
⭐️ Исходники на patreon: / 64639057
00:00 введение.
01:51 вспоминаем прошлый урок
04:44 алгоритм умного Shuffle
07:10 реализуем randomSwap
17:20 реализуем мульчи-вызов.
28:44 доработки
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[@user-tk7qv9rv2c]

Спасибо за то, что доделали до финального варианта, а не оставили, как было в прошлом уроке! Так еще больше понимаешь, насколько ценный материал даете!

[@dr.margulis7773]

Добрый день, Елена! Всегда с нетерпением жду ваши уроки! Так объяснять материал, как это делаете Вы - дано далеко не каждому. Спасибо за ваш бесценный труд! 👏👏👏 👍

[@webelart]

Спасибо! ❤️

[@user-fj8cu3nq9h]

Спасибо огромное за столь познавательное видео, ваш канал стал приятным открытием и хорошей помощью в изучении JS!👍

[@nuZdarova]

Привет! Спасибо) Очень нравится то что вы делаете, требую ещё :) Дальнейших успехов

[@SamusikVitali]

Классный урок!💪

[@richardsorge3965]

Спасибо за видео, вы просто гений !

[@MrSukhopar]

Все у вас было правильно. В оригинальной игре костяшки с числами можно разместить абсолютно рандомно, они же с поля вытаскиваются и перемешиваются перед игрой. Ну и да есть комбинации не решаемые, как у многих других игр)) Но, за вариант беспроиграшный спасибо)

[@webelart]

Спасибо за комментарий! ❤️ Про игру костяшки не знала, надо поискать :))) По пятнашкам насколько понимаю может быть половина комбинаций из всех возможных - нерешаема, мне понравилось доказательство из этой статьи pyatnashki.wmsite.ru/kombinacyi. В любом случае да, теперь точно можно будет решить :)

[@user-sr7my5kl1q]

Минутка занудства: Усложняете алгоритм перемешивания, вам достаточно определить "пустую" клетку и далее X+/- 1(первые два возможных хода) и Y+/-1(еще два возможных хода) проверить на принадлежность игровому полю и прошлому ходу. нет необходимости перебирать весь массив игрового поля. Да, для игры в пятнашки это не создаст нагрузки, но к сожалению сейчас и ресурсоемкие задачи зачастую решают так же, без оптимизаций совсем, насмотревшись вот таких решений в лоб :)(весь код не смотрел и не слушал, просто за это мозг зацепился пока на фоне играл ваш ролик)

[@webelart]

Спасибо за комментарий, да можно и так проверить элементы. Это оптимальнее по производительности, особенно если бы мы имели поле 1млн на 1млн клеток. Но опять же как заметили, для игры пятнашки нагрузки не будет, массив 4 на 4. :) В целом мне понравилась идея с перебором, всё в одной функции определить и используя прошлые уже разработанные функции сделать проверку, плюс если вдруг появятся ещё дополнительные валидные поля (хоть это и вряд ли), решение будет работать железно. В любом случае в текущей задачи оба решения норм. А вот про ресурсоёмкие задачи, здесь уже зависит, как писать код и какие ресурсы хотите сохранить и где. Здесь обязательно нужен предварительный анализ. Иногда решение в лоб, особенно если оно выглядит более понятным использовать лучше, чем оптимизированную менее понятную версию. Здесь хорошо ложатся примеры с рекурсией и стеком на цикле. Рекурсивные решения обычно более лаконично и наглядно выглядят, а вот со стеком и циклом может получится более громоздко, но зато более производительно. И в тоже время рекурсия - это крутой инструмент и часто используется в программировании.

[@darfil1663]

Добрый день, было бы прикольно реализовать memory game)

[@AnatoliyMir]

Лайк! Есть ли смысл писать эту игру на ООП?

[@webelart]

Можно по разному реализовывать.

[@Tavda]

Перемешивает конечно красиво, но можно было сделать подобное просто в памяти, а уже результат перемешивания отобразить. Но это уже на вкус и цвет.

[@webelart]

Да, можно по разному :)) Спасибо за комментарий и что про баг рассказали в прошлом видео! ❤️

[@Tavda]

@@webelart Накидал свой вариант. Ссылку на репозиторий на гитхабе кидать не буду, потому что ютуб удаляет подобные комментарии. Но если интересно, пользователь fsa, проект html5-fifteen. Там сборка проекта по другому, исходники другие. А вот внешний вид оставил как в уроках.

[@webelart]

@@Tavda Ваууу! Крутота! 🔥🔥🔥

[@Tavda]

@@webelart Кстати, я на github ещё пару простеньких игрушек выкладывал (Sokoban и Snake). Столкнулся с проблемой на мобилках - если управление свайпами делаешь, то картинка прыгает из-за того, что в браузере адресная строка то появляется, то исчезает. Даже не знаю как исправить.

[@user-fd8xw7ji2u]

Перемена местами 14 и 15 делает нерешаемую задачу если нельзя использовать третий ряд снизу. Это был рекламный трюк изобретателей или производителей, обещали деньги за решение.