Тетрис на JavaScript с пошаговым объяснением

В этом видео мы вместе создадим игру Тетрис на JavaScript. Я буду объяснять каждый шаг подробно и простым языком. Мы начнем с создания игрового поля, научимся добавлять фигуры, управлять ими, добавим проверку на заполненные линии. Но это еще не все! Мы также сделаем адаптацию игры под мобильные телефоны и добавим возможность играть с помощью тачскрина. Этот урок будет интересен как новичкам, так и опытным программистам, которые хотят научиться создавать игры.
Ссылка на игру
yurakoch.ru/tetris
Ссылка на код
github.com/YuraKoch/tetris
Мой телеграмм канал
t.me/kochinism
Использую хостинг
sprinthost.ru/s40938
Поддержать меня и мой канал вы можете по ссылке ниже
Юмани - yoomoney.ru/to/4100118604365846
00:00 План урока
01:07 index и стили
04:04 script и игровое поле
06:34 Первая фигурка
13:07 Смещение фигурки
19:04 Размещение фигуры на поле
22:29 Удаление линии
24:46 Анимация фигурки
26:54 Окончание игры
28:27 Призрачная фигурка
31:38 Падение фигурки
32:52 Управление жестами
38:38 Финальная анимация
42:56 Лайк и подписка

[@UC1C0GDMTjasAdhELHZ6lZNg]

Помню когда решал задачки на кодворс бесили задачи на разворот матриц и другие операции с ними, думал где это пригодится, а тут вот практический пример. За счёт этой практики решения задач понятно и доступно всё было в ролике. Круто, что можно подчерпнуть для себя логику создания игр.

[@yurakoch]

У меня это тоже первый случай после универа, когда понадобилось поворачивать матрицы)

[@user-et8ig8hl7k]

Все четко и по делу, спасибо! Из пожеланий: - добавить счет очков - добавить предпросмотр фигуры, которая следующей появится на поле

[@yurakoch]

Спасибо) Я хотел это сделать Но подумал, что ролик совсем длинный будет Так что можно самостоятельно доделать игру)

[@ev.genius9618]

как всегда шикарно, спасибо за контент!

[@yurakoch]

Спасибо)

[@georgeluckyfox7238]

Балдёж, огромнейшее спасибо за твой труд

[@yurakoch]

Спасибо) Рад, что ролик понравился

[@kirillmitskevich8851]

пишу JS уже много лет, но это очень хороший контент! спасибо за старания и время )

[@yurakoch]

Спасибо) Рад, что ролик понравился

[@adventure229]

Cool good job

[@zvd1660]

Поставил лайк, ибо круто, брат.

[@yurakoch]

Спасибо)

[@user-fw9hc5lg9f]

Дождались! :)

[@yurakoch]

весь апрель я ленился, но в мае взял себя в руки 😅

[@seidkhan]

Oh man, I have been waiting for this video! Sorry my russian is not that good but I understand it. Thanks a lot for the video!

[@yurakoch]

Thanks) Maybe later i will make english audio track for some videos

[@WEBSTART-LIVE]

сделай update с ресайзом на canvas на дивах как-то дико смотрится) Добавь ооп, локальные сохранения и пару уровней - будет топ контент

[@yurakoch]

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

[@xxktulxa7182]

Пишу этот урок, все круто! Я так понял, если ты с нуля можешь написать такой код...то ты как минимум уверенный джун 😀

[@yurakoch]

Если все в уроке понятно, то это почти мидл)

[@xxktulxa7182]

@@yurakoch понял)) мне мало чего понятно, недавно начал изучение js, но очень интересно))

[@yurakoch]

Пробуйте, практикуйтесь и все получится)

[@user-ht9pe2vj5k]

Извините, а могли бы вы подсказать как можно увеличить скорость игры

[@yurakoch]

requestAnimationFrame(moveDown), 700) вот тут вам надо 700 поменять на более маленькое число чем меньше число, тем меньше задержка между перемещениями фигурки вниз

[@user-ht9pe2vj5k]

Я только изучил две чати лерн js и мне сказали сделать игру тетрис и мне сейчас очень сложно(чувствую себя отсалым) , это нормально?

[@yurakoch]

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

[@nonenone2743]

Сразу лайк! Но где же ГТА? :))

[@yurakoch]

ГТА 6 еще в разработке)))

[@nonenone2743]

@@yurakoch :'(

[@zvd1660]

@@yurakoch Нафиг гта, ждем ХФ3!

[@yurakoch]

Что это?

[@artemgromov578]

блин а сложно понимать логику такую, это ноормально? я не тупой? я только js выучил вроде но заметно как я плаваю..

[@yurakoch]

С первого раза точно будет непонятно Придется останавливать ролик Иногда придется читать описание стандартных методов Например момент с поворотом матрицы на 90 градусов совсем не очевидный Я в ролике постарался объяснить основную идею создания игры без сильных подробностей Так что советую повторить за мной Постараться самостоятельно разобраться в непонятных моментах А если что-то будет совсем непонятно, то напишите вопрос в комментариях Я подскажу

[@user-fw9hc5lg9f]

Вводи донэйшен) Кто захочет, тот отблагодарит монетой, сколько пожелает

[@yurakoch]

Я добавил ссылку на киви кошелек в описании ко всем видео) Пока только жена 10 руб закинула)))

[@alexidino]

Пытаюсь смотреть, но монотонный голос не позволяет.

[@yurakoch]

Я пытался оживить голос, но всегда получается так

[@alexidino]

@@yurakoch Я не сдаюсь)

[@yurakoch]

Я смотрю уроки по голосу, может смогу сделать его лучше)

[@alexidino]

@@yurakoch по моему мнению слишком быстро и не заостряется внимание на определенных моментах, обучающимся это бы помогло.

[@yurakoch]

А можете написать на примере тетриса, на чем было бы хорошо заострить внимание?

[@v.demchenko]

Я так понимаю все просто посмотрели видео не вникая что говорит сам автор. Допуская ошибки. 😖16:00 Для посмотреть видео ок. Для того что бы повторить приходится перематывать, жать на паузу, уменьшать скорость. Хз, и дизлайк не хочется ставить и писать код трудно. Ну и обьяснений хотелось бы побольше, если честно. А то код написали а зачем его написали, что он делает хз.

[@yurakoch]

Идея и была в том, чтобы ставить на паузу, иначе ролик растянулся бы на несколько часов.

[@v.demchenko]

@@yurakoch я понимаю. Но я лучше послушаю поток твоих мыслей, как ты думаешь. Чем буду просто повторять. Я смотрю видео по 11 часов и мне намного лучше чем смотреть такое на 40 минут но в итоге я буду нервничать. Посмотри как видео по 10 часов набирают по 300К просмотров. Толку мне перематывать если и так ничего не понятно сразу и прихолится на листочке сейчас сидеть в выписывать эту матрицу и понимать что там происходит.

[@yurakoch]

Подумаю над этим, чтобы следующие ролики были более понятными. Спасибо

[@v.demchenko]

@@yurakoch и тебе спасибо за адекватную реакцию и видео. Много интересного.

[@user-bo6qy8jm1q]

@@v.demchenko как раз мне нравится, что самой приходится догадываться, ставить на паузу, а не всё на блюдечке. Мозг учится думать. А когда 11 часов всё разжёвывают тебе, сам думать не научишься. Учишься сам находить инфу, если какой-то кусок кода не понятен, узнаёшь много нового попутно, причём вещи, про которые почему-то редко пишут и используют Спасибо автору огромное! Разобрав пару уроков, потратив на них несколько дней, мир просто перевернулся