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

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 พ.ย. 2024

ความคิดเห็น • 76

  • @UC1C0GDMTjasAdhELHZ6lZNg
    @UC1C0GDMTjasAdhELHZ6lZNg ปีที่แล้ว +4

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @ВладимирДолгуев
    @ВладимирДолгуев ปีที่แล้ว +4

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว +1

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

  • @kirillmitskevich8851
    @kirillmitskevich8851 ปีที่แล้ว +2

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @georgeluckyfox7238
    @georgeluckyfox7238 ปีที่แล้ว +2

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @ev.geniuss
    @ev.geniuss ปีที่แล้ว +1

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

      Спасибо)

  • @seidkhan
    @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
      @yurakoch  ปีที่แล้ว

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

  • @ДенисЕрохин-о6ы
    @ДенисЕрохин-о6ы ปีที่แล้ว +1

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว +1

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

  • @zvd1660
    @zvd1660 ปีที่แล้ว +2

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

      Спасибо)

  • @DudeFromRussia360
    @DudeFromRussia360 24 วันที่ผ่านมา

    Автор, большая к тебе просьба:
    Задумайся над тем, чтобы сделать полное текстовое описание созданных тобою (имею ввиду подкапотное функционирование всех функций, обрращений и модулей) игр и в целом перевести все твои ролики в текстовые курсы. Размести их на Stepik, назначь любую цену (я готов и за 5k купить и за 10k, причём каждый по отдельности)

    • @yurakoch
      @yurakoch  24 วันที่ผ่านมา

      Не знал про это ничего.
      Можете, пожалуйста, подробнее рассказать про это?
      Мой телеграм yurakoch

  • @WEBSTART-LIVE
    @WEBSTART-LIVE ปีที่แล้ว +1

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

    • @WEBSTART-LIVE
      @WEBSTART-LIVE 5 หลายเดือนก่อน

      @@404Negative уже сделал давно)

  • @MrGost
    @MrGost 4 หลายเดือนก่อน

    Вроде бы не нашёл какого-то иного решения с 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
      @yurakoch  4 หลายเดือนก่อน

      А для чего это? Я уже подзабыл свой код…

    • @MrGost
      @MrGost 4 หลายเดือนก่อน

      ​@@yurakoch У вас каждое движение в низ перезапускало анимацию, путём stopLoop(); startLoop(); для того что бы при нажатии кнопки игроком, фигурка не падала по истечению времени. Я предложил свой вариант, где анимация проигрывается в интервале, и перезапускается только когда игрок нажимает на кнопку

  • @adventure229
    @adventure229 ปีที่แล้ว +1

    Cool good job

  • @TaimasovK
    @TaimasovK 3 หลายเดือนก่อน

    Привет! Спасибо , Огонь! И вопрос : как и что мне сделать, чтобы вылечить?

    • @yurakoch
      @yurakoch  3 หลายเดือนก่อน

      Вылечить что?

  • @xxktulxa7182
    @xxktulxa7182 ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

    • @xxktulxa7182
      @xxktulxa7182 ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว +2

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

  • @nonenone2743
    @nonenone2743 ปีที่แล้ว +1

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว +1

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

    • @nonenone2743
      @nonenone2743 ปีที่แล้ว

      @@yurakoch :'(

    • @zvd1660
      @zvd1660 ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

      Что это?

  • @nikita_suiazov
    @nikita_suiazov 2 หลายเดือนก่อน

    Можем ли мы сделать такую же адаптивную игру только на канвасе?

    • @yurakoch
      @yurakoch  2 หลายเดือนก่อน

      Можете сделать на канвасе

    • @nikita_suiazov
      @nikita_suiazov 2 หลายเดือนก่อน

      @@yurakoch чтоб добиться адаптивности нужно на ивент resize вешать колбек и перерисовывать канвас каждый раз? или можно как-то попроще сделать, вы не в курсе?

    • @yurakoch
      @yurakoch  2 หลายเดือนก่อน

      @nikita_suiazov я бы сделал так. Resize происходит очень редко, поэтому это решение хорошее.

    • @nikita_suiazov
      @nikita_suiazov 2 หลายเดือนก่อน

      @@yurakoch спасибо!

  • @ИльяБрагин-я9ъ
    @ИльяБрагин-я9ъ ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @ДенисЕрохин-о6ы
    @ДенисЕрохин-о6ы ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @sersenko
    @sersenko 5 หลายเดือนก่อน

    Через какое-то количество убранных линий (12-16), они просто перестают убираться, чё делать?

    • @yurakoch
      @yurakoch  5 หลายเดือนก่อน

      Попробуйте посмотреть ошибки в консоли, может там что-то будет

    • @sersenko
      @sersenko 5 หลายเดือนก่อน

      @@yurakoch Ошибок нет в консоли

    • @yurakoch
      @yurakoch  5 หลายเดือนก่อน

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

    • @sersenko
      @sersenko 5 หลายเดือนก่อน

      @@yurakoch Ок, япасибо

    • @yurakoch
      @yurakoch  5 หลายเดือนก่อน

      А можете мне в телеграмм скинуть архив с кодом или ссылку на гитхаб с кодом? Я посмотрю и скажу, где у вас ошибка

  • @ИльяБрагин-я9ъ
    @ИльяБрагин-я9ъ ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

  • @mainName777
    @mainName777 ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว +1

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

  • @alexidino
    @alexidino 10 หลายเดือนก่อน

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

    • @yurakoch
      @yurakoch  10 หลายเดือนก่อน +1

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

    • @alexidino
      @alexidino 10 หลายเดือนก่อน

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

    • @yurakoch
      @yurakoch  10 หลายเดือนก่อน

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

    • @alexidino
      @alexidino 10 หลายเดือนก่อน

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

    • @yurakoch
      @yurakoch  10 หลายเดือนก่อน

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

  • @v.demchenko
    @v.demchenko ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

    • @v.demchenko
      @v.demchenko ปีที่แล้ว

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

    • @yurakoch
      @yurakoch  ปีที่แล้ว

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

    • @v.demchenko
      @v.demchenko ปีที่แล้ว

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

    • @ЕкатеринаМожанова-ы6в
      @ЕкатеринаМожанова-ы6в ปีที่แล้ว

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

  • @TaimasovK
    @TaimasovK 3 หลายเดือนก่อน

    file:///C:/Users/turbo/Desktop/tetris/index.html

    • @yurakoch
      @yurakoch  3 หลายเดือนก่อน

      Я не могу открыть ваш файл с компьютера