Тёмный

Игра в пары на Javascript. Самое понятное объяснение 

Александр Дудукало
Подписаться 16 тыс.
Просмотров 7 тыс.
50% 1

Простой способ создания игры в пары на Javascript с понятным кодом (HTML + CSS + JS). Создаем массив чисел, перемешиваем его и строим игровое поле с карточками. Добавляем логику и игра готова.
👁‍🗨 Исходники кода в телеграм: t.me/frontend_du2
👁‍🗨 Discord сервер: / discord
👁‍🗨 VK: frontend_du2
Тайм-коды:
00:00 - Начало
00:57 - Базовая заготовка
03:07 - Массив чисел
06:43 - Перемешивание
13:20 - Создание карточек
25:58 - Логика игры
48:09 - Настройка сложности игры
53:06 - Настройка игрового поля

Опубликовано:

 

7 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 65   
@user-fd1um8ku9v
@user-fd1um8ku9v 7 дней назад
Александр, спасибо большое за урок, всё понятно, всё разложили по полочкам, ваш труд не оценим вы помогаете новичкам как я понять и усвоить JavaScript.Дай Бог вам здоровья.Развиваете ваш канал он очень нужен нам.Спасибо большое.
@marever13
@marever13 7 месяцев назад
Мне безумно нравится, когда Александр предлагает какое-то решение или лишь думает в нужном направлении (подталкивает), а потом предлагает подумать самому и найти решение - прям обожаю такой подход.
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо )) Да-да. Иного хочется предложить решить что-то самому. Это очень полезно, особенно в случае, когда зритель пишет код вместе со мной :)
@user-bb9es5tl9e
@user-bb9es5tl9e 3 месяца назад
Очень интересно, понятно чётко сформулирован действия коды легче понимать
@user-qx3mw6fz7h
@user-qx3mw6fz7h 8 дней назад
как всегда превосходное обьяснение ❤
@user-tt4lu1vk9g
@user-tt4lu1vk9g 28 дней назад
Все очень доступно и понятно! Спасибо!
@ilya6710
@ilya6710 3 месяца назад
Это моя находка что я вас нашел на ютуб, в данный момент прохожу обучение в Skillbox, не всегда все понятно преподносят, но потом просматриваю вас и все становится понятно. Спасибо вам
@development76
@development76 Месяц назад
Та же история
@alena_75
@alena_75 6 месяцев назад
Александр, спасибо огромное! Это лучшее объяснение - всё очень просто и доступно. После Ваших видео хочется продолжать обучение. Желаю Вам творческих успехов! Творите ещё, у Вас отлично получаются обучающие ролики. Смотрю всё на вашем канале
@alex_dudukalo
@alex_dudukalo 6 месяцев назад
Безумно приятно читать такие комментарии ☺ ваша поддержка очень вдохновляет!)) спасибо! 😊
@user-bp9yn7br6p
@user-bp9yn7br6p 7 месяцев назад
Александр, большая благодарочка!!! Даже до меня дошло. Большое спасибо за Ваш труд. Это для нас, начинающих так важно и необходимо, что низкий Вам поклон. Вы учите думать как программист. Как работать с самым главным для программиста, логикой. Только посмотрев Ваше видео, что то начало у меня конкретно получаться. Еще раз, огромное спасибо!!!
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Безумно приятно читать такую обратную связь ☺ рад, что благодаря моим видео вы развиваетесь в этой сфере 🔥 спасибо!))
@user-jv1kz4xi2c
@user-jv1kz4xi2c 2 месяца назад
Александр, лучший!)
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 2 месяца назад
Спасибо Александр, это видео мне очень помогло!
@user-qn4yk5sd7s
@user-qn4yk5sd7s 8 месяцев назад
Когда смотрел первое видео с классами, очень путался и много чего не понял. Сейчас намного проще и понятнее. Одно из любимых моих заданий на курсе) Спасибо!!!
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо за ваш комментарий😊 надеюсь и другие видео курса вам понравятся
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 8 месяцев назад
Не надо ускорять видео, очень интересно же и даже баг разобрали👍
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Да, но ролик достаточно долгий вышел :) Спасибо вам за комментарий :)
@user-by3gw2qh6g
@user-by3gw2qh6g 8 месяцев назад
час пролетел незаметно! Большое спасибо за Ваш труд. Ну а я пойду пробовать по памяти повторить эту игру😅❤
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо за комментарий😊 надеюсь у вас все получилось 🔥
@user-eu9pg1wq3c
@user-eu9pg1wq3c 8 месяцев назад
Спасибо за такое видео, приятно слышать, то как вы объясняете каждый свой шаг. Ждем новые видео)
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо большое, ваша поддержка вдохновляет на продолжение курса 🤗
@user-hc7wq9om9i
@user-hc7wq9om9i 7 месяцев назад
Спасибо большое) очень интересно, понятно и полезно!)
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо за ваш комментарий 🤗 надеюсь и другие видео курса будут вам полезны))
@user-tg2qt7em4t
@user-tg2qt7em4t 7 месяцев назад
Александр, и снова огромное спасибо за Ваш труд! Все как всегда - четко, понятно и по полочкам. И голос такой успокаивающий...🙂
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо 😊 ваша поддержка очень вдохновляет 🔥 надеюсь и другие видео канала будут вам полезны))
@andreyfedyukin8360
@andreyfedyukin8360 8 месяцев назад
Супер! 👍 Спасибо)) Как всегда, всё гениальное просто... Ну, почти просто, если знаешь своё дело! 😉
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо за отзыв🤗 ваша поддержка очень вдохновляет
@Karrit94
@Karrit94 7 месяцев назад
Очень нравится ваша легкая подача. Спасибо за урок!❤
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо за ваш комментарий, ваша поддержка очень мотивирует 🤗
@The-Way-of-Life.
@The-Way-of-Life. 18 дней назад
Лучший, спасибо за урок!
@nikitadanilovspb
@nikitadanilovspb 3 месяца назад
Классное видео, спасибо) Теперь это всё классно бы стилизовать и на проверку куратору! С первого раза сам бы точно не сделал, но с каждой практической работой получается втягиваться в JS, а самое главное получается влюбляться в этот язык! Трудно, но страшно интересно и то что было не понятно месяц назад - сейчас уже семечки))
@user-lg3jl7px7h
@user-lg3jl7px7h 7 месяцев назад
Александр, отличное видео, всё понятно, теперь пойду посмотрю про grid
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо большое🤗
@lemmesolo
@lemmesolo 7 месяцев назад
ты крут! посмотрел уже 3 видео про классы, так что лайк авансом!!!
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Ваша поддержка очень вдохновляет, спасибо за отзыв 😊
@marriott1538
@marriott1538 8 месяцев назад
Хорошая практика, спасибо
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо большое за ваш комментарий😊
@bekmun
@bekmun 6 месяцев назад
Классный урок. Хорошо объясняешь. Спасибо за подробное объяснение, ждём ещё много таких уроков.
@alex_dudukalo
@alex_dudukalo 6 месяцев назад
Безумно приятно читать такие отзывы☺ ваша поддержка очень мотивирует🤗 оставайтесь на канале
@pavelpatsenkov
@pavelpatsenkov 5 месяцев назад
Замечательный урок!
@alex_dudukalo
@alex_dudukalo 5 месяцев назад
Спасибо за ваш отзыв 🤗🔥
@alexbr696
@alexbr696 8 месяцев назад
круто
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Спасибо ☺
@user-wg9wz3gq8l
@user-wg9wz3gq8l 7 месяцев назад
Видео очень полезное! Помогло , потому что как это можно сделать, когда ты новичок, не понятно, и я такими лесами пошла)) очень усложнила все и сама запуталась. Единственное пугает, что вроде все понятно, но все равно пока что в голове манная каша с комочками XD при том что я во время видео ставила на паузы и чистила свой мусор или модифицировала) надеюсь со временем эта информация как то утрясется и можно будет самостоятельно справляться)) Спасибо большое! Самые понятные объяснения!
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны))
@yusheerodev
@yusheerodev 7 месяцев назад
Самое понятное видео на эту тему, для джунов просто сокровище. Также имеется вопрос : Какие есть способы добавить картинки вместо бэкграунда карточек? Еще раз спасибо
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Здравствуйте, большое спасибо за ваш комментарий :) Мне очень приятно. Вы можете сделать тег img добавить путь к изображению в атрибут src :)
@chibis8423
@chibis8423 7 месяцев назад
Спасибо за разбор создания игры! Ценю твой контент как студент курса :D Дай совет, пожалуйста. Если я буду шаг за шагом писать за тобой, разбираясь в каждых частях кода, не навредит ли такой подход? У меня пока не получается самостоятельно такие вещи писать. Банально, я за тобой пишу, некоторые части пытаюсь написать сам, но сталкиваюсь с затупами или непониманием где в каком месте что писать, хотя я все основы до этого прошел и отлично получалось. С большими логическими задачами пока не получается вот и хотел спросить, можно ли мне просто писать код повторяя его несколько раз, а затем уже, я думаю, можно повторить по памяти.
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Спасибо за твой комментарий и очень хороший вопрос. Если ты меня спросишь, является этот ролик шпаргалкой и решением работы, которую ты выполняешь, я отвечу - несомненно. Вопрос в другим, как с ней работать и как она может помочь? По опыту скажу, способ обучения, когда ты смотришь ролик и пишешь вместе с автором (например со мной), а потом по памяти делаете то же самое работает и это реально помогает. Посмотри видео один раз. Не делай это много раз. Иначе ты его просто заучите, лучше подсматривай в ролик или сделайте небольшой конспект. Так логические связи будут выстраиваться лучше. Поделюсь секретом, когда я впервые решал эту задачу, сам потратил много времени и к такому решению пришел не сразу. Первый мой код был огромный и с ошибками :) На видео я так легко все рассказываю, но это пришло не сразу :)
@chibis8423
@chibis8423 7 месяцев назад
@@alex_dudukalo спасибо! Как раз с логическим выстраиванием проблема, буду учиться! Мне в любом случае еще модернизировать код хочется, сделать стрелочные функции, добавить внешних декораций и стилей побольше.
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
@@chibis8423 Да, это будет отлично. Добавьте дополнительный функционал в игру. То, чего я не показывал :) Это будет хорошим тренажором.
@JuliaKulinich
@JuliaKulinich 5 месяцев назад
Александр, спасибо вам большое! У вас призвание объяснять сложные вещи просто и доступно!))) Учусь в skillbox. Как раз модуль с данным заданием. Посоветуйте, пожалуйста, какие поэт-проекты можно сделать на основании полученных знаний? Или, как вариант, переделывать проекты, которые изучаем а момент обучения под себя? Заранее спасибо за ответ.
@alex_dudukalo
@alex_dudukalo 5 месяцев назад
Здравствуйте, Юлия. Большое спасибо за такой приятный комментарий. Это очень приятно. Я бы подумал о создании небольшого сайта утилиты (одностраничник) Подумайте, с какими проблемами вы сталкиваетесь в жизни и попробуйте сделать мини веб приложение, которое может помочь решить эту проблему. Например, это может быть конвертер величин, какой-то калькулятор расчета. Возможно мини-игра. Я думаю, это должно быть то, что вам самой интересно и вы могли бы пользоваться сами или показать кому то :)
@user-tg5kb4mn9p
@user-tg5kb4mn9p 8 месяцев назад
Добрый день! Вроде есть такое видео, только через классы? Там все нормально работает.
@alex_dudukalo
@alex_dudukalo 8 месяцев назад
Да, совершенно верно. Для многих тема классов на раннем этапе изучения языка тяжело воспринимается. Я постарался решить эту проблему и записал видео с созданием игры без классов :)
@boruevboris2544
@boruevboris2544 3 месяца назад
а как моможно сделать чтобы при каждом выигрыше добавлялись по две кнопки, типа как в уровнях?
@alex_dudukalo
@alex_dudukalo 3 месяца назад
Здравствуйте, при завершении игры вы можете повторно вызвать функцию запуска игры, но увеличить значение кол-ва пар :) Это увеличит кол-во карточек и сложно самой игры.
@user-lf6fk1fm6r
@user-lf6fk1fm6r 6 месяцев назад
Уже при перемешивания от автора js не понятно не чего, пустая трата времени смотреть подобные ролики.
@XZxexe
@XZxexe 8 месяцев назад
Как же путает эта фигня =) let randomIndex = Math.floor(Math.random() * cardNumbersArray.length); let temp = cardNumbersArray[i]; cardNumbersArray[i] = cardNumbersArray[randomIndex]; cardNumbersArray[randomIndex] = temp; А вот как начинающему самому додуматься до этого. Как вы выстраиваете алгоритм? Или где можно почитать что бы лучше понимать такие вещи.
@marever13
@marever13 7 месяцев назад
Тасование Фишера - Йетса. Она только при просмотре пугает, если немного изучить, то страшного ничего нет)
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Мое самое первое решение этой задачи было совершенно другим. Громоздким, запутанным и в некоторых местах с ошибками. Я раза три переделывал, что бы добиться текущего решения :) У меня тоже не всегда сразу все получается :) Со стороны кажется, что у меня все так легко идет, а на самом деле это подготовка.
@alex_dudukalo
@alex_dudukalo 7 месяцев назад
Да, в целом два действия. Найти произвольное число. Далее меняем местами :)
@Dmitry_samboRulit
@Dmitry_samboRulit 7 месяцев назад
Здравствуйте. Однажды, чисто для решения одной проблемы - пришлось учить Python. Так в нем просто уже есть встроенная функция shuffle( ). А я тогда этого не знал и "изобрел " миксер вот точно таким же алгоритмом :) Сорян, если прихвастнул :-/ Хотя МИКСЕР можно написать внедрить в качестве функции по умолчанию через prototype . Но жить такое будет лишь в рамках текущего проекта:-)
@Xizo666
@Xizo666 Месяц назад
Для обмена значений двух переменных можно использовать деструктурирующее присваивание [cardNumberArray[i], cardNumberArray[randomIndex]] = [cardNumberArray[randomIndex], cardNumberArray[i]];
Далее
tattoo printer tutorial
00:34
Просмотров 8 млн
У психолога
01:00
Просмотров 541 тыс.
Игра в пары на Javascript. Часть 1
49:17
Разбираем основы Kafka и RabbitMQ
26:54
tattoo printer tutorial
00:34
Просмотров 8 млн