JavaScript 30 - День 30 Учебные заметки

30-й день JavaScript 30 Веса Боса завершил отличный курс созданием игры Ударь крота. В этом уроке не было много нового материала, вместо этого он закрепил то, что мы узнали. И было весело играть в игру после того, как я закончил!

Мы начали с выбора классов и именования переменных.

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;

Мы хотели рандомизировать время, когда каждый крот высовывал голову.

function randomTime(min, max) {
   return Math.round(Math.random() * (max - min)+ min);
}

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

function randomHole(holes){
   const idx = Math.floor(Math.random() * holes.length);
   const hole = holes[idx];
   if(hole === lastHole){
      return randomHole(holes);
   }
   lastHole = hole;
   return hole;
}

Заставьте SVG-изображение крота выглядывать из дыры, переключив класс CSS и связав его со случайной дырой и временем.

function peep(){
   const time = randomTime(200,1000);
   const hole = randomHole(holes);
   hole.classList.add('up');
   setTimeout(() => {
      hole.classList.remove('up');
      if(!timeUp) peep();
   }, time);
}

Функция для переустановки игры.

function startGame() {
   scoreBoard.textContent = 0;
   timeUp = false;
   score = 0;
   peep();
   setTimeout(() => timeUp = true, 10000);
}

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

function bonk(e) {
   if(!e.isTrusted) return; //cheater!
   score++;
   this.classList.remove('up');
   scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));

Это был отличный урок, чтобы закончить курс. Я чувствую, что могу сам написать такую ​​программу.

Я не делал по одному уроку в день. На прохождение курса у меня ушло 6 недель. Я никогда не делал больше одного урока в день, а последние 12 уроков делал в дни подряд.

Для меня, как для начинающего программиста, JavaScript 30 был как раз тем, что нужно. Я только что закончил изучение двух длинных руководств по JavaScript и продвинутому CSS. Хотя эти курсы познакомили меня со многими новыми концепциями, я не был уверен, как все это сочетается друг с другом, чтобы на самом деле что-то сделать. Уэс Бос объяснил, как все части четко и лаконично сочетаются друг с другом. У него также есть веселый, беззаботный стиль, который я оценил. И Бос предлагает этот курс БЕСПЛАТНО, без каких-либо условий. Людям, которые только заканчивают дидактические руководства по веб-разработке, я настоятельно рекомендую JavaScript 30 в качестве следующего шага.

Чтобы следить за моим блогом через этот курс с самого начала.