и почему такие как ты не популярны.. Это ж пипец полезно! Без каши, воды, возни, такое впечатление будто я пишу сижу код, прям в точь в точь хахах) Отличное видео, бесценный опыт!
Супер-видео! Отличная подача и нет воды! Отличная практика ООП, есть над чем подумать. Узнал много нового и пока не все понятно. Повторил урок один в один, сначала возникла трудность со слиянием ячеек, значения не суммировались, вылезало NaN, понял что пропустил одну строчку в методе setValue() короче, топ! буду пересматривать, не все понял
Отличное видео! Спасибо! Удачи и сил в записи подобного контента! Не бросай это занятие у тебя отлично получается! Понравился достаточно хорошо структурированный код и подробные объяснения.
@@yurakoch На мой субъективный взгляд, видео нужно чуть-чуть по медленнее. А то есть моменты, где ты строчку кода написал(быстро) и сразу переключился на другой файл. А смотрящий даже и осознать в голове не успел, что там было написано. Такой контент в основном смотрят те кто учатся или джуны. А ты им шпаришь как бывалым)). Бывалые же смотрят англоязычный контент.
спасибо за труд, побольше бы таких видео, именно с практикой программирования на js. При наличии хорошего теоретического базиса по js - это отличная практика.
Просто вуаууу! Потрясающе, осталось только придумать, как реализовать читерскую кнопку "вернуться назад на один ход". Спасибо за подробное объяснение, увидел много нового и не знакомого мне в JS, есть чему учиться и расти, продолжай в том же духе!
Спасибо) Первая идея для кнопки назад - можно хранить историю состояний приложения, и по нажатию на кнопку назад просто ставить блоки в прошлое состояние. Состояние приложения - это количество плиточек, их значения и положения.
Спасибо за видео, я узнал много нового. Отличная практика ООП для начинающих, отличная демонстрация структурированного кода. Очередной раз почувствовал себя тупым :(
Спасибо) Скоро будет следующий ролик, там игра будет потяжелее по коду и по геометрии. Но иногда буду разбавлять контент простыми роликами, чтобы начинающие разработчики тоже могли повторять и учиться.
Спасибо за такую практику) Но есть пару моментов, которые хотелось бы изменить. После написанного кода, в игру можно играть только на компьтере, а хотелось бы на телефоне тоже, ну да ладно. Знаний мало было, чтобы в коде что-то исправлять и дописывать, но есть такая библиотека как Hammer.JS, которую я удачно подключила, написала по примеру пару функций и на телефоне работает, но к сожалению с багами(неправильно числа плюсует, и откуда то есть 3, 6 и тд). Но это все абсолютно неважно! Ведь главное - опыт😜 Учитесь, друзья, и все у вас будет в шоколаде))
Вы можете перейти по ссылке yurakoch.ru/2048 и скачать код оттуда Там я реализовал работу на телефоне без библиотек. В ролике не стал это объяснять, т к не хотел его усложнять.
Спасибо за видео.Правда не хватает больше обьяснений почему что и где используеться!Для новичка как я сложно понять ход логики.Все таки в постере написано твоя первая игра)))!Я не критикую просто даю фидбек как зритель!И в любом случае это практика!А практика наше все )))!Спасибо за контент!Удачи всем!
боже, поняла что до этого просто много чего не понимала, хорошо что осознала пока не поздно, хочу иметь такие же быстрые руки которые печатают просто очень быстро🙃
Очень крутой материал, наглядно показывающий как работать в ООП в JS. Многое непонятно, конечно, и кажется всё на первый взгляд неудобным, но, я думаю, что со временем и к этому можно будет привыкнуть.) Написал данную игру по твоему видео на чистом JS как в ролике, и всё получилось, но когда решил переписать это на React JS, то возникли некоторые сложности.)0 Надеюсь всё придёт со временем, а тебе желаю развития и новых высот как в программировании, так и на ютубе.)
@@yurakoch спасибо за ответ, хотелось бы тогда спросить. Я хорошо верстаю сайты, знаю много технологий для Html, css и много дополнительных модулей для js, gulp, webpack, я изучил react, более менее знаю typescript и много изучал продвинутый js, но проектов у меня по логике очень мало, чуть чуть простого на react и js, ну и портфолио из 7 небольших вёрсток сайтов по макету. Могу ли я уже начинать ходить на собеседования? Ведь опыта с самой логикой у меня действительно мало, но теорию знаю отлично
Да Уже пора ходить. Т к первую работу найти тяжело, то может быть, придется пройти много собеседований. Но нужно не обращать на это внимание и дальше ходить на собеседования, и откликаться на все вакансии.
@@yurakoch Большое спасибо. Хочу ещё спросить, мне всего 15 лет, в основном в вакансиях полная занятость, а до 16 лет можно только 4 часа в день, как мне искать работу?
Здравствуйте, спасибо за отличный урок! Возник такой вопрос... Можно ли из этой программы сделать APK файл, чтобы его могли устанавливать другие люди ?
Что делать если пишет uncaught SyntaxError: Cannot use import statement outside a module и указывает на script.js:1. Так же после открытия html у меня просто чёрный экран
Когда вы подключаете scripts.js, то нужно обязательно указать type="module". Без этого нельзя будет использовать import и export. Чтобы код заработал, то его нужно запускать через LiveServer. Если вы просто откроете файл index.html, то работать не будет.
Здравствуйте когда я запускаю код, у меня выводит ошибку "script.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'linkTile')" я уже все пересмотрел, перепробовал Подскажите пожалуйста как решить проблему, буду очень благодарен)
у меня чёт вылезает ошибка SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) и куча всяких разных ошибок которые начинаются с at версия node js 19.8.1
спасибо за видео! у меня один вопрос - как можно сделать ресет поля? чтобы, к примеру, при нажатии кнопки рестарт поле очищалось и появлялись только 2 случайные плиточки? спасибо!
1) нужно в файле script.js найти вашу кнопку 2) написать обработчик клика по этой кнопке 3) пробежаться по всем ячейкам и у каждой непустой ячейки удалить плиточку и удалить ссылку на плиточку 4) добавить 2 новые плоточки на поле 5) подписаться на событие нажатие клавиши в итоге должен получится вот такой код const resetBtn = document.querySelector("button"); resetBtn.addEventListener("click", () => { grid.cells.forEach(cell => { if (!cell.isEmpty()) { cell.linkedTile.removeFromDOM(); cell.unlinkTile(); } }); grid.getRandomEmptyCell().linkTile(new Tile(gameBoard)); grid.getRandomEmptyCell().linkTile(new Tile(gameBoard)); setupInputOnce(); });
15:08 почему-то не создается tile в документе, нету белых плиток, только поля. Я уже и ваш код перекопировал полностью на этот этап, все равно ничего не появляется. Только 16 div'ов с айди "game-board", и под ними нету div tile
нужно проверить, что: 1) в консоли нет ошибок 2) метод isEmpty работает 3) getRandomCell возвращает пустую ячейку 4) linkTile прописан 5) setXY прописан 6) new Tile принимает аргумент gameBoard 7) в файле script прописан import Tile 8) еще может быть проблема в css советую пройтись по всем этапам с debugger; тогда получится понять, где сломался код если tile не создается, то проблема в js если tile создается, добавляется в html, но он прозрачный, то проблема в css
@@yurakoch Спасибо за быстрый ответ! В консоли следующая ошибка: Uncaught TypeError: Cannot set properties of undefined (setting 'textContent') at new Tile (tile.js:6:35) at script.js:7:36 Т.е после преобразований в файле tile.js у нас this.value почему-то становится равным undefined и все ломается, если я правильно понимаю..
@@pajiloypauk8093 проверьте, что у вас в конструкторе класса Tile корректно указано this.tileElement = document.createElement("div"); т к сейчас ошибка показывает, что this.tileElement === undefined проверьте, что this.tileElement корректно указан во всех строчках, возможно, опечатка в названии this.tileElement
пишет вот так в браузере: background-color: hsl(25, 60%, var(-bg-lightness %)); - проблема в том, что в style.css я не добавлял знак процента, и у js пробовал удалять знак процента но он появляется в браузере + эти свойства у (тоже в браузере) отображаются как не рабочие, то есть эти цвета даже не работают, и я не знаю почему, с RGB все работало и с RGBa тоже а hsl не роботает.
Спасибо тебе автор! Но есть вопрос, возможно ли заменить числа на изображения (приравненные к числам). К примеру вместо цифры 2 будет своя картинка, у цифры 4 своя и тд? Сложно ли это реализовать?
Заменить можно Для этого нужно создать объект, где каждому числу будет соответствовать путь к картинке. А затем там, где мы добавляем число в html, вместо этого создавать тег img, где будет указан путь до картинки. Реализовать такое должно быть не сложно.
Спасибо за видео , все сделала и насладилась процессом. Залила на гитхаб а на телефоне игра не работает , это по тому что прописаны 4 кнопки ( вверх, вниз , вправо , влево )?
Я в видео не добавил реализацию для мобильных устройств. Попробуйте сделать самостоятельно, для этого нужно добавить определение касания и смахивания вверх, вниз, влево и вправо.
не могу разобраться в чем проблема, но к плиточкам почему то добавляются значения когда они находятся на границе gameboard и ни с какой плиточкой не соединяются (такое чувство что за границей gameboard есть еще плитки которые и дают значение). Не подскажите что делать?
нужен код или побольше контекста какая кнопка вверх? где console.log? структура какой функции выводится? я ролик писал давно, уже не помню все его этапы...
@@yurakoch смотрите, consol срабатывает при нажатии кнопки ArrayUp, у вас на ролике выходит массив, а у меня целая функция,как будто в консол я написал его как строку
@@WizInWeb если это во время 22:23 то вот несколько причин 1) убедитесь, что в функции. moveUp вы вызываете slideTiles c grid.cellsGroupedByColumn 2) убедитесь, что в grid.js this.cellsGroupedByColumn = this.groupCellsByColumn(); тут важно именно вызвать метод groupCellsByColumn
@@yurakoch Благодарю, отлично работает. Ещё один вопрос: я изучал Python и C#, и захотел попробовать web-разработку. Я хочу начать с HTML, CSS и JavaScript. Какие ресурсы посоветуете для человека, который уже более-менее разбирается в программировании, но не изучал web?(ваше видео первый опыт с html css и js)
у вас появились какие-нибудь ошибки в консоли? с 8 минуты по 11 было написано довольно много кода, поэтому нужно чуть больше информации от вас, чтобы я смог помочь
Видос суперский, отличная подача материала с объяснением и голосом, который не усыпляет. Мне кажется, это идеальный канал для практики на старте изучения JS. Огромное спасибо автору! А теперь к вопросу: я повторил всё точь в точь, как в ролике (нууу, может быть с совершенно незначительными отклонениями), но когда я запускаю через Лайв Сервер, мой браузер переключается в вечную загрузку старнички, через какое-то время советуя её прикрыть, т.к. она кушает слишком много ресурсов. Есть ли какие-то предположения по этому поводу? Буду очень признателен за помощь
Спасибо, отличное видео. У меня проблемка, нужна помощь. Все сделал по видео уроку но моя игра на телефоне не работает но если перейти по вашей ссылке на телефоне работает
Я добавил работу с тачскрином, в ролике не рассказывал про это. Можете воспользоваться библиотекой hammer js, чтобы быстро добавить работу с тачскрином
Я в ВУЗе учился на программиста, только на C# Потом несколько лет проработал в разных компаниях. Я писал у себя в телеграмме пост, как бы я сейчас учился на фронтенд. Можете посмотреть по ссылке: t.me/kochinism/181
@@yurakoch Я смотрел, спасибо. Но у меня такое ощущение, что я скриптовый) В том плане, что понимаю, о чем идет речь, но когда нужно решить другой пример, у меня - ступор. Вы считаете, что реально самому, без профильного образования, освоить язык? Пусть не для работы, а хотя бы для своих целей. Те же самые игрушки писать, автоматизацию для дома.
Вам нужно побольше практики. Порешайте побольше простых задач, повторите на ютубе несколько простых проектов. В итоге вы сможете во всем разобраться без ВУЗа.
Хотя бы основы верстки и основы работы с js В любом случае попробуйте посмотреть Если будет что-то непонятно, то ставьте на паузу и ищите непонятный метод или функцию в интернете
можно считать сумму всех чисел на экране сохранять это в переменную чтобы после обновления страницы не потерять значение переменной, то ее можно сохранять в localstorage, а потом читать из localstorage
Нужно запускать код в локальном сервере. Чтобы сделать это самым простым способом: - установите расширение "Live Server" в VsCode, - в VsCode нажмите правой клавишей мыши на файл index.html, - выберите "Open in Live Server" Тогда все должно заработать. Если вы просто откроете файл index.html в браузере, то получите ошибку доступа: Access to script at './2048/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Импорт/экспорт модулей работает только через HTTP(s). Если вы пытаетесь открыть файл index.html в браузере, то откроете его через протокол file://, а это не HTTP(s).
нужно проверить, что вы добавляете класс cell в файле cell.js cell.classList.add("cell"); нужно проверить, что вы корректно добавили в стилях название класса .cell в файле style.css нужно проверить, что нет опечатки стилях background-color: #444; может быть незаметная ошибка, когда вместо "c" из латиницы пишется "с" из кириллицы
@@dhejjdjfj5703 проверь все вышеперечисленное, у меня background-color было написано неправильно, дебаггер браузера этого не показал :с Стоит прописать все значения вручную, заново, убедившись, что все строки правильные Upd: мне помогло
короче, я убрал эту проблему я просто скопировал его код по ссылке и стерел до нужной мне строки и после этого плитки появились, так и не понял в чем была проблема в моем коде, вроде тоже самое что и у него, но по его коду работает а по моему нет
Почему у меня не отображается, хоть я все повторяю за вами , несколько раз заново начинал , вроде прошёлся десятки раз , что я пропуская не пойму , в конце просто серый фон и ничего , единственно под слешь (р) Текс выходит под черный цвет в центре, но квадраты ни как не выделяются
К сожалению, я не смогу так помочь, т к не вижу ваш код. Нужна более конкретная ошибка и место ошибки, чтобы я что-то мог подсказать. Скорее всего у вас где-то небольшая опечатка, из-за которой ломается приложение.
Попробуйте начать сначала И найдите момент, в который ваш проект расходится с моим. Скорее всего, это поможет вам даже самостоятельно найти проблему. Еще можете посмотреть на ошибки в консоли. Это тоже может помочь решить проблему.
да, можно будет выглядеть вот так yurakoch.ru/2048/ или можно вставить код не в , а в какой-нибудь блок и добавить ему стили от body, тогда помимо игры можно будет добавить на страницу сайта дополнительный контент
Привет, при написании функции moveDown() , а точнее this.cellsGroupedByReversedColumn = this. cellsGroupedByReversedColumn.map(column => […column].reverse()); В консоль получаю ошибку : Cannot read properties of undefined ( reading ‘map’) , можешь подсказать , в чем дело ? Пересматривал момент написания несколько раз , вроде бы не ошибся нигде
@@VarCS-ik можно перед this.cellsGroupedByReversedColumn добавить debugger; и посмотреть, что лежит в this.cellsGroupedByColumn возможно, функция this.groupCellsByColumn() ничего не возвращает функция groupCellsByColumn может ничего не возвращать по двум причинам 1. нужно что-то возвращать из функции, т е в теле функции должно быть написано return this.cells.reduce 2. внутри тела reduce нужно тоже обязательно возвращать результат, т е внутри reduce должно быть написано return groupedCells;
![Налог на незнание JavaScript - [Hamster Kombat]](http://i.ytimg.com/vi/PTdUmkT-yas/mqdefault.jpg)
и почему такие как ты не популярны.. Это ж пипец полезно! Без каши, воды, возни, такое впечатление будто я пишу сижу код, прям в точь в точь хахах) Отличное видео, бесценный опыт!
Только недавно начал делать ролики)
Надеюсь, что дальше будет больше просмотров)
потому что js не популярен в gamedev
Супер-видео! Отличная подача и нет воды!
Отличная практика ООП, есть над чем подумать. Узнал много нового и пока не все понятно. Повторил урок один в один, сначала возникла трудность со слиянием ячеек, значения не суммировались, вылезало NaN, понял что пропустил одну строчку в методе setValue()
короче, топ! буду пересматривать, не все понял
Видео супер. Хочется все так же делать самому.
Отличное видео! Спасибо! Удачи и сил в записи подобного контента! Не бросай это занятие у тебя отлично получается! Понравился достаточно хорошо структурированный код и подробные объяснения.
Спасибо, буду делать дальше)
@@yurakoch На мой субъективный взгляд, видео нужно чуть-чуть по медленнее. А то есть моменты, где ты строчку кода написал(быстро) и сразу переключился на другой файл. А смотрящий даже и осознать в голове не успел, что там было написано.
Такой контент в основном смотрят те кто учатся или джуны. А ты им шпаришь как бывалым)). Бывалые же смотрят англоязычный контент.
Учту, спасибо
спасибо за труд, побольше бы таких видео, именно с практикой программирования на js. При наличии хорошего теоретического базиса по js - это отличная практика.
Спасибо)
Буду и дальше делать такие ролики, пока есть с десяток идей)
Просто вуаууу! Потрясающе, осталось только придумать, как реализовать читерскую кнопку "вернуться назад на один ход".
Спасибо за подробное объяснение, увидел много нового и не знакомого мне в JS, есть чему учиться и расти, продолжай в том же духе!
Спасибо)
Первая идея для кнопки назад - можно хранить историю состояний приложения, и по нажатию на кнопку назад просто ставить блоки в прошлое состояние. Состояние приложения - это количество плиточек, их значения и положения.
Легко. Стек последних ходов.
для новичка было трудновато, но это видео просто отличное, спасибо автору!
Попозже сделаю несколько более простых уроков)
@@yurakoch Спасибо, можно будет сделать что-то такое с чем сталкивается обычный js работник, спасибо если учтете!
Почти все из этого ролика используется в работе js разработчика. Только на работе это было б на фреймворке, например, на реакте.
отличный перевод, объяснено подробней чем в оригинале, Кайл многие пояснения пропускает, спасибо
Спасибо
Я старался сделать код попроще, чтобы каждый смог повторить
Ваш код удивительные когда я его читаю я думаю что его придумал гений!
Респектую, инфа спикера воспринимается максимально понятно и приятно уху!
Спасибо)
бро, большое спасибо тебе за такой прекрасный видеоматериал, мне как раз курсач писать! однозначно лайк
Ого
Удачи с курсачом)
@@yurakoch спасибо)
Спасибо большое, очень подробные объяснения!
Спасибо за Ваш труд
Спасибо за видео, я узнал много нового. Отличная практика ООП для начинающих, отличная демонстрация структурированного кода. Очередной раз почувствовал себя тупым :(
Отличное видео! спасибо, надеюсь, что дальше контент будет только лучше, интереснее и сложнее, а миллион подписчиков набежит очень быстро!
Спасибо)
Скоро будет следующий ролик, там игра будет потяжелее по коду и по геометрии.
Но иногда буду разбавлять контент простыми роликами, чтобы начинающие разработчики тоже могли повторять и учиться.
@@yurakoch отлично! жду с нетерпением!)
Отличная подача материала! Спасибо большое! Надеюсь, в скором времени, буду также легко и непринужденно писать код на JS)))
Советую побыстрее найти первую работу, а дальше будет много практики, и код будет очень легко писать.
@@yurakoch повторять за вами легко, но нет еще полного понимания всего написанного)))
Постарайтесь после урока разобраться во всех деталях кода, тогда вам в дальнейшем будет проще делать что-то свое)
@@yurakoch спасибо большое за обратную связь и рекомендации!
классное видео
продолжай в том же духе
я буду сматреть все твои ведео
очень помог
Спасибо)
Следующее видео выложу 1 апреля
спасибо большое за видео , очень понятно все объясняешь. С меня лайк и подписка )
Спасибо)
Очень крутое видео. Спасибо за урок!
Спасибо
Спасибо за такую практику) Но есть пару моментов, которые хотелось бы изменить. После написанного кода, в игру можно играть только на компьтере, а хотелось бы на телефоне тоже, ну да ладно. Знаний мало было, чтобы в коде что-то исправлять и дописывать, но есть такая библиотека как Hammer.JS, которую я удачно подключила, написала по примеру пару функций и на телефоне работает, но к сожалению с багами(неправильно числа плюсует, и откуда то есть 3, 6 и тд). Но это все абсолютно неважно! Ведь главное - опыт😜 Учитесь, друзья, и все у вас будет в шоколаде))
Вы можете перейти по ссылке yurakoch.ru/2048 и скачать код оттуда
Там я реализовал работу на телефоне без библиотек.
В ролике не стал это объяснять, т к не хотел его усложнять.
Прекрасное видео, спасибо! И как же вы ласково называете плиточки плиточками, просто прелесть 😃
Спасибо)
Спасибо за видео.Правда не хватает больше обьяснений почему что и где используеться!Для новичка как я сложно понять ход логики.Все таки в постере написано твоя первая игра)))!Я не критикую просто даю фидбек как зритель!И в любом случае это практика!А практика наше все )))!Спасибо за контент!Удачи всем!
Спасибо)
Согласен, что 2048 сложновата для первой игры… Почему-то думал, что будет легко и просто, но по комментариям понял, что ошибался
Thank u for this video, really appreciate that🔥
боже, поняла что до этого просто много чего не понимала, хорошо что осознала пока не поздно, хочу иметь такие же быстрые руки которые печатают просто очень быстро🙃
Это ускоренное видео)
Т к скучно смотреть на медленную печать символов)
Очень крутой материал, наглядно показывающий как работать в ООП в JS. Многое непонятно, конечно, и кажется всё на первый взгляд неудобным, но, я думаю, что со временем и к этому можно будет привыкнуть.)
Написал данную игру по твоему видео на чистом JS как в ролике, и всё получилось, но когда решил переписать это на React JS, то возникли некоторые сложности.)0
Надеюсь всё придёт со временем, а тебе желаю развития и новых высот как в программировании, так и на ютубе.)
Спасибо)
Очень круто!!!!🎉
Спасибо)
Чел ты крут❤
Спасибо)
Раза 3 засыпал. Монотонное чтение сложно воспринимается. Но за материал спасибо.
Очень хорошее видео
Спасибо)
Великолепный урок, давай ещё! Давай пакмена запилим!?
Спасибо)
У меня есть план еще на 3 ролика
После этого можно сделать пакмена)
Супер седня попрактиковался под ваш ролик, понравилось использовать vmin
Здраствуйте, я просто пока делал понял, что сам бы не сделал, должен ли джун уметь делать задачи такого уровня?
Нет
Когда я был джуном, то задачи были проще.
У джуна только собеседование сложное)
@@yurakoch спасибо за ответ, хотелось бы тогда спросить. Я хорошо верстаю сайты, знаю много технологий для Html, css и много дополнительных модулей для js, gulp, webpack, я изучил react, более менее знаю typescript и много изучал продвинутый js, но проектов у меня по логике очень мало, чуть чуть простого на react и js, ну и портфолио из 7 небольших вёрсток сайтов по макету. Могу ли я уже начинать ходить на собеседования? Ведь опыта с самой логикой у меня действительно мало, но теорию знаю отлично
Да
Уже пора ходить.
Т к первую работу найти тяжело, то может быть, придется пройти много собеседований. Но нужно не обращать на это внимание и дальше ходить на собеседования, и откликаться на все вакансии.
@@yurakoch Большое спасибо. Хочу ещё спросить, мне всего 15 лет, в основном в вакансиях полная занятость, а до 16 лет можно только 4 часа в день, как мне искать работу?
Может быть можно на пол ставки или стажером, но я не знаю.
Можете поискать заказы на фрилансе. Как раз будет свое портфолио)
Здравствуйте, спасибо за отличный урок!
Возник такой вопрос... Можно ли из этой программы сделать APK файл, чтобы его могли устанавливать другие люди ?
Спасибо)
К сожалению я не знаю ответа, я так никогда не делал
@@yurakoch Хорошо, я Вас понял. Если узнаете, можете, пожалуйста, сообщить
Хорошо
Если узнаю, то сделаю ролик обучающий)
@@yurakoch Спасибо!
Было очень полезно
Спасибо
Что делать если пишет uncaught SyntaxError: Cannot use import statement outside a module и указывает на script.js:1. Так же после открытия html у меня просто чёрный экран
Когда вы подключаете scripts.js, то нужно обязательно указать type="module". Без этого нельзя будет использовать import и export. Чтобы код заработал, то его нужно запускать через LiveServer. Если вы просто откроете файл index.html, то работать не будет.
Здравствуйте когда я запускаю код, у меня выводит ошибку "script.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'linkTile')" я уже все пересмотрел, перепробовал
Подскажите пожалуйста как решить проблему, буду очень благодарен)
у вас проблема в том, что метод getRandomEmptyCell() возвращает undefined
проверьте этот метод в файле grid.js
Планируете ли вы подробное видео про русско-английский словарь на JS?
Такое не планировал делать
Мне больше нравится делать игры или визуальные эффекты)
@@yurakoch
Ясно
у меня чёт вылезает ошибка SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
и куча всяких разных ошибок которые начинаются с at
версия node js 19.8.1
Странно
А вы запускаете приложение через Live Server в VSCode?
@@yurakoch да
Проверьте, что вы указали type=“module” в теге в файле index.html
благодарю за видио
спасибо за видео! у меня один вопрос - как можно сделать ресет поля? чтобы, к примеру, при нажатии кнопки рестарт поле очищалось и появлялись только 2 случайные плиточки?
спасибо!
1) нужно в файле script.js найти вашу кнопку
2) написать обработчик клика по этой кнопке
3) пробежаться по всем ячейкам и у каждой непустой ячейки удалить плиточку и удалить ссылку на плиточку
4) добавить 2 новые плоточки на поле
5) подписаться на событие нажатие клавиши
в итоге должен получится вот такой код
const resetBtn = document.querySelector("button");
resetBtn.addEventListener("click", () => {
grid.cells.forEach(cell => {
if (!cell.isEmpty()) {
cell.linkedTile.removeFromDOM();
cell.unlinkTile();
}
});
grid.getRandomEmptyCell().linkTile(new Tile(gameBoard));
grid.getRandomEmptyCell().linkTile(new Tile(gameBoard));
setupInputOnce();
});
@@yurakoch большое спасибо!! Ваши комментарии очень полезны!
Только что посмотрела, в оригинале, потом зашла сюда, у вас нет ссылки на оригинал, что вы взяли код с канала web simplified 😮?
Нет
А как насчет телефонов там же нету клавиатуры?
Можно дописать работу с тачскрином с помощью библиотеки hammer js
@@yurakoch на лево на право работает а на верх и вниз не могу настроить можете помоч
15:08 почему-то не создается tile в документе, нету белых плиток, только поля. Я уже и ваш код перекопировал полностью на этот этап, все равно ничего не появляется. Только 16 div'ов с айди "game-board", и под ними нету div tile
нужно проверить, что:
1) в консоли нет ошибок
2) метод isEmpty работает
3) getRandomCell возвращает пустую ячейку
4) linkTile прописан
5) setXY прописан
6) new Tile принимает аргумент gameBoard
7) в файле script прописан import Tile
8) еще может быть проблема в css
советую пройтись по всем этапам с debugger;
тогда получится понять, где сломался код
если tile не создается, то проблема в js
если tile создается, добавляется в html, но он прозрачный, то проблема в css
@@yurakoch Спасибо за быстрый ответ! В консоли следующая ошибка: Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')
at new Tile (tile.js:6:35)
at script.js:7:36
Т.е после преобразований в файле tile.js у нас this.value почему-то становится равным undefined и все ломается, если я правильно понимаю..
@@pajiloypauk8093 проверьте, что у вас в конструкторе класса Tile корректно указано this.tileElement = document.createElement("div");
т к сейчас ошибка показывает, что this.tileElement === undefined
проверьте, что this.tileElement корректно указан во всех строчках, возможно, опечатка в названии this.tileElement
@@yurakoch Да, действительно опечатка! Спасибо)
У меня браузер сам добавляет к hsl знак процнента в конце, и по етому цвет плиточек такой как у cell, как исправить?
Знак процента не должен ломать цвет. Может ошибка в чем-то другом?
пишет вот так в браузере: background-color: hsl(25, 60%, var(-bg-lightness %)); - проблема в том, что в style.css я не добавлял знак процента, и у js пробовал удалять знак процента но он появляется в браузере + эти свойства у (тоже в браузере) отображаются как не рабочие, то есть эти цвета даже не работают, и я не знаю почему, с RGB все работало и с RGBa тоже а hsl не роботает.
У css переменной должно быть два знака тире вначале. -bg-lightness
Попробуйте так
@@yurakoch у меня 2
Можете прислать мне свой код архивом в телеграм. Я его проверю.
Спасибо тебе автор! Но есть вопрос, возможно ли заменить числа на изображения (приравненные к числам). К примеру вместо цифры 2 будет своя картинка, у цифры 4 своя и тд? Сложно ли это реализовать?
Заменить можно
Для этого нужно создать объект, где каждому числу будет соответствовать путь к картинке.
А затем там, где мы добавляем число в html, вместо этого создавать тег img, где будет указан путь до картинки.
Реализовать такое должно быть не сложно.
0:57 как сделать этот пробел?
не понял вопрос...
@@yurakochвторая полоска
Спасибо за видео , все сделала и насладилась процессом. Залила на гитхаб а на телефоне игра не работает , это по тому что прописаны 4 кнопки ( вверх, вниз , вправо , влево )?
Я в видео не добавил реализацию для мобильных устройств. Попробуйте сделать самостоятельно, для этого нужно добавить определение касания и смахивания вверх, вниз, влево и вправо.
@@yurakoch спасибо попробую 😊
Спасибо за отличное видео! Можно в следующих видео немного увеличить шрифт, чтоьы удобнее смотреть с телефона?😊
Попробую)
Но когда шрифт слишком большой, то мне самому уже неудобно
Если будет удобно, то запишу с большим шрифтом
не могу разобраться в чем проблема, но к плиточкам почему то добавляются значения когда они находятся на границе gameboard и ни с какой плиточкой не соединяются (такое чувство что за границей gameboard есть еще плитки которые и дают значение). Не подскажите что делать?
Пришлите мне свой код в телеграме. Без кода тяжело сказать, где у вас ошибка.
Я зашёл,в тупик, не знаю где допустил ошибку, добавил кнопку верх , но при consol.log выходить не массив а сама структура функции
нужен код или побольше контекста
какая кнопка вверх? где console.log? структура какой функции выводится?
я ролик писал давно, уже не помню все его этапы...
@@yurakoch смотрите, consol срабатывает при нажатии кнопки ArrayUp, у вас на ролике выходит массив, а у меня целая функция,как будто в консол я написал его как строку
Напишите, пожалуйста, время, в которое это происходит в ролике
Я посмотрю и постараюсь вам помочь
@@WizInWeb если это во время 22:23
то вот несколько причин
1) убедитесь, что в функции. moveUp вы вызываете slideTiles c grid.cellsGroupedByColumn
2) убедитесь, что в grid.js this.cellsGroupedByColumn = this.groupCellsByColumn();
тут важно именно вызвать метод groupCellsByColumn
@@yurakoch export class Grid {
constructor(gridElement) {
this.cells = [];
for (let i = 0; i < CELLS_COUNT; i++) {
this.cells.push(
new Cell(gridElement, i % GRID_SIZE, Math.floor(i / GRID_SIZE))
);
}
this.cellsGroupedByColumn = this.groupCellsByColumn;
}
getRandomEmptyCell() {
const emptyCells = this.cells.filter((cell) => cell.isEmpty());
const randomIndex = Math.floor(Math.random() * emptyCells.length);
return emptyCells[randomIndex];
}
groupCellsByColumn() {
return this.cells.reduce((groupedCells, cell) => {
groupedCells[cell.x] = groupedCells[cell.x] || [];
groupedCells[cell.x][cell.y] = cell;
return groupedCells;
}, []);
}
}
вот код. вроде все правильно да?
Привет, я захотел сделать управление не на стрелочки, а на WASD. Как мне обработать это независимо от регистра и выбранного языка?
Попробуйте KeyboardEvent.code
Это свойство представляет собой физическую клавишу
Как раз независимо от регистра и выбранного языка
@@yurakoch
Благодарю, отлично работает. Ещё один вопрос: я изучал Python и C#, и захотел попробовать web-разработку. Я хочу начать с HTML, CSS и JavaScript. Какие ресурсы посоветуете для человека, который уже более-менее разбирается в программировании, но не изучал web?(ваше видео первый опыт с html css и js)
Я в телеграмме писал пост про это
Можете посмотреть
t.me/kochinism/181
Здравствуйте, что может быть неправильно, если после 11 минуты ячейки не появились опять..
у вас появились какие-нибудь ошибки в консоли?
с 8 минуты по 11 было написано довольно много кода, поэтому нужно чуть больше информации от вас, чтобы я смог помочь
@@yurakoch никаких ошибок нет, код перепроверен раз 5, все отступы отображаются, а ячейки нет
@@victoriadmitrieva7702 а в html коде есть div блоки для ячеек?
@@yurakoch те 16 див блоков, я удалила, как и было сказано на видео. Остался один див -
@@yurakoch ошибка найдена, спасибо вам за помощь
Видос суперский, отличная подача материала с объяснением и голосом, который не усыпляет. Мне кажется, это идеальный канал для практики на старте изучения JS. Огромное спасибо автору!
А теперь к вопросу: я повторил всё точь в точь, как в ролике (нууу, может быть с совершенно незначительными отклонениями), но когда я запускаю через Лайв Сервер, мой браузер переключается в вечную загрузку старнички, через какое-то время советуя её прикрыть, т.к. она кушает слишком много ресурсов. Есть ли какие-то предположения по этому поводу? Буду очень признателен за помощь
Спасибо
Возможно у вас в коде где-то получилось зацикливание, и браузер не может выйти из вечного цикла
@@yurakoch О, точно, надо будет глянуть, спасибо
Спасибо, отличное видео. У меня проблемка, нужна помощь. Все сделал по видео уроку но моя игра на телефоне не работает но если перейти по вашей ссылке на телефоне работает
Я добавил работу с тачскрином, в ролике не рассказывал про это.
Можете воспользоваться библиотекой hammer js, чтобы быстро добавить работу с тачскрином
Как вы этому научились? ВУЗ? Самостоятельно попробовал js, завис на месяц на основах и толком ничего не понял :D
Я в ВУЗе учился на программиста, только на C#
Потом несколько лет проработал в разных компаниях.
Я писал у себя в телеграмме пост, как бы я сейчас учился на фронтенд. Можете посмотреть по ссылке:
t.me/kochinism/181
@@yurakoch Я смотрел, спасибо. Но у меня такое ощущение, что я скриптовый) В том плане, что понимаю, о чем идет речь, но когда нужно решить другой пример, у меня - ступор. Вы считаете, что реально самому, без профильного образования, освоить язык? Пусть не для работы, а хотя бы для своих целей. Те же самые игрушки писать, автоматизацию для дома.
Вам нужно побольше практики. Порешайте побольше простых задач, повторите на ютубе несколько простых проектов. В итоге вы сможете во всем разобраться без ВУЗа.
@@yurakoch Попробую поискать. Хотя, степик это начальный уровень тоже, но даже там сложновато
Попробуйте простые задачи на сайте Литкод. После них задачи средней сложности. А после них будет намного легче писать игры и приложения.
Круто, где так учат?
Многому научился пока в Яндексе работал)
Добрый вечер
Ща 40 минут Реально разобраться?...... Или уже много чего надо знать?
Сложно сказать
Совсем с нуля будет тяжело, лучше хоть чуть-чуть знать
@@yurakoch
А какую базу? - если в 2ух словах....
Или об этом сказано в видео?
Хотя бы основы верстки и основы работы с js
В любом случае попробуйте посмотреть
Если будет что-то непонятно, то ставьте на паузу и ищите непонятный метод или функцию в интернете
@@yurakoch
Услышал
Что делать если пишет заблокировано CORS
Откройте через LiveServer в VSCode
@@yurakoch О спасибо
Привет, я хотел добавить Рекорд в игру. Как можно это реализовать?
можно считать сумму всех чисел на экране
сохранять это в переменную
чтобы после обновления страницы не потерять значение переменной, то ее можно сохранять в localstorage, а потом читать из localstorage
very nice
почему-то не работает js на импорт и экспорт. писал вместе с вами по видео, но ничего не отображается. скачал ваш проект из гитхаб, но там тоже самое(
Нужно запускать код в локальном сервере.
Чтобы сделать это самым простым способом:
- установите расширение "Live Server" в VsCode,
- в VsCode нажмите правой клавишей мыши на файл index.html,
- выберите "Open in Live Server"
Тогда все должно заработать.
Если вы просто откроете файл index.html в браузере, то получите ошибку доступа:
Access to script at './2048/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
@@yurakoch спасибо за помощь)
@@yurakochу меня та же проблема. Не отображалось. Во сейчас попробую как вы сказали. Можете объяснить почему просто через браузер нельзя?
Импорт/экспорт модулей работает только через HTTP(s). Если вы пытаетесь открыть файл index.html в браузере, то откроете его через протокол file://, а это не HTTP(s).
Не отображаются бэкграунд плиток, которые серые, прозрачные. В чем может быть проблема ?
нужно проверить, что вы добавляете класс cell в файле cell.js
cell.classList.add("cell");
нужно проверить, что вы корректно добавили в стилях название класса .cell в файле style.css
нужно проверить, что нет опечатки стилях
background-color: #444;
может быть незаметная ошибка, когда вместо "c" из латиницы пишется "с" из кириллицы
@@yurakoch спасибо! Сработало, background-color видимо было написано не так
тоже самое
@@dhejjdjfj5703 проверь все вышеперечисленное, у меня background-color было написано неправильно, дебаггер браузера этого не показал :с
Стоит прописать все значения вручную, заново, убедившись, что все строки правильные
Upd: мне помогло
короче, я убрал эту проблему я просто скопировал его код по ссылке и стерел до нужной мне строки и после этого плитки появились, так и не понял в чем была проблема в моем коде, вроде тоже самое что и у него, но по его коду работает а по моему нет
Почему у меня не отображается, хоть я все повторяю за вами , несколько раз заново начинал , вроде прошёлся десятки раз , что я пропуская не пойму , в конце просто серый фон и ничего , единственно под слешь (р) Текс выходит под черный цвет в центре, но квадраты ни как не выделяются
К сожалению, я не смогу так помочь, т к не вижу ваш код.
Нужна более конкретная ошибка и место ошибки, чтобы я что-то мог подсказать.
Скорее всего у вас где-то небольшая опечатка, из-за которой ломается приложение.
@@yurakoch у меня просто серая картинка высвечивается, походу в начале , я что то пропустил, было бы легче скинуть бы вас телеграмме и.т.д
@@yurakoch может это из за этого, стоя не открываю его не в расширении лайв сервисе ?
Попробуйте начать сначала
И найдите момент, в который ваш проект расходится с моим. Скорее всего, это поможет вам даже самостоятельно найти проблему.
Еще можете посмотреть на ошибки в консоли. Это тоже может помочь решить проблему.
@@yurakoch а ни как не вариант скинуть вам код ?
привет, почему решил использовать классовый подход, а не функциональный?
На работе пишу также, поэтому мне такой подход ближе
@@yurakoch а во всех компаниях используют классовый подход ? Просто например если взять тот же реакт там же больше функциональное программирование
Я не знаю про все компании. Я пишу классами в основном. Что-то небольшое пишу функциями)
@@yurakoch понял спасибо за ответ)
А можна якось цю гру поставити на сайт?
да, можно
будет выглядеть вот так yurakoch.ru/2048/
или можно вставить код не в , а в какой-нибудь блок и добавить ему стили от body, тогда помимо игры можно будет добавить на страницу сайта дополнительный контент
@@yurakoch А ви б могли це залити на гітхаб і скинути силочку? Був б дуже вдячний
github.com/YuraKoch/2048
@@yurakoch Дуже дякую!
@@yurakoch через index.html не запускає ігру
Я скачал ваш код через гит хаб, и мне пишет вирусы
Очень странно
Спасибо, получил троян
Привет, при написании функции moveDown() , а точнее this.cellsGroupedByReversedColumn = this. cellsGroupedByReversedColumn.map(column => […column].reverse());
В консоль получаю ошибку : Cannot read properties of undefined ( reading ‘map’) , можешь подсказать , в чем дело ?
Пересматривал момент написания несколько раз , вроде бы не ошибся нигде
at new Grid (строчка именно с этим кодом , который написал выше )
at script.js:6 ( const grid = new Grid(gameBoard);
@@VarCS-ik можно перед this.cellsGroupedByReversedColumn добавить debugger;
и посмотреть, что лежит в this.cellsGroupedByColumn
возможно, функция this.groupCellsByColumn() ничего не возвращает
функция groupCellsByColumn может ничего не возвращать по двум причинам
1. нужно что-то возвращать из функции, т е в теле функции должно быть написано return this.cells.reduce
2. внутри тела reduce нужно тоже обязательно возвращать результат, т е внутри reduce должно быть написано return groupedCells;