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

  Рет қаралды 6,977

Александр Дудукало

Александр Дудукало

Күн бұрын

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

Пікірлер: 66
@user-fd1um8ku9v
@user-fd1um8ku9v Ай бұрын
Александр, спасибо большое за урок, всё понятно, всё разложили по полочкам, ваш труд не оценим вы помогаете новичкам как я понять и усвоить JavaScript.Дай Бог вам здоровья.Развиваете ваш канал он очень нужен нам.Спасибо большое.
@marever13
@marever13 8 ай бұрын
Мне безумно нравится, когда Александр предлагает какое-то решение или лишь думает в нужном направлении (подталкивает), а потом предлагает подумать самому и найти решение - прям обожаю такой подход.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо )) Да-да. Иного хочется предложить решить что-то самому. Это очень полезно, особенно в случае, когда зритель пишет код вместе со мной :)
@alena_75
@alena_75 7 ай бұрын
Александр, спасибо огромное! Это лучшее объяснение - всё очень просто и доступно. После Ваших видео хочется продолжать обучение. Желаю Вам творческих успехов! Творите ещё, у Вас отлично получаются обучающие ролики. Смотрю всё на вашем канале
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Безумно приятно читать такие комментарии ☺ ваша поддержка очень вдохновляет!)) спасибо! 😊
@ilya6710
@ilya6710 4 ай бұрын
Это моя находка что я вас нашел на ютуб, в данный момент прохожу обучение в Skillbox, не всегда все понятно преподносят, но потом просматриваю вас и все становится понятно. Спасибо вам
@development76
@development76 2 ай бұрын
Та же история
@user-bp9yn7br6p
@user-bp9yn7br6p 8 ай бұрын
Александр, большая благодарочка!!! Даже до меня дошло. Большое спасибо за Ваш труд. Это для нас, начинающих так важно и необходимо, что низкий Вам поклон. Вы учите думать как программист. Как работать с самым главным для программиста, логикой. Только посмотрев Ваше видео, что то начало у меня конкретно получаться. Еще раз, огромное спасибо!!!
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Безумно приятно читать такую обратную связь ☺ рад, что благодаря моим видео вы развиваетесь в этой сфере 🔥 спасибо!))
@user-qn4yk5sd7s
@user-qn4yk5sd7s 8 ай бұрын
Когда смотрел первое видео с классами, очень путался и много чего не понял. Сейчас намного проще и понятнее. Одно из любимых моих заданий на курсе) Спасибо!!!
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за ваш комментарий😊 надеюсь и другие видео курса вам понравятся
@user-jv1kz4xi2c
@user-jv1kz4xi2c 3 ай бұрын
Александр, лучший!)
@user-tt4lu1vk9g
@user-tt4lu1vk9g Ай бұрын
Все очень доступно и понятно! Спасибо!
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 8 ай бұрын
Не надо ускорять видео, очень интересно же и даже баг разобрали👍
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Да, но ролик достаточно долгий вышел :) Спасибо вам за комментарий :)
@user-bb9es5tl9e
@user-bb9es5tl9e 4 ай бұрын
Очень интересно, понятно чётко сформулирован действия коды легче понимать
@user-eu9pg1wq3c
@user-eu9pg1wq3c 8 ай бұрын
Спасибо за такое видео, приятно слышать, то как вы объясняете каждый свой шаг. Ждем новые видео)
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо большое, ваша поддержка вдохновляет на продолжение курса 🤗
@user-qx3mw6fz7h
@user-qx3mw6fz7h Ай бұрын
как всегда превосходное обьяснение ❤
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 3 ай бұрын
Спасибо Александр, это видео мне очень помогло!
@user-by3gw2qh6g
@user-by3gw2qh6g 8 ай бұрын
час пролетел незаметно! Большое спасибо за Ваш труд. Ну а я пойду пробовать по памяти повторить эту игру😅❤
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за комментарий😊 надеюсь у вас все получилось 🔥
@Karrit94
@Karrit94 7 ай бұрын
Очень нравится ваша легкая подача. Спасибо за урок!❤
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Спасибо за ваш комментарий, ваша поддержка очень мотивирует 🤗
@user-hc7wq9om9i
@user-hc7wq9om9i 8 ай бұрын
Спасибо большое) очень интересно, понятно и полезно!)
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за ваш комментарий 🤗 надеюсь и другие видео курса будут вам полезны))
@The-Way-of-Life.
@The-Way-of-Life. Ай бұрын
Лучший, спасибо за урок!
@andreyfedyukin8360
@andreyfedyukin8360 8 ай бұрын
Супер! 👍 Спасибо)) Как всегда, всё гениальное просто... Ну, почти просто, если знаешь своё дело! 😉
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за отзыв🤗 ваша поддержка очень вдохновляет
@user-tg2qt7em4t
@user-tg2qt7em4t 8 ай бұрын
Александр, и снова огромное спасибо за Ваш труд! Все как всегда - четко, понятно и по полочкам. И голос такой успокаивающий...🙂
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо 😊 ваша поддержка очень вдохновляет 🔥 надеюсь и другие видео канала будут вам полезны))
@nikitadanilovspb
@nikitadanilovspb 4 ай бұрын
Классное видео, спасибо) Теперь это всё классно бы стилизовать и на проверку куратору! С первого раза сам бы точно не сделал, но с каждой практической работой получается втягиваться в JS, а самое главное получается влюбляться в этот язык! Трудно, но страшно интересно и то что было не понятно месяц назад - сейчас уже семечки))
@user-lg3jl7px7h
@user-lg3jl7px7h 8 ай бұрын
Александр, отличное видео, всё понятно, теперь пойду посмотрю про grid
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо большое🤗
@bekmun
@bekmun 7 ай бұрын
Классный урок. Хорошо объясняешь. Спасибо за подробное объяснение, ждём ещё много таких уроков.
@alex_dudukalo
@alex_dudukalo 7 ай бұрын
Безумно приятно читать такие отзывы☺ ваша поддержка очень мотивирует🤗 оставайтесь на канале
@lemmesolo
@lemmesolo 8 ай бұрын
ты крут! посмотрел уже 3 видео про классы, так что лайк авансом!!!
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Ваша поддержка очень вдохновляет, спасибо за отзыв 😊
@pavelpatsenkov
@pavelpatsenkov 6 ай бұрын
Замечательный урок!
@alex_dudukalo
@alex_dudukalo 6 ай бұрын
Спасибо за ваш отзыв 🤗🔥
@marriott1538
@marriott1538 8 ай бұрын
Хорошая практика, спасибо
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо большое за ваш комментарий😊
@user-wg9wz3gq8l
@user-wg9wz3gq8l 8 ай бұрын
Видео очень полезное! Помогло , потому что как это можно сделать, когда ты новичок, не понятно, и я такими лесами пошла)) очень усложнила все и сама запуталась. Единственное пугает, что вроде все понятно, но все равно пока что в голове манная каша с комочками XD при том что я во время видео ставила на паузы и чистила свой мусор или модифицировала) надеюсь со временем эта информация как то утрясется и можно будет самостоятельно справляться)) Спасибо большое! Самые понятные объяснения!
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны))
@JuliaKulinich
@JuliaKulinich 6 ай бұрын
Александр, спасибо вам большое! У вас призвание объяснять сложные вещи просто и доступно!))) Учусь в skillbox. Как раз модуль с данным заданием. Посоветуйте, пожалуйста, какие поэт-проекты можно сделать на основании полученных знаний? Или, как вариант, переделывать проекты, которые изучаем а момент обучения под себя? Заранее спасибо за ответ.
@alex_dudukalo
@alex_dudukalo 6 ай бұрын
Здравствуйте, Юлия. Большое спасибо за такой приятный комментарий. Это очень приятно. Я бы подумал о создании небольшого сайта утилиты (одностраничник) Подумайте, с какими проблемами вы сталкиваетесь в жизни и попробуйте сделать мини веб приложение, которое может помочь решить эту проблему. Например, это может быть конвертер величин, какой-то калькулятор расчета. Возможно мини-игра. Я думаю, это должно быть то, что вам самой интересно и вы могли бы пользоваться сами или показать кому то :)
@chibis8423
@chibis8423 8 ай бұрын
Спасибо за разбор создания игры! Ценю твой контент как студент курса :D Дай совет, пожалуйста. Если я буду шаг за шагом писать за тобой, разбираясь в каждых частях кода, не навредит ли такой подход? У меня пока не получается самостоятельно такие вещи писать. Банально, я за тобой пишу, некоторые части пытаюсь написать сам, но сталкиваюсь с затупами или непониманием где в каком месте что писать, хотя я все основы до этого прошел и отлично получалось. С большими логическими задачами пока не получается вот и хотел спросить, можно ли мне просто писать код повторяя его несколько раз, а затем уже, я думаю, можно повторить по памяти.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо за твой комментарий и очень хороший вопрос. Если ты меня спросишь, является этот ролик шпаргалкой и решением работы, которую ты выполняешь, я отвечу - несомненно. Вопрос в другим, как с ней работать и как она может помочь? По опыту скажу, способ обучения, когда ты смотришь ролик и пишешь вместе с автором (например со мной), а потом по памяти делаете то же самое работает и это реально помогает. Посмотри видео один раз. Не делай это много раз. Иначе ты его просто заучите, лучше подсматривай в ролик или сделайте небольшой конспект. Так логические связи будут выстраиваться лучше. Поделюсь секретом, когда я впервые решал эту задачу, сам потратил много времени и к такому решению пришел не сразу. Первый мой код был огромный и с ошибками :) На видео я так легко все рассказываю, но это пришло не сразу :)
@chibis8423
@chibis8423 8 ай бұрын
@@alex_dudukalo спасибо! Как раз с логическим выстраиванием проблема, буду учиться! Мне в любом случае еще модернизировать код хочется, сделать стрелочные функции, добавить внешних декораций и стилей побольше.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
@@chibis8423 Да, это будет отлично. Добавьте дополнительный функционал в игру. То, чего я не показывал :) Это будет хорошим тренажором.
@yusheerodev
@yusheerodev 8 ай бұрын
Самое понятное видео на эту тему, для джунов просто сокровище. Также имеется вопрос : Какие есть способы добавить картинки вместо бэкграунда карточек? Еще раз спасибо
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Здравствуйте, большое спасибо за ваш комментарий :) Мне очень приятно. Вы можете сделать тег img добавить путь к изображению в атрибут src :)
@alexbr696
@alexbr696 8 ай бұрын
круто
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Спасибо ☺
@user-tg5kb4mn9p
@user-tg5kb4mn9p 8 ай бұрын
Добрый день! Вроде есть такое видео, только через классы? Там все нормально работает.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Да, совершенно верно. Для многих тема классов на раннем этапе изучения языка тяжело воспринимается. Я постарался решить эту проблему и записал видео с созданием игры без классов :)
@boruevboris2544
@boruevboris2544 4 ай бұрын
а как моможно сделать чтобы при каждом выигрыше добавлялись по две кнопки, типа как в уровнях?
@alex_dudukalo
@alex_dudukalo 4 ай бұрын
Здравствуйте, при завершении игры вы можете повторно вызвать функцию запуска игры, но увеличить значение кол-ва пар :) Это увеличит кол-во карточек и сложно самой игры.
@user-gq6hj1ju4h
@user-gq6hj1ju4h 9 күн бұрын
Зг
@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 8 ай бұрын
Тасование Фишера - Йетса. Она только при просмотре пугает, если немного изучить, то страшного ничего нет)
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Мое самое первое решение этой задачи было совершенно другим. Громоздким, запутанным и в некоторых местах с ошибками. Я раза три переделывал, что бы добиться текущего решения :) У меня тоже не всегда сразу все получается :) Со стороны кажется, что у меня все так легко идет, а на самом деле это подготовка.
@alex_dudukalo
@alex_dudukalo 8 ай бұрын
Да, в целом два действия. Найти произвольное число. Далее меняем местами :)
@Dmitry_samboRulit
@Dmitry_samboRulit 8 ай бұрын
Здравствуйте. Однажды, чисто для решения одной проблемы - пришлось учить Python. Так в нем просто уже есть встроенная функция shuffle( ). А я тогда этого не знал и "изобрел " миксер вот точно таким же алгоритмом :) Сорян, если прихвастнул :-/ Хотя МИКСЕР можно написать внедрить в качестве функции по умолчанию через prototype . Но жить такое будет лишь в рамках текущего проекта:-)
@Xizo666
@Xizo666 Ай бұрын
Для обмена значений двух переменных можно использовать деструктурирующее присваивание [cardNumberArray[i], cardNumberArray[randomIndex]] = [cardNumberArray[randomIndex], cardNumberArray[i]];
JavaScript v. 2.0 Работаем с формами
27:07
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 92 М.
БЭМ - простыми словами. Часть 1
44:15
Александр Дудукало
Рет қаралды 13 М.
I Need Your Help..
00:33
Stokes Twins
Рет қаралды 145 МЛН
NO NO NO YES! (50 MLN SUBSCRIBERS CHALLENGE!) #shorts
00:26
PANDA BOI
Рет қаралды 102 МЛН
Игра Змейка на чистом JavaScript и HTML5 за 45 минут!
44:02
Псевдоэлементы CSS ::after и ::before. Объяснение на примерах
34:29
Александр Дудукало
Рет қаралды 4,5 М.
Side-Scrolling Games (JavaScript tutorial)
1:57:51
Franks laboratory
Рет қаралды 13 М.
JSON формат и localStorage в Javascript - разбор
41:37
Александр Дудукало
Рет қаралды 9 М.
Объяснение Вёрстки Простого Сайта HTML+CSS
53:56
Сергей Дмитриевский
Рет қаралды 152 М.