Разрабатываем игру «Пятнашки» на чистом JavaScript
Vložit
- čas přidán 24. 07. 2024
- В видео будем вместе разрабатывать игру «Пятнашки»: верстка + JavaScript.
❤️ Мой telegram канал: t.me/webelart
❤️ Поддержать развитие канала: / webelart
⭐️ Для старта разработки: github.com/liveldi/fifteen_start
⭐️ Демо: webelart.com/lessons/fifteen_...
⭐️ Исходники на patreon (c pug и на чистом html, css, js): / 64330242
Рекомендуемые видео:
🌱 Единицы измерения CSS: px, em, rem, %, vw, vh, vmin, vmax, ex, ch: • Урок 2. Единицы измере...
00:00 введение.
01:45 скачиваем и запускаем проект
03:16 разбираем устройство начального проекта
06:34 создаём разметку + разбираем синтаксис Pug
12:58 оформляем стили
25:58 JS: определяем задачу и основные переменные.
29:08 JS: определяем этапы разработки игры
31:18 JS: располагаем квадраты в игре
44:37 JS: кнопка перемешать.
49:39 JS: реализуем смену позиции по клику.
01:03:32 JS: реализуем смену позиции по стрелочкам.
01:10:38 JS: обозначаем выигрыш.
01:16:09 Небольшие правки outline
01:17:19 Проверка и правка ресайза.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Леночка, ты вернулась...) Видео супер. Ты умничка..)
❤️
спасибо ) круто , я только начал учить JS, и такие уроки наглядно демонстрируют возможности, еще раз спасибо)
На здоровье! У меня на канале есть ещё уроки по разным прикольным штукам и анимашкам, галереям :) webelart.com/lessons
Очень интересно. Как раз то, что я искал. Спасибо.
очень классный урок😇 Спасибо боьшое🙃
Спасибо, всё понравилось, хотим ещё что нибудь интересное!
Спасибо за интересный урок! Не все из этого я понял, но многие вещи стали более понятными.
Здорово, я очень рада! Где не понятно задавайте вопросы и пробуйте ещё раз. Постепенно, постепенно всё уложится! ❤
Хорошее видео :) спасибо
привет всем тем, кто делает CodeJam RSSchool!)
Видео отличное!, пишу немного другую логику этой игры, т.к. мой мозг хочет сделать по своему, а не как принято))) так что спасибо за подсказку как что должно работать)
Два часа до дедлайна, торопись! 😂
48:10 сложность этого шафла - n*logn из-за сортировки. если применять тасование Фишера-Йетса, будет эффективнее: линия
класс!
мило, лайк и подптска)
Node !== Ноде :)
Это так, минутка занудства касательно произношения. Спасибо, видос классный
😘❤️
Я в начале 2000-х тоже баловался этой игрушкой. Тогда осваивал Delphi и тоже написал подобное на нём. Тоже использовал кнопки. Но там без анимации и логика работы была другая. Где-то даже исходники валяются на моём сайте. Но мне самому страшно смотреть на тот г..но-код :)
О куртяк)
Видео супер, огромное спасибо!👍
Разрешите вопрос, если на создание подобной игры на видео у вас ушло около 1часа 20 мин, то какое общее количество времени вы потратили на создание этой головоломки?))(придумать реализацию, найти /написать формулы и т.д)
Не помню уже, неделя может :) Спасибо за комментарий, рада, что урок понравился❤️
Елена здравствуйте не подскажите как правильно учить js не как не заходит а говорят что он самый простой)
Отличные получились пятнашки! Спасибо. Только одно уточнение. Проверку на возможность движения квадратика можно сделать проще:
return Math.abs(blankItemCoords.x - currentItemCoords.x) + Math.abs(blankItemCoords.y - currentItemCoords.y) === 1;
как жаль что я не мог ето посмотреть в 2019 когда только учил JS, а сейчас уже и сам могу такое сделать , но видео крутое !
Елена подскажите, на ваш взгляд, написание этой игры к какому уровню можно отнести: Трейни, Джун, Джун+ и тд ??
Сложно так растасовывать по левелам. Первоначально нужно определить кто такой джун в целом, часто левелы от компаний конкретных выстраиваются: мы ждем от джуна начальные знания javascript + немного реакт + css + html, допустим.
В крупных компаниях кстати могут оценивать по уровню программирования и решению задач разных небольших, как быстро допустим shuffle напишите, сможете ли придумать умный shuffle. Там ещё и по коду можно опыт определить, усложняете решение или свободно оперируете языком. По решению одной и той же задачи можно получить разные уровни :)
Здравствуйте, спасибо за видео! Подскажите, пожалуйста, как правильно в самом js вписать each values in val?
Рада, что контент зашёл ❤ Так про циклы есть разное по переборам:
1. for (const value of array) {} Если по объекту можно ключи взять Object.values(obj) или Object.keys(obj). Соответсвенно в value будут либо ключ, либо значение. Удобнее ключ.
2. Есть ещё цикл for (const key in obj) {}
он уже по объекту, но внутри нужно использовать obj.hasOwnProperty(key), т.к. там все свойства могут перебираться, даже те которые не в прямом доступе.
круто. можно еще проверять массив после сортировки на "решаемую" комбинацию. Иначе в половине случаев случайного перемешивания массива собрать игру будет невозможно.
Есть ещё одно видео czcams.com/video/ey7I6MgWxAw/video.html
Там исправляю нерешаемые комбинации :)
Ого классный ролик , а какая у вас тема vscode просто голубой очень яркий
Спасибо! Про тему, кажется обычная дефолтная темная dark+
Только начал изучать программирование. JS в частности. Ваши уроки очень помогают. Огромное спасибо. Готов слушать Вас до конца дней своих.
А Вы замужем вообще?😍☺
Выполнял это задание около 3 месяцев назад. Показалось сложным и не понятным.
Вернулся, что бы повторить и теперь мне показалась функция для заполнения матрицы сложной.
Поэтому вот моё решение:
let y = 0
data.map(item => matrix[y].length === 4 ? (y++,matrix[y].push(item)) : matrix[y].push(item))
Че то не могу разобраться почему при перемешивании кнопок у нас успешно отрабатывает setNodeStyles, допустим в начале у 16-го элемента translate3D(300%,300%,0)
Если в след раз этому же элементу выпадает x = 1, y = 1, то его translate3D(100%,100%,0), но это свойство же считается относительно текущего положения элемента(то есть x = 400px, y = 400 а это уже выход за пределы игрового поля).
А получается у нас считается все как будто при любом срабатывании setNodeStyle() наши элементы находятся в позиции 0,0
Help pls
А все я допер, так работает transform translate, он не плюсует значения, он исходит от начальной позиции прописанной в css
Да, там используется transform translate + transform origin.
Кстати! Вспомнил об одной из особенностей игры. Если взять и просто так вывалить пятнашки, а потом положить рандомно, то есть вероятность, что паззл не сойдётся. Когда писал свою версию игрушки пришёл к выводу, что проще всего организовать программное рандомное перемещение элементов большое число раз. Ну, например, 1000. В этом случае получается рандомная картина, но паззл точно сойдётся. Ну, и, даже намного большее количество перемещений на моём тогдашнем AMD-K-2 на 450 МГц выполнялось суперреактивно.
Интересно. Я думала о том, чтобы написать умный шафл, т.е. когда перемешка идет правильно. Но мне показалось, что поле довольно большое и в любом случае собрать будет можно. В общем интересно, вдруг кто-то не сможет собрать :)) и хотелось бы увидеть конкретный кейс.
@@webelart Увы, я ещё на формате реальных пятнашек в детстве постоянно сталкивался с ситуацией когда две фишки расположены неправильно.
Можно просто поменять местами две соседние фишки, например 14 и 15. И в такой ситуации уже нельзя сложить паззл, как ты их не крути. С кубиком Рубика аналогичная ситуация. Если его разобрать и рандомно собрать то может получиться, что один уголок никогда не будет правильно расположен.
@@Tavda Ммм, попробовала заменить две цифры, пока не получилось собрать... Возможно дополню видео с умным шафлом. Спасибо за комментарий!
@@webelart Увидел ссылку на демо. Её изначально, вроде, не было. Попробовал собрать и прямо с первой попытки попал в такую ситуацию :) Я везучий.
@@Tavda 😅😅
А не подскажите, я застрял на 34 минуте. Почему то у меня не преобразуется в числа.(весь массив остаётся undefined) в чем может быть проблема
Писал все как у вас
Если скинете ссылку на GitHub и строчку где проблема, попробую вечерком посмотреть.
столкнулась с такой же проблемой, как вы ее решили?
@@ponomareva_ea у меня тоже мап не работает на этом массиве, я отказалась от использования мапа
кстати, в жизни, если просто случайно стартово разложить фишки, можно сделать расклад, который невозможно собрать
И тут также, есть второе видео, где я это поправила.
czcams.com/video/ey7I6MgWxAw/video.html
выводит ошибку какую то при команде npm install говорит что что то устарело если знаете в чем проблема скажите пожалуйста
Нужно понять сообщение. Еще есть вероятность что nodejs у вас новее, какая версия?
а все со второй попытки ошибки ушли ._.
Подскажите пожалуйста, она скачивает репазиторий на nodejs или это git?
тут нет nodejs это обычный клиентский js насколько я помню.
Ну то есть папки и файлы каким приложением скачиваете? В начале ролика
@@Dantalian_451 Зайдите и посмотрите. github.com/liveldi/fifteen_start
@@webelartспасибо огромное, всё получилось, простите за неудобства
За что ты убила его воробейшество