Сегодня особенный день для тех, кто только начинает работать в мире JavaScript. Единственный способ освоить это ремесло - тренироваться. И сегодня мы собираемся испачкать руки и начать совершенствовать свои навыки манипуляции с DOM. Как? Путем создания простой аркадной игры, используя только ванильный JavaScript.

Несмотря на то, что этот пост предназначен для начинающих и новичков, это не значит, что более опытные разработчики не найдут в нем ничего полезного.

Что мы освоим

  • базовый Css и JavaScript
  • базовый Flexbox на уровне раскладки страницы
  • динамическое манипулирование DOM при помощи JavaScript
  • прохождение

Условия задания

exampleДемо аркадной игры на ванильном javaScript

Аркадная игра имеет следующие требования:

  • она должна содержать изображение как фон и кликабельное изображение утки
  • когда пользователь кликает по утке должны происходить две вещи:
    1. счетчик должен увеличиться на единицу;
    2. утка должна переместиться на случайную позицию
  • Игра должна быть построена с использованием спецификации ES6
  • Раскладка должна быть сверстана с использованием Flexbox

Просто? Ну приступим.

Первым делом, при планировании решения поставленной задачи, мы должны подумать о подходе, который будем использовать и о последовательности своих действий. Это означает, что нам надо подробно продумать каждый, шаг необходимый для выполнения всех требований. Давайте разбираться с этим.

Чтобы решить проблему, мы будем выполнять следующие действия по порядку.

Разделяй и властвуй!

  1. Реализовать макет, используя ресурсы (фоновое изображение и утку), а также поле счетчика
  2. Что мне нужно в момент клика по утке? Мне нужно навесить на нее обработчик событий (addEventListener), который будет срабатывать при клике по утке
  3. Создать функцию которая будет увеличивать счет при клике на утке
  4. Создать функцию которая будет перемещать утку в случайное место на поле

Приступаем без лишних раздумий.

1. Макет

Наш макет (index.html) будет содержать в себе div в качестве контейнера, в котором будет находиться изображение фона и изображение утки. Также в нем будет элемент с классом scoreContainer, который будет содержать в себе текст Score и непосредственно сам счетчик.

<div class="container">
  <img src="https://bit.ly/2Q4q14a" />
  <img id="duck" src="https://bit.ly/2KQJVKc" alt="duck" />
  <div class="scoreContainer">
    <div id="score-text">Score</div>
    <div id="score-counter">0</div>
  </div>
</div>
/*Make any img element responsive*/
img {
  max-width: 100%;
}
/*Set a fixed size for width and height and in an absolute position*/
#duck {
  margin: 50px;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 100px;
}
/*Style for the Score container*/
.scoreContainer {
  background-color: black;
  width: 15%;
  height: 15%;
  color: #ffffff;
  top: 5%;
  right: 5%;
  border: 2px solid greenyellow;
  border-radius: 10px;
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
}
#score-text {
  font-size: 1.5em;
}
#score-counter {
  font-size: 3.1em;
  font-weight: bold;
  color: #06e515;
}

2. JavaScript

2.1 Добавление обработчика событий

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

//Get the target element
const duck = document.querySelector("#duck");
//Add the click event listener
duck.addEventListener("click", () => {
  //Dont forget call the functions here 
  increaseScore();
  moveDuck();
});

2.2 Создаем функцию для увеличения текущего счета

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

//Increase score by 1
const increaseScore = () => {
  //Get the content of the target element. The current value for score
  const score = document.querySelector("#score-counter").innerHTML;
  //Get the element to increase the value
  const scoreHTML = document.querySelector("#score-counter");
  //Cast the score value to Number type
  let count = Number(score);
  //Set the new score to the target element
  scoreHTML.innerHTML = count + 1;
};

2.3 Создаем функцию для перемещения утки в случайное место на поле

Пришло время перемещать утку. Однако, поскольку утка будет перемещаться случайным образом, будет правильно создать вспомогательную функцию для получения случайного числа, которое мы позже будем использовать для установки случайного положения. Давайте создадим эту функцию:

//Get a random number
const getRandomNum = (num) => {
  return Math.floor(Math.random() * Math.floor(num));
}

Теперь мы собираемся создать функцию непосредственно для перемещения утки. Мы используем свойство innerWidth, чтобы получить внутреннюю ширину окна в пикселях, а свойство innerHeight, получает внутреннюю высоту окна в пикселях. Кроме того, мы используем функцию getRandomNum, чтобы установить случайное значение для свойств top и left, влияющих на вертикальное и горизонтальное положение утки.

//Move the duck randomly 
const moveDuck = () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  duck.style.top = getRandomNum(w) + "px";
  duck.style.left = getRandomNum(h) + "px";
};

Это все на сегодня! Я надеюсь, что вы следовали этому простому руководству и получили представление о манипулировании DOM.

Готовая программа

Спасибо за то, что прочли до конца! Я надеюсь, что этот пост был полезен для вас.

UPD (от переводчика, то есть меня =))

Я немного пофиксил итоговый вариант программы (надеюсь автор будет не против).

  • Растянул контейнер-обертку на весь экран и сделал для него нормальный фон
  • Функцию получения случайных координат для изображения утки подвязал не на координаты экрана, а на координаты блока-обертки, что бы утка не улетала за границы экрана
  • Добавил переменную для счетчика