Тетрис на JavaScript с пошаговым объяснением
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- В этом видео мы вместе создадим игру Тетрис на 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 Лайк и подписка
Помню когда решал задачки на кодворс бесили задачи на разворот матриц и другие операции с ними, думал где это пригодится, а тут вот практический пример. За счёт этой практики решения задач понятно и доступно всё было в ролике. Круто, что можно подчерпнуть для себя логику создания игр.
У меня это тоже первый случай после универа, когда понадобилось поворачивать матрицы)
Все четко и по делу, спасибо!
Из пожеланий:
- добавить счет очков
- добавить предпросмотр фигуры, которая следующей появится на поле
Спасибо)
Я хотел это сделать
Но подумал, что ролик совсем длинный будет
Так что можно самостоятельно доделать игру)
как всегда шикарно, спасибо за контент!
Спасибо)
Балдёж, огромнейшее спасибо за твой труд
Спасибо)
Рад, что ролик понравился
пишу JS уже много лет, но это очень хороший контент! спасибо за старания и время )
Спасибо)
Рад, что ролик понравился
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!
Thanks)
Maybe later i will make english audio track for some videos
Cool good job
Поставил лайк, ибо круто, брат.
Спасибо)
Дождались! :)
весь апрель я ленился, но в мае взял себя в руки 😅
сделай update с ресайзом на canvas
на дивах как-то дико смотрится)
Добавь ооп, локальные сохранения и пару уровней - будет топ контент
Предложение интересное, но кажется, что такой ролик будет слишком долгим. Я стараюсь уложиться в час, чтобы люди готовы были попробовать повторить)
@@404Negative уже сделал давно)
Пишу этот урок, все круто! Я так понял, если ты с нуля можешь написать такой код...то ты как минимум уверенный джун 😀
Если все в уроке понятно, то это почти мидл)
@@yurakoch понял)) мне мало чего понятно, недавно начал изучение js, но очень интересно))
Пробуйте, практикуйтесь и все получится)
Вроде бы не нашёл какого-то иного решения с setInterval, по этому предложу описание своего:
Создаём интервал, который будет работать до нажатия клавиши игроком, в ином случае перезапускаем интервал, получится что-то вроде:
function initGame(){
let intervalID = setInterval(moveDown, tetris.speed);
}
function moveDown(isAutoMove){
tetris.moveDown();
if(!isAutoMove){
clearInterval(ID);
setTimeout(() => { intervalID = setInterval(moveDown, tetris.speed), tetris.speed};
}
}
Немного грубовато написано, но суть должны уловить
А для чего это? Я уже подзабыл свой код…
@@yurakoch У вас каждое движение в низ перезапускало анимацию, путём stopLoop(); startLoop(); для того что бы при нажатии кнопки игроком, фигурка не падала по истечению времени. Я предложил свой вариант, где анимация проигрывается в интервале, и перезапускается только когда игрок нажимает на кнопку
Я только изучил две чати лерн js и мне сказали сделать игру тетрис и мне сейчас очень сложно(чувствую себя отсалым) , это нормально?
Тетрис - довольно сложная игра, поэтому точно будет тяжело. Попробуйте останавливаться на непонятных моментах и искать ответы в гугл или на сайте лерн js. Не факт, что с первого раза во всем получится разобраться, но прогресс будет. А дальше пробуйте делать другие приложения на js. Спустя несколько проектов во всем разберетесь и тетрис покажется очень простым.
Сразу лайк! Но где же ГТА? :))
ГТА 6 еще в разработке)))
@@yurakoch :'(
@@yurakoch Нафиг гта, ждем ХФ3!
Что это?
Извините, а могли бы вы подсказать как можно увеличить скорость игры
requestAnimationFrame(moveDown), 700)
вот тут вам надо 700 поменять на более маленькое число
чем меньше число, тем меньше задержка между перемещениями фигурки вниз
Вводи донэйшен) Кто захочет, тот отблагодарит монетой, сколько пожелает
Я добавил ссылку на киви кошелек в описании ко всем видео)
Пока только жена 10 руб закинула)))
блин а сложно понимать логику такую, это ноормально? я не тупой? я только js выучил вроде но заметно как я плаваю..
С первого раза точно будет непонятно
Придется останавливать ролик
Иногда придется читать описание стандартных методов
Например момент с поворотом матрицы на 90 градусов совсем не очевидный
Я в ролике постарался объяснить основную идею создания игры без сильных подробностей
Так что советую повторить за мной
Постараться самостоятельно разобраться в непонятных моментах
А если что-то будет совсем непонятно, то напишите вопрос в комментариях
Я подскажу
Через какое-то количество убранных линий (12-16), они просто перестают убираться, чё делать?
Попробуйте посмотреть ошибки в консоли, может там что-то будет
@@yurakoch Ошибок нет в консоли
Я через пару дней буду у компьютера, посмотрю код. Попробую подсказать.
Сейчас можете поставить дебаггер там, где высчитывается логика удаления строки. Может быть сможете найти ошибку…
@@yurakoch Ок, япасибо
А можете мне в телеграмм скинуть архив с кодом или ссылку на гитхаб с кодом? Я посмотрю и скажу, где у вас ошибка
Пытаюсь смотреть, но монотонный голос не позволяет.
Я пытался оживить голос, но всегда получается так
@@yurakoch
Я не сдаюсь)
Я смотрю уроки по голосу, может смогу сделать его лучше)
@@yurakoch по моему мнению слишком быстро и не заостряется внимание на определенных моментах, обучающимся это бы помогло.
А можете написать на примере тетриса, на чем было бы хорошо заострить внимание?
Я так понимаю все просто посмотрели видео не вникая что говорит сам автор. Допуская ошибки. 😖16:00
Для посмотреть видео ок. Для того что бы повторить приходится перематывать, жать на паузу, уменьшать скорость.
Хз, и дизлайк не хочется ставить и писать код трудно.
Ну и обьяснений хотелось бы побольше, если честно. А то код написали а зачем его написали, что он делает хз.
Идея и была в том, чтобы ставить на паузу, иначе ролик растянулся бы на несколько часов.
@@yurakoch я понимаю. Но я лучше послушаю поток твоих мыслей, как ты думаешь. Чем буду просто повторять.
Я смотрю видео по 11 часов и мне намного лучше чем смотреть такое на 40 минут но в итоге я буду нервничать.
Посмотри как видео по 10 часов набирают по 300К просмотров.
Толку мне перематывать если и так ничего не понятно сразу и прихолится на листочке сейчас сидеть в выписывать эту матрицу и понимать что там происходит.
Подумаю над этим, чтобы следующие ролики были более понятными. Спасибо
@@yurakoch и тебе спасибо за адекватную реакцию и видео. Много интересного.
@@v.demchenko как раз мне нравится, что самой приходится догадываться, ставить на паузу, а не всё на блюдечке. Мозг учится думать. А когда 11 часов всё разжёвывают тебе, сам думать не научишься.
Учишься сам находить инфу, если какой-то кусок кода не понятен, узнаёшь много нового попутно, причём вещи, про которые почему-то редко пишут и используют
Спасибо автору огромное! Разобрав пару уроков, потратив на них несколько дней, мир просто перевернулся