Игра в пары на Javascript. Часть 2

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 107

  • @midnightstar_zoriana
    @midnightstar_zoriana Рік тому +2

    Пожалуйста, продолжайте! Смотрю ваши видео уже вместо новостей и приколов. Как наркотик) очень интересно!!!! И полезно!!!

    • @alex_dudukalo
      @alex_dudukalo  Рік тому +1

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

  • @VeraYa22
    @VeraYa22 2 роки тому +3

    Очень нравится ваша подача и манера говорить. Спасибо за труд, вас не только полезно, но и приятно слушать)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, Вера. К сожалению не всегда успеваю быстро отвечать на комментарии и сообщения. Мне правда очень приятно читать такие комментарии. Это важный ориентир. Хочется понимать, что я делаю правильно, а что нет. Спасибо, что смотрите. Это приносит радость

  • @ИльяЛагунов-о6р
    @ИльяЛагунов-о6р 2 роки тому +12

    Очень круто. Самое интересное, когда спикер в прямом эфире отлавливает ошибки. Серьезно очень полезно пушто как новичок 99% времени ищешь собственные ошибки, но как это делать быстро и эффективно не знаешь, а тут такой опыт

    • @ИльяЛагунов-о6р
      @ИльяЛагунов-о6р 2 роки тому

      Как студенту скиллбокса интересны способы реализации этой игры без применения классов. "Ручками" создал разметку для карточек, также ручками написал парный массив. С помощью алгоритма Фишера-Йетса перемешал, методом forEach и textContent'ом добавил каждой карточке разное значение, но уткнулся в сравнение карточек. Теперь пройду смотреть про классы, а свой способ оставлю.

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Да, я писал код в реальном времени и до этого не готовился. Хотелось показать более живое видео. Спасибо за комментарий :)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Так же хотелось показать в этом видео что-то новое. Чего еще не было в базовом курсе. Тема классов может показаться сложной, но я уже поставил в план сделать подробное видео по ним. А так да, логика построения игрового поля у вас правильная :) Прошу прощения за долгий ответ :)

    • @ИльяЛагунов-о6р
      @ИльяЛагунов-о6р 2 роки тому

      @@alex_dudukalo в конечном счёте сделал генерацию индексов на основании первого массива. Довольно интересно. Если тут открылся стол заказов, то было бы круто послушать про new Data() и как с ним работать. Спасибо за ваши ролики!

  • @andreyfedyukin8360
    @andreyfedyukin8360 Рік тому

    Супер 👍 Александр, спасибо за подробнейший урок! Всё как всегда детально разобрано и разжевано)) Спасибо Вам огромное!

    • @alex_dudukalo
      @alex_dudukalo  Рік тому +1

      Безумно приятно читать такие комментарии 😊 ваша поддержка очень вдохновляет🤗

  • @pavelpatsenkov
    @pavelpatsenkov Рік тому +1

    Здравствуйте, Александр. Очередное потрясающее объяснение. Хочется отметить момент, что вы не удаляете из видео фрагменты, где в коде допускаются ошибки. Вы на своём примере показываете, что ошибаться это нормально, что ошибки случаются даже у опытных специалистов, тем самым даёте понять как происходит поиск ошибки и отладка. Также вы показываете, как ведется поиск решения и призываете "гуглить" искомую информацию , а это очень педагогично. Спасибо Вам огромное!

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Спасибо большое за отзыв 🤗 ваша поддержка очень вдохновляет ☺ и да, вы правы, на ошибках учатся 👍

  • @РонКасторкин
    @РонКасторкин 2 роки тому +3

    Александр, ну вы и МАСТЕР, спасибо за помощь и низкий поклон!)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Я очень рад вашему отклику. Спасибо вам, что смотрите :)

  • @gamerprovr3234
    @gamerprovr3234 Рік тому +1

    Очень здорово все объяснили. Единственное, что стоит добавить, это то, что работает только через лайв сервер. Чтобы работало в веб, нужен локальный проводник)

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Здравствуйте, прошу прощения за долгий ответ, не всегда удается ответить вовремя. Спасибо за ваш комментарий. Да, действительно. В работе используются модули. И здесь понадобится лайв-сервер или другой локальный сервер :)

  • @andrewsolovev7771
    @andrewsolovev7771 2 роки тому +4

    Спасибо за материал)
    Сделайте краткий, но полезный , без воды, курс по основам JS. Было бы круто!

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Благодарю за вашу поддержку и отклик. Прошу прощения за долгий ответ. В скором времени появится новый вводный курс по JS на моём канале, там будут основы использования инструментов программирования, буду рад вашему просмотру😊

  • @АндрейБитков-ж2д
    @АндрейБитков-ж2д 2 роки тому +2

    Спасибо, ваше видео очень помогло, сам очень долго ломал голову над реализацией

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      На самом деле вариантов решения масса. Я показал один из них. Так же хотел рассказать новый материал. Надеюсь не запутал им :)

  • @ordmev
    @ordmev Рік тому

    Спасибо. Все понятно и доступно. Вы объяснили как сделать игру с применением class. Я конечно все сделал, но хотелось еще разобраться как сделать без применения class т.к. на курсе в базовом js его еще не проходят. Он будет только в продвинутом js. Спасибо за работу.

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Прошу прощения за ожидание ответа, спасибо за Ваш комментарий)) В этом ролике я показываю классы, для того чтобы дать что-то новое и интересное, но думаю, что в будущем запишу видео по игре в пары без использования классов, потому что в целом там все просто получается и думаю будет интересно😊

  • @АлексейПиногоров-ц1д

    Александр, спасибо огромное! Становятся понятны как работают сложные вещи. Запишите. пожалуйста, третье видео с доработкой игры. Что бы на странице вводить количество карточек, не представляю как это сделать)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, спасибо за ваш комментарий. Я думаю сделать другой видео в котором покажу, как делать такую игру без использования классов :) И думаю там покажу, как вводить кол-во карточек ):

  • @ilaykaliuzhnyi6948
    @ilaykaliuzhnyi6948 2 роки тому +1

    Cпасибо большое за описание логики создания массива с парами,долго не мог разобраться ! 8:24

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, прошу прощения за долгий ответ. Разгребал рабочие дела. Да, записал видео как раз для этого. Надеюсь не запутал вас классами в видео :)

  • @12394465
    @12394465 Рік тому +1

    Огромное спасибо за труд) Изначально делал эту задачу другим способом (сделал карточки в разметке с дата атрибутами, добавлял их в массив и сравнивал по индексу, если элемент 0 != элементу 1, то удаляется класс показа карточки. А также в цикле arr.length =0 обнулял массив, чтобы начать сначала, но вообще вылетело из головы, что нужно будет перемешивать значения). В итоге силы кончились и решил уже переделать по вашему видео)

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Да, создавать карточки сразу в разметке, не очень удобная идея. Сложно перемешать и управлять сложностью игры (если, например , мы захотим увеличить кол-во карточек) С атрибутами, кстати хорошая идея. Спасибо вам, я рад, что предложенный мною способ вам понравился :)

  • @Holger_
    @Holger_ Рік тому

    Очередное полезное и понятное видео! Огромное спасибо!

  • @АнастасияБелова-р6с

    Спасибо!
    Мне очень нравится подача, Александр вы СУПЕР❤❤

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

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

  • @alanpuch2243
    @alanpuch2243 Рік тому +1

    Большое спасибо за видео. Разбираться придётся долго)) Из всего кода только создание массива парных чисел сам сделал. Но и это радует

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Спасибо за комментарий ) Это задание можно попробовать сделать без классов ) Думаю такая реализация будет более простой)

  • @Ol3zhkO
    @Ol3zhkO 2 роки тому

    Спасибо за видео!
    Очень классно, что можно к ним обратиться в процессе обучения, особенно на начальных этапах, когда только вникаешь вот в это вот всё

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Вы имеете ввиду классы?)

    • @Ol3zhkO
      @Ol3zhkO 2 роки тому

      @@alex_dudukalo Я имел ввиду готовые решения к заданиям из скиллбокса. Когда пытаешься сделать сам и что-то не получается, то можно посмотреть ваши видео и разобраться что делал не так)
      Про классы я только читал и в принципе поверхностно понял для чего они, но было приятно увидеть их практичное применение)

  • @dmytroihnatushko8802
    @dmytroihnatushko8802 2 роки тому +2

    Все очень круто! буду ждать видео об export import

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, Дмитрий. Спасибо за ваш комментарий. Уже в плане записать видео по этой теме :)

  • @GDev-xl4jw
    @GDev-xl4jw Рік тому +1

    Спасибо, особенно за классы, сетеры и гетеры. А в задаче есть над чем самостоятельно поработать и совершенствовать. Ну как минимум, у нас все цифры изначально видны. Просто цвет прозрачный. Можно всё увидеть просто выделив текст, или нажав ктрл + А.

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Здравствуйте, Спасибо за ваш комментарий :) О классах можно говорить долго :)

    • @alexandr.cherepanoff
      @alexandr.cherepanoff 11 місяців тому

      Просто пропишите в css для тэга body
      -youbkit-touch-callout: none;
      -youbkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

  • @СергейЧуканов-ы2ф
    @СергейЧуканов-ы2ф 2 роки тому +2

    Хотелось бы глубже изучить классы и колбек функции, буду рад, если выпустите такие видео уроки)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Спасибо за комментарий. Очень хочу рассказать о классах больше. Что бы вы предпочли? Вебинар в онлайн режиме на котором вы в реальном времени сможете задать вопросы? Или отдельное видео?

    • @nataljamasharskih1514
      @nataljamasharskih1514 Рік тому

      Отдельное видео

  • @anton4know
    @anton4know 2 роки тому +1

    Спасибо, Александр! Вы мой учитель!)

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Я рад вашуму коммнетрию ) Улабаюсь :)

  • @БорисВишневецкий-р8ы

    Спасибо, всегда ждем новые видео для изучения) Всегда интересно

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Это мотивирует. Работаем :)

  • @griha296
    @griha296 2 роки тому +1

    Спасибо! Ждём следующие видео

  • @KomanDante999
    @KomanDante999 2 роки тому +2

    Мда... в сравнении с тем, что я написал по этой игре - код раз в 10 меньше...и понятнее. Спасибо!
    Кстати, массив cardArray нам так и не понадобился. Возможно, он задумывался для дальнейшего совершенствования игры. Но и без него все работает.

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Да да )) Я делал игру в реальном времени без подготовки. Только потом понял, что массив мы не используем. Но если представить, что в будущем мы как то будем менять игру, то возможно нам он будет нужен :)

  • @ЕвгенийПолторыхин

    Супер подача. Но хотелось бы понять как содздать условия появления кнопки при завершении игры.

  • @ОлесяКомарова-ф6ц
    @ОлесяКомарова-ф6ц 2 роки тому

    Очень круто получилось! Спасибо большое)!!

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Осталось сделать форму :)

  • @EkaterinaAvdeeva-v8q
    @EkaterinaAvdeeva-v8q Рік тому +1

    Спасибо!

  • @Denik-is6gi
    @Denik-is6gi Рік тому +1

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

    • @alex_dudukalo
      @alex_dudukalo  Рік тому +1

      Спасибо за ваш комментарий. Знакомая история. Такое бывает, когда вы начинаете писать свои первые программы и приложения, но потом с опытом становится проще с порядком и структуризацией :)

  • @ЧынгызАйбеков-е7е
    @ЧынгызАйбеков-е7е 8 місяців тому

    Вы говорите "если хотите я запишу видео про классы, если хотите я запишу видео про импорты" но мы хотим чтобы вы записали видео про ВСЁ что связано с JS

  • @hycode05
    @hycode05 2 роки тому

    Круто и доходчиво 👍
    Продолжай делать еще игры

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Спасибо. Подумаю какую игру сделать следующую :)

  • @МаринаСлукина-н1б

    Александр, спасибо за видео! Благодаря вам получилось сдвинуться с мертвой точки и сделать домашку!

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Спасибо за комментарий :) Рад, что есть продвижение. Надеюсь тема классов вас не запутала :)

  • @ЕлизаветаЛебедева-э3п

    отличное объяснение!спасибо. Почему так мало видео на канале о JS? Ждем новые выпуски

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому +1

      Благодарю вас за поддержку и отклик, прошу прощения за долгий ответ. В скором времени выйдет новый вводный курс о JS. Буду рад вашему просмотрю.😊

  • @artemsergeev4833
    @artemsergeev4833 2 роки тому +2

    На 26 строчке ошибка Mumber. Поэтому если исправить, то в логике игры ошибка - если открыты две карточки и начать открывать другие с разными цифрами то они не скрываются, при этом класс success срабатывает ко всем карточкам.

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому +1

      Здравствуйте, Артем. Спасибо за хорошее замечание. Записал короткое видео с ответом: www.loom.com/share/2b08b277f6504152b04c4cd123ca4d7d

    • @artemsergeev4833
      @artemsergeev4833 2 роки тому +2

      @@alex_dudukalo спасибо за реакцию, я еще раз проверю свой код и отпишусь. По вашему видео видно, что все работает. Возможно в моем коде не срабатывает условие. Очень круто разобрали todo-list на недавнем вебинаре. Все четко и понятно🤝

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому +1

      @@artemsergeev4833 Спасибо, что были :) Старался максимально понятнее разобрать, но уверен, что можно лучше. Работаю над этим :)

  • @ДенисСеменов-з1х
    @ДенисСеменов-з1х 2 роки тому +1

    Спасибо за работу, все быстро делаете, не успеваю так думать. Но что такое классы я еще не учил. А допустим без классов, я сделал функцию по созданию карточки, могу ли я запушить ее в массив игры?

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому +1

      Здравствуйте, на самом деле перед записью видео я уже накинул стратегию написания алгоритма у себя в голове. Нот вы скоро тоже так научитесь. Это, как плавать. Чем больше практики, тем лучше вы держитесь в воде. Да, конечно. Функция может вести себя, как объект. Да и в целом вы можете сделать массив DOM элементов с карточками. Надеюсь я вас не запутал. Прошу прощения за долгий ответ :)

  • @asgard1428
    @asgard1428 2 роки тому

    Все очень интересно, а самое главное я тоже так хочу уметь. Но понять сложно все досканально, сложно потому что практики мало🤝🤝🤝

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Да, конечно. Всегда нужна практика. Даже опытным разработчикам.

  • @JuliaOpletaeva
    @JuliaOpletaeva Рік тому

    Большое спасибо за видео и объяснение. Остался один вопрос. Когда нажимаешь на одну и ту же карточку во второй раз, ей присваивается класс success без пары. Как это можно отредактировать?

  • @JuliasStories-t5u
    @JuliasStories-t5u 2 роки тому +1

    Александр, добрый день!
    Просто огромнейшее спасибо за Ваши видео! У меня вопрос такой возник, а как сделать, чтобы и последняя совпавшая карточка тоже переворачивалась, можно так сделать? А то она так и остается рубашкой к нам и появляется победный алерт.

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, очень рад что видео вам помогло) вы можете попробовать поместить алерт в setTimeout и создать небольшую задержку показа алерта )

    • @ТРС-б1р
      @ТРС-б1р Рік тому

      @@alex_dudukalo Здравствуйте, карточка не открывается даже с setTimeout )

    • @igors7305
      @igors7305 Рік тому

      @@ТРС-б1р Вот так работает: if (document.querySelectorAll('.card.success').length == cardsNumberArray.length) {
      // Сброс
      setTimeout(() => {
      alert('Победа!')
      container.innerHTML = ''
      cardsNumberArray = []
      cardsArray = []
      firstCard = null
      secondCard = null
      newGame(container, cardsCount)
      }, 1000)
      }

  • @Elena.S.
    @Elena.S. 2 роки тому +1

    💫

  • @dathceec7350
    @dathceec7350 2 роки тому

    Александр, классы это конечно очень здорово! Отдельный видосик точно нужен!
    Я вот решил навесить на карты количество кликов(обычный счётчик) известным мне способом, но по скольку мы к карточке обращаемся через this счётчик считает количество кликов на каждую карточку отдельно... Не могу понять как объединить эти клики в одну сущность?

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому +1

      Спасибо за комментарий и просмотр :) счётчик я бы сделал через глобальную переменную. У вас есть колбек функция. Именно в этой колбек функции можно увеличивать счётчик. В самом классе я бы это не делал.

  • @Expertdog
    @Expertdog 2 роки тому +1

    А если перед началом игры пользователь должен в поле для ввода ввести количество карточек. Например введет 6 и формируется игровое поле 6 на 6. В таком случае размер карточки как правильно рассчитать и куда прописывать? я так понимаю это будет отдельная ф-ция?

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

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

  • @Roman197634
    @Roman197634 Рік тому

    отличное видео. Спасибо. Правда импорт и экспорт не запустился, выскочила ошибка, запустил Live server, но не помогло, посыпалась еще ошибка. Пришлось копировать весь класс Кард в начало файла main.

  • @РегинаПотапова-я8р

    Cпасибо за видео! А у вас есть исходный код, все делала по вашему видео-но у меня работает некорректно. Хочу поискать ошибку у себя. Уже третий день пытаюсь найти по видео- и неуспешно.

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Здравствуйте, да конечно. Отправляю ссылку на исходники :) drive.google.com/drive/folders/1PIL79C51DhxuUgfziKPV-aK0KQXXVe2G?usp=sharing

  • @gamerprovr3234
    @gamerprovr3234 Рік тому +1

    ну и еще, последняя карточка не открывается, нужно бы тоже поправить)

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Здравствуйте, хорошее замечание. Да, проверка срабатывает так быстро, что на экране отображается окно alert с уведомление о завершении игры до открытия финальное карточки. Как минимум, можно поставить таймер на уведомление :) Спасибо вам

    • @gamerprovr3234
      @gamerprovr3234 Рік тому +1

      @@alex_dudukalo да, так и сделал)

  • @ПенсионерМолодой

    Александр, а как бы сделать так, чтобы и последняя пара отображалась как успешно угаданная?

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Здравствуйте, да есть такая проблема. Дело в том, что уведомление о победе появляется быстрее, чем класс открытия добавляется элементу и происходит перерисовка страницы. Вы можете сделать небольшую паузку, перед отображением уведомления. Например, так:
      setTimeout(function () {
      alert("Вы победили!")
      }, 100)

  • @epic3386
    @epic3386 2 роки тому +1

    Это лихо конечно, так вот сходу колбэки классы, надо время что бы переварить это всё.

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Да, хотел что то новое бонусом показать ))

  • @ptspts4895
    @ptspts4895 2 роки тому

    Привет, у меня почему-то после нажатия на карточку под firstCard выводит один и тот же объект вне зависимости от того на какую нажму потом, а под secondCard всегда null. Ну и соответсвенно после выбора двух не совпадающих карт ничего не сбрасывается и дальше все можно открывать, success не работает тоже. Код 10 раз перепроверил с твоим

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Привет, а можно посмотреть код, попробуйте выгрузить в кодпен или отправит ссылку наизусть Гугл/Яндекс диска. Я посмотрю :)

    • @FomichRoman
      @FomichRoman 2 роки тому

      Столкнулся с такой же проблемой, в чем причина?

  • @MrUnknownman1986
    @MrUnknownman1986 2 роки тому +1

    А источник кода есть ?

    • @alex_dudukalo
      @alex_dudukalo  2 роки тому

      Здравствуйте, да конечно. Прикрепляю ссылку. Но для отработки и практики рекомендую писать код самостоятельно :)
      drive.google.com/drive/folders/1PIL79C51DhxuUgfziKPV-aK0KQXXVe2G?usp=sharing

    • @MrUnknownman1986
      @MrUnknownman1986 2 роки тому +1

      @@alex_dudukalo Благодарю

  • @ilyapetrov8233
    @ilyapetrov8233 Рік тому +1

    модульное программирование 😂😂🤣🤣😂

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Модульное программирование, да :)

  • @ilyapetrov8233
    @ilyapetrov8233 Рік тому

    Человек который путает импорт с экспортом, чему то учит..... странно

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      Илья, вас что то не устроило в ролике или у вас не работает программа ? :)

    • @ilyapetrov8233
      @ilyapetrov8233 Рік тому +1

      @@alex_dudukalo не устроило то, что человек который что то делает на публику, не может банальные вещи знать, вроде export/import.

    • @alex_dudukalo
      @alex_dudukalo  Рік тому

      @@ilyapetrov8233 Мне нужно пересмотреть еще раз это видео. Что бы вникнуть в контекст ошибки в речи или коде. Могу ли я говорить что то на публику не зная чего то. Может быть, а может и нет :) Но пока мне нравится это делать. Спасибо, что делитесь вашим отзывом. Это правда помогает мне не расслабляться и работать над собой. Но я всегда настроен на дружелюбность )