Animation target

Animation target

Переходим в HTML

Почему так просто?

Создай в элементе «body» тег «div» и укажи у него класс «container». Внутри тега «div» создай кнопку и укажи ей какое-нибудь название. Например можешь указать «Start the game».

Multiple Choice

Что длеает тег «br»?

• Переводит строчные элементы на новую строчку.

• Создает внутренний отступ у элементов.

• Меняет цвет элементов.

• Создает новые HTML-элементы.

Почему так просто?

Создай тег «br» после элемента «button». Создай тег «h1» и укажи у него название «Score». После этого выйди из элемента «div» и вставь какую-нибудь картинку. PS: на эту картинку наш пользователь будет кликать ;)

Переходим в CSS

Multiple Choice

При помощи какого символа мы можем обратиться к классу в CSS?

• //

• /*

• .

• #

Почему так просто?

Обратись к классу «container» и задай у него свойство «text-align» со значением «center».

Обратись к элементу «body» и задай у него свойство «background-color».

Почему так просто?

Задай нашей кнопочке какой-нибудь цвет текста и цвет заднего фона. Сделай ей рамочку и внутренний отступ со всех сторон.

Почему так просто?

Теперь мы сделаем в нашей рамке разные цвета. Для этого надо воспользоваться CSS-свойством «border-image-source: linear-gradient()». Внутри функции «linear-gradient» нужно указать: цифру + deg и пять каких-нибудь цветов.

Пример: linear-gradient(10deg,red,green,blue,yellow,violet);

После этого указываем свойство «border-image-slice» со значением - 5

Данное свойство поможет нам распредилить все цвета по нашей рамке.

Multiple Choice

Как ты думаешь, что делает CSS-свойство «position»?

• Позволяет изменить размер элемента

• Позволяет изменить позиционирование элемента

• Позволяет создать внешний отступ от других элементов

Multiple Choice

Как ты думаешь, что делает CSS-свойство «animation-name»?

• Дает понять элементу, какую анимацию нужно запускать

• Задает количество повторений анимации

• Задает действия, которые будет выполнять анимация

Multiple Choice

Как ты думаешь, что делает CSS-свойство «animation-iteration-count»?

• Задает рандомные действия для нашей анимации

• Указывает, какую анимацию нужно запускать

• Задает количество повторений анимации

Multiple Choice

Как ты думаешь, какое CSS-свойство поможет установить нам длинну одной анимации?

• animation-name

• counter++

• animation-duration

Почему так просто?

Обращаемся к классу «Game» и указываем у него вот такие команды:

position:relative;

 animation-name: moving;

 animation-iteration-count: infinite;

  animation-duration: 5s;

Почему так просто?

Обратись к элементу «img» и укажи у него CSS-свойство «cursor» со значением «grab».

Если ты хочешь поставить какой-нибудь другой курсор, то можешь просто загуглить ;)

Если не получается найти, то вот ссылочка: https://www.w3schools.com/cssref/pr_class_cursor.asp

Multiple Choice

При помощи какой конструкции мы можем создать анимацию в CSS?

• animation-name

• @keyframes

• createAnimation

Почему так просто?

Напиши конструкцию «@keyframes», после этого укажи название «moving».

Мы указали это название, потому что использовали его у класса «Game» в CSS-свойстве «animation-name».

После этого указываем фигурные скобочки.

Почему так просто?

Мы будем задавать нашу анимацию в процентах, поэтому будем указывать значения: 0%, 25%, 50%, 75%, 100%.

В скобочках напиши «0%{}».

После этого напиши такую же конструкцию со всеми процентными значениями.

Почему так просто?

Укажи внутри скобок у первого процентного значения CSS-свойства: background-color:#2ecc71; left:0px; top:0px;

Укажи внутри скобок у второго процентного значения CSS-свойства: background-color:#1abc9c; left:50%; top:0px;

Укажи внутри скобок у третьего процентного значения CSS-свойства:

background-color:#3498db; left:95%; top:0px;

Укажи внутри скобок у четвертого процентного значения CSS-свойства:

background-color:#9b59b6; left:50%; top:0px;

Укажи внутри скобок у пятого процентного значения CSS-свойства:

background-color:#34495e; left:0px; top:0px;

Почему так просто?

Создай переменную «target» и присвой ей выбранный элемент «img».

Создай переменную «text» и присвой ей выбранный элемент «h1».

Создай переменную «start» и присвой ей выбранный элемент «button».

Создай переменную «score» и присвой ей 0

Почему так просто?

Добавь кнопочке слушатель событий c действием «click». Сделай так, чтобы при нажатии на кнопочку вызывалась вот такая конструкция: target.classList.add("Game");

Почему так просто?

После этого создай слушатель событий у элемента, который находится в переменной «target». Задай ему действие «click». Сделай так, чтобы при нажатии на картинку выполнялся вот такой код:

 score++;

 text.innerText = score;