Судоку на JavaScript разработка игры

Создаем игру Судоку на JavaScript с автоматической генерацией поля, подсветкой строк и столбцов, анимацией, адаптацией игры под мобильные устройства и возможностью ввода с клавиатуры. В этом уроке мы сделаем не только классическую головоломку Судоку, но и добавим множество интересных функций, которые сделают игру еще более увлекательной.
Ссылка на игру
yurakoch.ru/sudoku
Ссылка на код
github.com/YuraKoch/sudoku
Мой телеграмм канал
t.me/kochinism
Использую хостинг
sprinthost.ru/s40938
Поддержать меня и мой канал вы можете по ссылке ниже
Юмани - yoomoney.ru/to/4100118604365846
00:00 План урока
00:49 Пустые файлы index и script
01:37 Пустая сетка Судоку
04:34 Заполнение сетки Судоку
10:38 Валидация сетки Судоку
14:43 Очищение случайных ячеек
16:39 Создание класса Sudoku
19:56 Верстка сетки Судоку
24:48 Инициализация ячеек
28:14 Подсвечивание выбранной ячейки
29:45 Подсвечивание соседних ячеек
33:28 Подсвечивание одинаковых ячеек
34:20 Инициализация кнопок с номерами
36:28 Анимация ошибок
39:34 Анимация добавления числа
41:24 Инициализация кнопки удаления
42:53 Инициализация кнопок клавиатуры
44:02 Победная анимация
45:52 Мобильная адаптация
46:48 Заключительная игра

[@ridiculousdwarf]

Очень приятно учиться по твоим видео. Надеюсь, что подобные игрушки на 50 минут еще будут выходить. Ну или другие практические проекты

[@yurakoch]

В планах еще несколько игр на чистом JS. А после буду пробовать делать игры с помощью игровых библиотек на JS.

[@ruslanundefined2242]

@@yurakoch Вы очень редкий блогер, который выкладывает действительно качественный контент, спасибо за ролики, очень интересна логика, которую вы пишете в своих проектах!

[@user-bm5ge3mr9u]

Как всегда, было очень интересно и очень познавательно! Спасибо!

[@yurakoch]

Спасибо) К 1 июня должен успеть доделать еще один ролик

[@SK-yp2bx]

Очень редко пишу комменты, но в этот раз хочу сердечно поблагодарить тебя за такой классный контент и твои старания. Все твои видосы посмотрел, повторяю и учусь) Ждал этот ролик и буду ждать следующий Продолжай, не бросай. У тебя очень классно получается объяснять сложные вещи простыми словами И на последок, хотелось бы почаще от тебя видосы видеть😃 Успехов тебе и всех благ

[@yurakoch]

Спасибо) Рад, что ролики помогают в обучении. Почаще делать ролики пока не получается, т к совмещаю с основной работой.

[@user-fy8fx3kw8v]

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

[@yurakoch]

Рад, что ролики полезные)

[@Faradenza-sb3mj]

Здравствуйте, спасибо вам за этот видеоролик, давайте след видеоролик про шахматы.

[@yurakoch]

Спасибо Можно про шахматы, но надо будет найти Api, чтобы играть с компьютером. Иначе получится сделать шахматы только такие, где за обе стороны человек должен играть.

[@ev.genius9618]

Никогда не пишу комментарии, но здесь захотелось :) Я учу программирование пока только месяца 3 и дается это очень тяжело. Все что я пока могу это сделать 1страничный сайт, попапы и сохранение текста из инпутов Глядя на код твоих игр у меня взрывается голова, потому что сама логика построения выглядит хоть и понятной, но кажется невозможной для того, чтобы самому с нуля такое написать Я со временем хочу начать тоже делать игры и твой канал невероятно меня промотивировал сейчас и позволил визуализировать то, что можно сделать, приложив усилия к учебе Для меня сейчас это невероятно просто. Я искренне желаю твоему каналу скорейшего развития и монетизации! Пожалуйста, не бросай это дело и снимай новые видео по созданию игр!

[@yurakoch]

Спасибо) Я в свое время ничего интереснее todo-list и змейки не находил, поэтому сейчас решил делать уроки по играм)

[@ev.genius9618]

@@yurakoch я думаю это то, чего как раз не хватает ру ютубу) делать игры и программировать много кому интересно и если по unity и c# уроков миллион, то вот такие необычные на JS это золото)

[@effJkeee]

@@yurakoch очень хорошее решение, ибо действительно подобного контента не найти, а сложной практики (даже просто подсмотреть) не хватает. после просмотра такого видео прям хочется покопаться что и как работает и почему, а во время просмотра не было момента когда я закатывал глаза с мыслями "опять основы и духота, я это уже видел в уроках"

[@user-lo9pu9vd8p]

Ого, построчные комментарии... Очень помогает. Большое спасибо за достойную подачу материала. Лайк, подписка, колокольчик.

[@yurakoch]

Спасибо)

[@tynoheaekbat2328]

Отличное, крайне интересное видео! Используешь ли ты какие-то языки кроме JS? TS, например? Надеюсь, что и дальше видео будут если не сложнее и интереснее, то не менее классные, удачи в развитии :)

[@yurakoch]

Спасибо) На работе в основном TS использую, иногда приходится на C++ писать, но TS мне больше нравится. Ролики делаю на JS, т к так проще, не нужна сборка, а TS - это тот же JS только с типами.

[@tynoheaekbat2328]

@@yurakoch js проще только на моменте отсутствия сборки, но в тех проектах, которые ты показываешь в роликах, достаточно, по сути, tsc выполнить, без прочих сборок. Зато на TS вполне можно использовать и типизацию и парадигмы ООП, которые новичкам зачастую непонятны, в отрыве от кода, зато на конкретных примерах всё встаёт на свои места. Да и проблем с отловом ошибок уже в рантайме будет меньше. В любом случае, я очень рад, что наткнулся на этот канал когда-то и мне интересно смотреть:)

[@yurakoch]

Подумаю над этим. Мне еще казалось, что с TS ролики будут занимать больше времени. И начинающим будет потяжелее разобраться сразу в TS.

[@user-bm5ge3mr9u]

@@yurakoch Ага, сначала вводный курс по ТS нужно записать, а уж потом ролики))

[@yurakoch]

@@user-bm5ge3mr9u но пока не хочу делать обычные видео уроки, интереснее делать игры)

[@masterevgeni]

очень очень круто

[@yurakoch]

Спасибо)

[@hiroshialex4476]

привет, можешь посоветовать канал или книги какие по JS хочется освоить новую профессию но в интернете море инфы и не понятно куда смотреть)

[@yurakoch]

Я писал пост у себя в телеграмме t.me/kochinism/181 Я сам по этому пути шел

[@alexblr]

Спасибо за уроки! У меня вопрос, а не хотел бы ты добавить в свои игры интерактива типа таблицы рекордов, мультиплеер и т.п.? Например, есть Firebase - базы данных в реальном времени. Пощупать можно бесплатно, так как около десяти бд выдаются бесплатно.

[@yurakoch]

Это можно сделать, но тогда уроки будут занимать больше одного часа. Мне кажется, что это уже слишком долго.

[@dd4el12]

Думаю посмотрев все ваши видео можно создать свою игру, например Марио

[@yurakoch]

Про Марио планирую сделать видеоурок попозже)

[@DamirNurgaleev2008]

Привет, классно программируешь. Какие ещё знаешь языки программирования? Сколько тебе лет?

[@yurakoch]

В университете много учил. За время работы помимо JS/TS использовал Python и C++. Думаю, что много языков учить не нужно, лучше сконцентрироваться на одном и знать его очень хорошо.

[@yurakoch]

Возраст, вроде в Линкедине указан)

[@dmitriij5685]

Интересный контент👍 Коммент для продвижения

[@yurakoch]

Спасибо)

[@tymino]

.cell*81 (tab) - для vscode, если не хочется копировать)

[@yurakoch]

Спасибо) я не знал

[@desgunty7419]

Как ускорить нудный процесс создания большого количества тегов в VS code: .cell*81 // 81 дивов с классом cell .number*9{$} // 9 дивов с классом number заполненных цифрами от 1 до 9 (по порядку)

[@yurakoch]

Спасибо) это полезно

[@user-kg6fz5tz2b]

Спасибо! Мне кажется, или у Вас какие-то видосы с канала пропали?)

[@yurakoch]

Вроде, все четыре ролика на месте)

[@user-kg6fz5tz2b]

@@yurakoch Понял) Спасибо! Очень интересный контент! Буду смотреть обязательно!!! Колокол поставил!

[@yurakoch]

@@user-kg6fz5tz2b спасибо)

[@user-nw2xb5ii8r]

можно использовать .cell*27, чтобы не копировать и вставлять классы

[@yurakoch]

Спасибо)

[@500_Podpischikov_Bez_Video]

Юра, привет. Жду твоё новое видео Надеюсь скоро зальёшь контентище:)

[@yurakoch]

Я чет обленился Но потихоньку делаю новый ролик)

[@yariqgunes4702]

А есть ли гарантия, что решение будет? Что если оно будет, то оно будет единственным?

[@yurakoch]

Решение будет всегда, но решение не всегда будет единственным.

[@yariqgunes4702]

@@yurakoch я сам написал фронт на реакте, а бэк - на python - так вот там у меня гарантия того, что решение будет единственное практически железобетонная. Пока только 2 уровня сложности, но я очень надеюсь, что доведу их до 5

[@yurakoch]

@@yariqgunes4702 когда заполнено изначально мало клеточек, например только одна, то решений будет несколько.

[@DamirNurgaleev2008]

Я сейчас изучаю HTML. Нужно ли учить все теги?

[@yurakoch]

Самые используемый - это div. Даже есть термин, divная верстка. Стоит прочитать про все, чтобы ознакомиться, но учить не стоит.

[@DamirNurgaleev2008]

@@yurakoch спасибо

[@igoskt2289]

Давай следующее видео про пинг-понг с режимом игры против компьютера

[@yurakoch]

Вроде, про пинг-понг уже много роликов на ютубе. Но я перепроверю, если их нет, то сделаю

[@igoskt2289]

@@yurakoch толковых почти нет,особенно с одиночным режимом игры

[@yurakoch]

Тогда можно сделать. Только это будет не следующий ролик, для следующего придумал другую игру)

[@user-bm5ge3mr9u]

@@yurakoch интересно было бы сделать игру танки как на денди..

[@yurakoch]

@@user-bm5ge3mr9u про танки есть многочасовой урок на ютубе. Если получится уместить танки в 1-2 часа видео, то сделаю.

[@alexver31]

Ты давай игру ГТА 2 допили и поставь её на Яндекс.Игры хотя бы. Или чтоб можно было на ПК сыграть.

[@yurakoch]

Почитаю про Яндекс Игры Так то хорошая идея)

[@500_Podpischikov_Bez_Video]

Привет, повторял всё за тобой, закончил всё работает, но заметил что в консоли появилась ошибка "live reload enabled" Через несколько минут на странице ничего не нажимается, даже на правую кнопку мыши не реагирует Я проверил в других моих проектах такой ошибки нет, и в проектах которые я делал по твоим прошлым видосам тоже всё хорошо Вот только в судоку такая вот ошибка Подскажи, может знаешь из-за чего это может быть и как исправить Я вроде бы ничего не упустил, всё за тобой повторял, уже даже несколько раз по частям комментил код чтобы найти из за какой строчки кода это вылазит, но всё без толку Ошибок и предупреждений в vs code нету, только вот одна надпись в консоли гугл хром и больше ничего Первый раз с таким сталкиваюсь

[@yurakoch]

Я с таким не сталкивался... Гугл пишет, что это просто сообщение от Live Server о том, что он обновит страницу, как только вы сохраните изменения в файле вашего проекта. Возможно нужно сохранить изменения в проекте и попробовать обновить страницу. Возможно стоит закрыть страницу и заново открыть ее через Live Server.

[@500_Podpischikov_Bez_Video]

Очень редко пишу комменты, но в этот раз хочу сердечно поблагодарить тебя за такой классный контент и твои старания. Все твои видосы посмотрел, повторяю и учусь) Ждал этот ролик и буду ждать следующий Продолжай, не бросай. У тебя очень классно получается объяснять сложные вещи простыми словами И на последок, хотелось бы почаще от тебя видосы видеть😃 Успехов тебе и всех благ

[@yurakoch]

Спасибо) Почаще не получается, т к хожу на работу. Но планирую дальше делать один ролик в 3 недели, а не раз в месяц)