если у кого-то возникает ошибка на стадии создания фигуры, попробуйте использовать нормальный генератор случайных чисел. здесь у автора что-то сомнительное. const randomX = (min, max) => Math.trunc(Math.random() * (max - min + 1) + min), и вызывайте через randomX(0,6) для набора из семи фигур. переменную curFig можно инициализировать сразу же массивом с нужной фигурой, тогда следующий шаг будет проще. в каждый изначальный массив фигуры можно добавить четвёртый элемент строку figureNameХ, чтобы при отладке выводить её и видеть, какую кракозябру нужно исправить. я тоже новичок, эти моменты дались мне непросто, но весьма помогли.
написал данный код. выдает ошибку в конце функции create, когда добавляем класс figure "Uncaught TypeError: Cannot read property 'classList' of null" что я сделал не так вообще не понимаю
Блин, сижу и думаю, ломаю голову минут 10 что же не так, переписал несколько раз всю нижнюю часть, пока не полез смотреть на то какой хтмл вывод ячеек, и обнаружил где в коде опечатался: excel[i].setAttribute("posX", x); excel[i].setAttribute("posX", y); ну просто молодец)
Правильно, не надо писать на ES6 и заворачивать значения в функции))) 100 циклов и 100 квери селекторов в массив, ещё лучше надо было написать конкатенацией, чтоб как в змейке сделать кучу адских конструкций..... чем меньше прогеров, тем лучше))), если писать такой манки код на собесе где нибудь... тебя сразу пошлют =), эта серия уроков я так понимаю, чтобы затянуть на курс!
Добрый день! У меня какая-то проблема в функции create(). Она почему-то выдает undefined... Можно кому-то код показать? Моих скромных познаний по отладке и поиску проблем явно не хватает!!! :)
Привет. После добавления класса тетрис в мэйн, у мэйна пропадает левый бордер. Везде есть чёрная граница, кроме левой стороны. С чем это может быть связано?
@@Kefvesekeчесно сам не оч люблю JQuery но маминых экспертов нелюблю еще больше потому к тебе 2 вопросa??? 1. Мин версия весит 85кб как 1 картинка jpg в чем проблема загрузки??? 2. Мне вот интересно в что это компилируется JQuery и главное что именно служит компилятором??
@@andriidou8023 я конечно, может быть и мамкин эксперт, но комментаторы, крайне понимающие комменты и могущие свой отлично формулировать - еще пущий 3,14здец. Загрузка - наименьшая из всех зол. Причем тут "компилляция jQuery", как это? Про нативный код ведь речь шла. Не уж то движок с равной скоростью компиллит натив и фреймворк? Использовать его сегодня, когда поддержка стандартов в просто прекрасна, а так же давным давно появился querySelector, key-frames в css, fetch в конце концов... мда..
@@Kefveseke ну смотри проблема в том что ты не совсем понимаешь что такое JQuery Во первых ты почему думаешь что JQuery фреймворк но это библиотека и ее суть в том, что это просто набор функций написан на нативном jsб то есть это уже готовые функции которые надо вызвать с нужными тебе аргументами, вот сайт youmightnotneedjquery.com/ с простыми примерами какая функция что делает. И так еще про 'компиляцию' js не компилируется он интерпретуеться браузером.
Кстати на счет новых стандартов es6 JQuery действительно использует старый синтаксис но это сделано только для совместимости с старими браузерами по той же причине мы используем Babel когда пишем на es6+
@@bezel4689 не думала над игрой больше; возможно библиотеки подключены были (странно, что в консоль шибку не выводит никакую). Может именно на даном этапе фигурка и не должна отображаться.
@@vitaliamilaeva9259 Здравствуйте, Виталина! С вашего позволения я объясню вам, где вы ошиблись в вашем коде: 1) Одна из самых распространенных ошибок начинающих программистов это банальная ошибка в lengt, пишут lenght. Как по моему, с этим встречаются верстальщики чаще всего. Скорее всего путая в голове с окончанием у height. Я также встречался на своем опыте с данной ошибкой :) Вам необходимо в своем коде исправить, чтобы цикл заработал. (2 места исправления) 2) Вторая ошибка немного сложнее в понимании, но все же. Вы используете новый синтаксис ES-2015, а конкретнее обратные кавычки. В функции create() у нас есть массив figureBody. Если коротко, то ошибка в ваших переносах. Переносы "воспринимаются" интерпретатором буквально, что в нашем примере вызывает ошибку. Вам необходимо: - или экранировать перенос, но вы также выравнивали код после переноса пробельными символами, поэтому каждый символ подлежит экранированию... боль.. - использовать только один перенос "enter" и экранировать его. что более читабельно и понятно. - последний вариант, как у автора - не использовать перенос вовсе. В данном примере мне более подходит последний вариант, как у автора. Кода немного и он спокойно воспринимается, не вижу в переносах необходимости. Вот ссылка на бесплатный источник с более подробной информацией, но думаю вы его знаете :) learn.javascript.ru/es-string Также есть одно замечание, но оно лично мое, субьективное. Вы или используйте новый синтаксис или используйте старый... Если коротко, то использование var и let, особенно в таком маленьком примере нецелесообразно. Более того в будущем такая привычка может привести к неожиданным результатам. Вы спокойно в 4 строке, в цикле, можете заменить var на let. Тут это не критично но помните, что вы делаете глобальную переменную с помощью var. Спасибо за внимание, пишите если будут вопросы. :)
Благодарю Вас и Игоря и, конечно же Артёма за представленный код и полезные знания, долго не мог найти причину отсутствия клеток, оказалось, что в классе .excel было указано некорректное правило: background вместо border :)
@@rara901 Потому что уроки называются "Тетрис на ЧИСТОМ Javascript". Для тех, кто не любит JQuery (как я) и хочет научиться писать на нативном JS. Почему лучше не следует изучать JQuery без знания и понимания чистого JS и чем плох JQuery сам по себе вы можете погуглить самостоятельно
я хоть и в js слаб еще,но на вебинаре по созданию своего алиэкспресс речь шлао том,что getElementById и getElementByClassName - прошлое и уже есть quetSelector() который инфу любого типа берет в себя
@@alexgv7352 и змейка, и тетрис написано мной лично, с нуля и с реализацией из головы. Если какие-то моменты похожи на чьи-то другие уроки, то неудивительно, учитывая количество вариантов реализации в сети.
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
Супер, спасибо больше за видео для джс) особенно на чистом)
Спасибо. Очень интересный урок, особенно для новичков. Наталкивает даже на интересные эксперименты с подобной техникой)
если у кого-то возникает ошибка на стадии создания фигуры, попробуйте использовать нормальный генератор случайных чисел. здесь у автора что-то сомнительное. const randomX = (min, max) => Math.trunc(Math.random() * (max - min + 1) + min), и вызывайте через randomX(0,6) для набора из семи фигур. переменную curFig можно инициализировать сразу же массивом с нужной фигурой, тогда следующий шаг будет проще. в каждый изначальный массив фигуры можно добавить четвёртый элемент строку figureNameХ, чтобы при отладке выводить её и видеть, какую кракозябру нужно исправить. я тоже новичок, эти моменты дались мне непросто, но весьма помогли.
У меня в браузере сетка excel не отоброжается вообше,а так все норм. Знает кто-то почему так?
написал данный код. выдает ошибку в конце функции create, когда добавляем класс figure "Uncaught TypeError: Cannot read property 'classList' of null" что я сделал не так вообще не понимаю
Блин, сижу и думаю, ломаю голову минут 10 что же не так, переписал несколько раз всю нижнюю часть, пока не полез смотреть на то какой хтмл вывод ячеек, и обнаружил где в коде опечатался:
excel[i].setAttribute("posX", x);
excel[i].setAttribute("posX", y);
ну просто молодец)
объясните пожалуйста, почему не появились ячейки в поле?
Помогите пожалуйста открываю index.html и не отоброжается сетка excel. Все делал как в видео .Кто знает в чем проблема?
Круто
не понял 52 строку;почему он воспользоваться querySelector ом 19:07
Правильно, не надо писать на ES6 и заворачивать значения в функции))) 100 циклов и 100 квери селекторов в массив, ещё лучше надо было написать конкатенацией, чтоб как в змейке сделать кучу адских конструкций..... чем меньше прогеров, тем лучше))), если писать такой манки код на собесе где нибудь... тебя сразу пошлют =), эта серия уроков я так понимаю, чтобы затянуть на курс!
В "brackets" это сделать можно?
в следующем видосе расскажите по больше про то,как excel может помочь верстальщику
а когда будет следуйщий?
@@rodionnikiforchuk2408 Сегодня должен выйти
А есть это видео ,а то я не нашел ничего . Меня тоже интересует excel
Добрый день! У меня какая-то проблема в функции create(). Она почему-то выдает undefined... Можно кому-то код показать? Моих скромных познаний по отладке и поиску проблем явно не хватает!!! :)
есть полностью код?
Привет. После добавления класса тетрис в мэйн, у мэйна пропадает левый бордер. Везде есть чёрная граница, кроме левой стороны. С чем это может быть связано?
Где Лысый?)))
можно линк на код для тех кто ленится пол часа слушать?
Как я рад читать строчку "на чистом JS", а то задолбали эти "калькулятор за 5 минут на jQuery, Moment, Angular, Vue и React"
это конечно правильно, но отрицать плюсы jQuery не стоит, ибо он как минимум делает код меньше
@@XDarKsandr и загрузку, компилляцию, работу дольше... давай, продолжай)
@@Kefvesekeчесно сам не оч люблю JQuery но маминых экспертов нелюблю еще больше потому к тебе 2 вопросa???
1. Мин версия весит 85кб как 1 картинка jpg в чем проблема загрузки???
2. Мне вот интересно в что это компилируется JQuery и главное что именно служит компилятором??
@@andriidou8023 я конечно, может быть и мамкин эксперт, но комментаторы, крайне понимающие комменты и могущие свой отлично формулировать - еще пущий 3,14здец.
Загрузка - наименьшая из всех зол.
Причем тут "компилляция jQuery", как это? Про нативный код ведь речь шла. Не уж то движок с равной скоростью компиллит натив и фреймворк?
Использовать его сегодня, когда поддержка стандартов в просто прекрасна, а так же давным давно появился querySelector, key-frames в css, fetch в конце концов... мда..
@@Kefveseke ну смотри проблема в том что ты не совсем понимаешь что такое JQuery
Во первых ты почему думаешь что JQuery фреймворк но
это библиотека и ее суть в том, что это просто набор функций написан на нативном jsб то есть это уже готовые функции которые надо вызвать с нужными тебе аргументами, вот сайт youmightnotneedjquery.com/ с простыми примерами какая функция что делает.
И так еще про 'компиляцию' js не компилируется он интерпретуеться браузером.
Кстати на счет новых стандартов es6 JQuery действительно использует старый синтаксис но это сделано только для совместимости с старими браузерами по той же причине мы используем Babel когда пишем на es6+
если не отображаются фигуры нужно закомментировать вспомогательные переменные
```
// вспомогательная переменная
//let currentFigure = 0;
//let figureBody = 0;
```
Подскажите, что за плагин, благодаря которому страничку, которую пишешь, можно не обновлять, плагин делает это автоматом. Спасибо
Live Server в VS Code
Browsersync
LiveReload.
@goga vscode позволяет обойтись без браузерсинка. У него свой встроенный лайв без геморроя с его установкой
Артем Прыгин ну если для тебя геморрой синк установить, то у меня для тебя плохие новости. А что делать если vscodом не пользуешься?
Народ что делать если невидимая часть тетриса снизу а не сверху?
а "эксельный" документ для себя или без него не будет работать?
для себя :D
зачем вспомогательная переменная let i = 0 ?
Зачем голые атрибуты писать? Есть же специальные атрибуты data-*
Потому что в данном конкретном уроке они не нужны.А про оптимизацию кода говорится в самом начале
Почему на дивах? Думал на канвасе будет...
Какие есть еще варианты тетриса на js, можно в коменты ?
7:52
решила повторить за тобой, но не работает построение фигуры ( код: codepen.io/milaeva/pen/GejeZW?editors=0011 )
Тоже не работает построение... не решилась проблема?
@@bezel4689 не думала над игрой больше; возможно библиотеки подключены были (странно, что в консоль шибку не выводит никакую). Может именно на даном этапе фигурка и не должна отображаться.
@@vitaliamilaeva9259 Здравствуйте, Виталина!
С вашего позволения я объясню вам, где вы ошиблись в вашем коде:
1) Одна из самых распространенных ошибок начинающих программистов это банальная ошибка в lengt, пишут lenght. Как по моему, с этим встречаются верстальщики чаще всего. Скорее всего путая в голове с окончанием у height. Я также встречался на своем опыте с данной ошибкой :)
Вам необходимо в своем коде исправить, чтобы цикл заработал. (2 места исправления)
2) Вторая ошибка немного сложнее в понимании, но все же. Вы используете новый синтаксис ES-2015, а конкретнее обратные кавычки. В функции create() у нас есть массив figureBody. Если коротко, то ошибка в ваших переносах. Переносы "воспринимаются" интерпретатором буквально, что в нашем примере вызывает ошибку. Вам необходимо:
- или экранировать перенос, но вы также выравнивали код после переноса пробельными символами, поэтому каждый символ подлежит экранированию... боль..
- использовать только один перенос "enter" и экранировать его. что более читабельно и понятно.
- последний вариант, как у автора - не использовать перенос вовсе.
В данном примере мне более подходит последний вариант, как у автора. Кода немного и он спокойно воспринимается, не вижу в переносах необходимости.
Вот ссылка на бесплатный источник с более подробной информацией, но думаю вы его знаете :) learn.javascript.ru/es-string
Также есть одно замечание, но оно лично мое, субьективное. Вы или используйте новый синтаксис или используйте старый... Если коротко, то использование var и let, особенно в таком маленьком примере нецелесообразно. Более того в будущем такая привычка может привести к неожиданным результатам. Вы спокойно в 4 строке, в цикле, можете заменить var на let. Тут это не критично но помните, что вы делаете глобальную переменную с помощью var.
Спасибо за внимание, пишите если будут вопросы. :)
@@IngvarBraus Большое спасибо, исправила тоже эти ошибки и все заработало!)
Благодарю Вас и Игоря и, конечно же Артёма за представленный код
и полезные знания,
долго не мог найти причину отсутствия клеток,
оказалось, что в классе .excel было указано некорректное правило:
background вместо border :)
А почему вы пишите не на новой версии jQuery
jQuery - это библиотека JS.
Я пишу на чистом JS
@@ArtemPrygin-h5g Тогда зачем услажняете себе, не пишите на jQuery
@@rara901 Потому что уроки называются "Тетрис на ЧИСТОМ Javascript". Для тех, кто не любит JQuery (как я) и хочет научиться писать на нативном JS. Почему лучше не следует изучать JQuery без знания и понимания чистого JS и чем плох JQuery сам по себе вы можете погуглить самостоятельно
Что делать? Не работает main.appendChild(tetris);
тоже не работает
я хоть и в js слаб еще,но на вебинаре по созданию своего алиэкспресс речь шлао том,что getElementById и getElementByClassName - прошлое и уже есть quetSelector() который инфу любого типа берет в себя
querySelector в основном и используется в этих уроках, className больше для разнообразия
это не прошлое, они работают по-разному, хотя эта разница очень редко когда нужна. в 99% случаев можно querySelector использовать.
Он ворует старые уроки у иностранных блогеров либо с w3s. Тогда ещё этого не было
@@alexgv7352 и змейка, и тетрис написано мной лично, с нуля и с реализацией из головы. Если какие-то моменты похожи на чьи-то другие уроки, то неудивительно, учитывая количество вариантов реализации в сети.
а вообщето не так должно писатся [`posX = ${x}`]
Вот кому заняться не чем