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

Поделиться
HTML-код
  • Опубликовано: 29 янв 2025

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

  • @alexeyandriyanenko4823
    @alexeyandriyanenko4823 6 лет назад +1

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

  • @uaplatformacomua
    @uaplatformacomua 6 лет назад +5

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

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

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

  • @Wamuradoff
    @Wamuradoff 6 лет назад +1

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +1

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

  • @vanzo16
    @vanzo16 6 лет назад +3

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

  • @dadstreets
    @dadstreets 6 лет назад +1

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

  • @ИванПрогер
    @ИванПрогер 4 года назад

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

  • @chelobas14
    @chelobas14 4 года назад +1

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

  • @romanshvayko211
    @romanshvayko211 6 лет назад +2

    СПАСИБО

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

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

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

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

  • @anvarakbarov8784
    @anvarakbarov8784 6 лет назад +2

    Жду 2 урока

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

    интересно!

  • @romanshvayko211
    @romanshvayko211 6 лет назад +1

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад

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

    • @romanshvayko211
      @romanshvayko211 6 лет назад

      @@ArtemPrygin-h5g жду)

  • @ДанилЛямкин-ъ9ь
    @ДанилЛямкин-ъ9ь 6 лет назад +2

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +2

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

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

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

  • @it_centr
    @it_centr 6 лет назад

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

    • @YuliiaJV
      @YuliiaJV 5 лет назад +1

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

    • @it_centr
      @it_centr 5 лет назад

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

  • @calm_night
    @calm_night 6 лет назад +6

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

    • @calm_night
      @calm_night 6 лет назад

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +4

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

    • @ДаниилКирик-л8е
      @ДаниилКирик-л8е 6 лет назад

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

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

      @@ДаниилКирик-л8е деньги

  • @js_games_for_dummies
    @js_games_for_dummies Год назад

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

  • @sashastepakov9193
    @sashastepakov9193 6 лет назад

    Так, вроде, проще:
    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);
    }
    }

  • @ВасилийКарнеев-р7э
    @ВасилийКарнеев-р7э 6 лет назад +1

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

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

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад

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

  • @ВладиславБойченко-н2у

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +1

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

  • @rodionnikiforchuk2408
    @rodionnikiforchuk2408 6 лет назад

    когда 2 урок?

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад

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

  • @taiserFerst
    @taiserFerst 5 лет назад

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

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

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

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

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

    • @Torpedo-ZIL
      @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
      @melonwark1 2 года назад +1

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

  • @slark9638
    @slark9638 6 лет назад +1

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад

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

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

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

  • @MoguchajaMblwka
    @MoguchajaMblwka 5 лет назад

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

  • @user-bombuser
    @user-bombuser 6 лет назад

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +2

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

  • @js_games_for_dummies
    @js_games_for_dummies Год назад

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

  • @alexgv7352
    @alexgv7352 6 лет назад +1

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

    • @ArtemPrygin-h5g
      @ArtemPrygin-h5g 6 лет назад +11

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

  • @mx1xmx
    @mx1xmx 6 лет назад

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

    • @АндрейНемобатор
      @АндрейНемобатор 6 лет назад +2

      Человек создавал код и записывал на видео. На этом этапе у всех это грубые наброски. Главное - идея. А рефакторить рабочую идею - много ума не надо. Благодаря таким видео я учу 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
      @ArtemPrygin-h5g 6 лет назад +1

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