«Змейка» на JavaScript для новичков | Урок 1 | Академия вёрстки

Подписаться 146 тыс.

Просмотров 33 тыс.

50% 1

Это первый урок из плейлиста «Змейка на JavaScript» от Артёма Прыгина. Напишите в комментариях, как вам подача материала.
Ссылка на плейлист: • Змейка на JavaScript д...
В этом уроке мы создадим поле, разобъём его на ячейки и присвоим координаты каждой из ячеек.
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...

Опубликовано:

17 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@uaplatformacomua 5 лет назад

Класс!!! Я ещё в самом начале js, но это круто!

@user-mx9up4fd8q Год назад

Все еще учите?

@vanzo16 5 лет назад

спасибо за урок

@romanshvayko211 5 лет назад

СПАСИБО

@Wamuradoff 5 лет назад

очень круто. надеюсь после окончания всех уроков хотя бы не много начну понимать JS. Ото очень сложно понять. и это единственный урок пока где на реально примере увидел как работает цикл. спасибо. буду ждать второго урока

@ArtemPrygin-h5g 5 лет назад

Спасибо за комментарий. Уроков всего три по змейке, вряд ли они тебе помогут освоить основы js целиком, но паре-тройке фишек ты научишься

@alexeyandriyanenko4823 5 лет назад

Я уже написал, переписал и понял. Отличная подача! Хочу ещё!)

@dadstreets 5 лет назад

Спасибо за урок,

@user-sm2fh6ms8o 4 года назад

очень круто спасибо

@levkrinitskych1 3 года назад

класный канал!!!

@DerAleksey 4 года назад

интересно!

@ДмитрийМорошан-с2ш 3 года назад

Переписал я значит, ну норм, но ничего про const, переиспользуются те же конструкции... DRY (don't repeat yourself) тут не работает и чтоб окончательно запутать.. одноимённые переопределяемые переменные =) ну зато прокачает пока разбираешься.. начинаешь врубаться!))

@anvarakbarov8784 5 лет назад

Жду 2 урока

@calm_night 5 лет назад

Лучше сперва наполнить узел поля клетками, а потом добавить его в body, чем 100 раз трогать DOM.

@calm_night 5 лет назад

А координаты точкам я бы задал, высчитывая и округляя offset от родителя, ну это уже кто как хочет)

@ArtemPrygin-h5g 5 лет назад

Спасибо за комментарий, хороший совет

@user-di9un4uh4q 5 лет назад

@@ArtemPrygin-h5gпомогите, пожалуйста. У меня Поле не создаётся.

@Shubert-ys9hm 5 лет назад

@@user-di9un4uh4q деньги

@romanshvayko211 5 лет назад

Надеюсь 2 урок будет)

@ArtemPrygin-h5g 5 лет назад

в понедельник должен выйти второй урок, подлиннее и посложнее

@romanshvayko211 5 лет назад

@@ArtemPrygin-h5g жду)

@chelobas14 4 года назад

У меня пишет Uncaught TypeError: Cannot read property 'appendChild' of null. Как исправить?

@sashastepakov9193 5 лет назад

Так, вроде, проще: let field = document.createElement('div'); document.body.appendChild(field); field.classList.add('field'); for(let i=10; i > 0; i--){ for(let j=0; j < 10; j++){ let excel = document.createElement('div'); field.appendChild(excel); excel.classList.add('excel'); excel.setAttribute('x', j); excel.setAttribute('y', i); } }

@drochunka 3 года назад

подскажите что у меня не так, не отображается голова и тело let field = document.createElement('div'); document.body.appendChild(field); field.classList.add('field'); for (let i=1; i

@user-rv2yz8ox4d 5 лет назад

Всё здорово, но сделай пожалуйста что то со звуком.

@user-lj2om3xp2l 5 лет назад

А правильно ли добавлять такие атрибуты с точки зрения валидности? Может лучше добавлять как data?

@ArtemPrygin-h5g 5 лет назад

data лучше, тут для простоты и наглядности акцент на другом

@artist3329 3 года назад

автор, будьте любезны... код на css... первые три строчки, border box. я пользуюсь atom редактором и почему то не хочет он работать..постояно выдает ошибки. я так понимаю вы пользуетесь VSC... но как бы я не настраивал VSC не работает многое как автодополнение в коде. Я потратил немало времени на его настройку и в конце концов остановился на атом. вопрос...можно ли как то написать эти три строчки на атом как то иначе?... второй вопрос плиз.... нужны ли какие то доп плагины ндля джаваскрипта? я поставил что мог по некоторым видео для разработки на джавескрипте, но когда ввожу ваш код джавыскрипта то ввожу почти каждый символ.... явно что-то не работает автоматом.... я начинающий в веб разработке. Пробовал так же вебсторм, но эта среда просто пожиратель оперативки(свыше 1.5гига и виснет не по-детски). потому остановился на атом. Благодарю за ответы.

@it_centr 5 лет назад

"Go live" (1:32) где такое взять? у себя в VSC не нашел. За урок спасибо!

@YuliiaJV 5 лет назад

Надо усановить расширение в вс кодере

@it_centr 5 лет назад

@@YuliiaJV спасибо, разобрался уже :-)

@js_games_for_dummies Год назад

А почему x и y равны 1 и 10 а не нулям?

@user-js4zc8yi7m 5 лет назад

А canvas не лучше использовать в данном примере?

@ArtemPrygin-h5g 5 лет назад

Не уверен, что canvas это тема для новичков, но возможно ты и прав, спасибо за комментарий

@slark9638 5 лет назад

Материал хороший.Ну есть проблема.Ты не объясняешь за что отвечает и как работает строка.

@ArtemPrygin-h5g 5 лет назад

Подскажи, какие строчки тебе не понятны больше всего?

@АлександрБравис-с3о 5 лет назад

Артем Прыгин мне немного не понятно, это es6?

@ПашаЛоторев 5 лет назад

Как добавить еще измерение, сделав ее трехмерной?

@ArtemPrygin-h5g 5 лет назад

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

@Torpedo-ZIL 4 года назад

Решил написать за автором. На JS мне эта змейка показалась лёгкой для понимания. Всё делал 1 в 1 так как автор. И в итоге у меня 1. Не по 10 ячеек, как у автора в окне, а то по 3, то по 2. 2. Не прописываются в диве координаты 3. Когда я запускаю консоль - пишет ошибку Вот такая жесть. Хотел написать автору, но у него фейсбука нет. А вк у меня не работает.

@Torpedo-ZIL 4 года назад

И ещё - к тому же в самом коде непонятны вот эти строчки: let field = document.createElement('div'); document.body.appendChild(field); field.classList.add('field'); Откуда они здесь и почему - автор (великий писарь) не объяснил. Ну вообщем не змейка, а полная жесть - это не для начинающего.

@Torpedo-ZIL 4 года назад

Код: let field = document.createElement('div'); document.body.appendChild(field); field.classList.add('field'); for(let i=1; i 10){ x = 1; y--; } excel[i].setAttribute('posX', x); excel[i].setAttribute('posY', y); x++; }

@melonwark1 2 года назад

@@Torpedo-ZIL Это ты пока просто тупенький, через годик будешь писать что код не очень и можно было сделать лучше

@DogAndKiller 4 года назад

Зачем классы создал?

@MoguchajaMblwka 4 года назад

А у кого-нибудь еще игра зависает начисто после 10-15ти съеденных мышей?

@rodionnikiforchuk2408 5 лет назад

когда 2 урок?

@ArtemPrygin-h5g 5 лет назад

В понедельник 28.01 вечером

@js_games_for_dummies Год назад

Змеи едят мышей, кот не нужен.

@user-bombuser 5 лет назад

А в одном цикле нельзя было?

@ArtemPrygin-h5g 5 лет назад

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

@vilka_v_ass 5 лет назад

Ужасный звук, слушать не возможно

@ArtemPrygin-h5g 5 лет назад

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

@rulique8193 5 лет назад

не слушай)

@rishatgaripov6527 Год назад

По мне как озвучка из фильмов 90-х))

@mx1xmx 5 лет назад

В чём проблема использовать вложенный цикл вместо этого чертового условия при каждом проходе? Хреновый ты программист

@user-fd2gu6ms4l 5 лет назад

Человек создавал код и записывал на видео. На этом этапе у всех это грубые наброски. Главное - идея. А рефакторить рабочую идею - много ума не надо. Благодаря таким видео я учу js. Ещё недавно для меня js был отдельно а разметка отдельно. А вот сейчас придумал как сделать лучше. Спасибо автору и вам за идею. const field = document.createElement('div') field.classList.add('field') document.body.appendChild(field) for(let y = 10; y > 0; y--) { for(let x = 1; x < 11; x++) { let excel = document.createElement('div') excel.classList.add('excel') excel.setAttribute('posx', x) excel.setAttribute('posy', y) field.appendChild(excel) } }

@ArtemPrygin-h5g 5 лет назад

Ты прав, вложенный цикл и короче, и оптимальнее. В любом случае, у каждого есть возможность сократить и оптимизировать код, так как он далек от идеала и тут есть что совершенствовать

@alexgv7352 5 лет назад

В том видео, с которого ты спиздил идею, парень пишет эту змейку за 3 минуты

@ArtemPrygin-h5g 5 лет назад

Копировать чью-то идею - это не интересно. Реализацию я придумал с нуля и она далека от идеала. И, к сожалению, я не понимаю о каком именно видео речь, скинешь? В любом случае, сейчас сотни или тысячи различных вариантов реализации данной игры, так что неудивительно, если какие-то из них чем-то похожи друг на друга