Increasing circle and bouncing ball

Увеличивающийся круг

Poll

У кого есть проект «Летающий шарик»

• Есть

• Нет

Не расстраивайся!

Если у тебя нет проекта, то ментор пришлет инструкцию, как его получить.

Поехали!

Multiple Choice

Какой метод мы используем для добавление какого-то события на сайт?

• addAnAction()

• addEventListener()

• addeventlistener()

• actionActivation()

Multiple Choice

Как вы думаете, какой элемент отвечает за браузерное окно, в котором мы работаем?

• GO

• webPage

• screen

• window

Multiple Select

Какой параметр мы можем передать в функцию метода «addEventListener»?

• e

• event

• hello

• eventus

Я хочу сам!

Попробуйте самостоятельно добавить действие «mousemove» элементу «window». Укажите в функции параметр «e».

Multiple Choice

Каким образом мы можем получить координату «x» в такой конструкции: window.addEventListener("mousemove",function(e){

}) ?

• e.getX

• y.e

• e.x

• e.elem

Я хочу сам!

Попробуйте самостоятельно создать переменную mouseX и mouseY в функции метода «addEventListener». Присвойте этим переменным значения x и y события «mousemove».

Я хочу сам!

Создай самостоятельно переменную «maxRadius» со значением больше 20.

Multiple Choice

Какая конструкция проверит что maxRadius больше 40?

• if(maxRadius != 40)

• if(maxRadius < 40)

• if(maxRadius > 40)

• else

Я хочу сам!

Добавь в функцию элемента «setInterval» еще одно условие. Запиши в скобках условия: mouseX - circleX < 50.

Multiple Select

Какие логические операторы есть в JavaScript?

• ||

• &

• &&

• or

• !=

Multiple Choice

При каких значениях x код в блоке «if» сработает в этой конструкции: if(x > 0 && x > 10) {console.log(true)}.

• 0

• 11

• 10

• -10

Я хочу сам!

Попробуй воспользоваться логическим оператором «&&». Добавь после конструкции «mouseX - circleX < 50» оператор «&&». После этого добавь еще одну конструкцию «mouseX - circleX > -50». Не забудь поставить оператор «&&» после нее. После этого добавь такие же конструкции, используя переменные: «mouseY» и «circleY». Не забудь поставить оператор «&&» между двумя конструкциями.

Я хочу сам!

Добавь в предыдущий if-блок еще один if-блок. В условии данному блоку укажи: если переменная «circleRadius» меньше чем переменная «maxRadius», то прибавляй к переменной «circleRadius» единичку.

Multiple Select

Каким образом мы можем увеличить переменную «circleRadius» на 2?

• circleRadius += 2

• circleRadius ++

• circleRadius = circleRadius + 2

• circleRadius +++

Я хочу сам!

Теперь нужно добавить условие «else». Оно должно идти сразу после if-блока.

Решим небольшую задачку.

У нас есть шестнадцатилетний мальчик Вася. Он очень хочет попасть на концерт своей любимой группы. Посещение концерта разрешено только с 18 лет. Создайте проверку на возраст, используя логический оператор «!=» - неравно. Возраст Васи записан в переменную «age».

Я хочу сам!

Переходим обратно в самый верх кода и создаем переменную «normalRadius». Задаем этой переменной какое-нибудь значение.

Я хочу сам!

Теперь нужно добавить if-блок в условие «else». Укажите условие if-блоку: если переменная «circleRadius» неравна переменной «normalRadius», то вычитаем от переменной «circleRadius» 1.

Физика мяча

Я хочу сам!

Добавляем тег «canvas» в элемент «body». Не забываем, что нужно нажать на вкладку «index.html».

Я хочу сам!

Добавляем тег «canvas» в элемент «body». Не забываем, что нужно нажать на вкладку «index.html».

Multiple Choice

Что мы обычно добавляем элементу «canvas» в CSS, чтобы увидеть его?

• background-color

• border

• color

• padding

Я хочу сам!

Добавь элементу «canvas» рамку. Не забудь перейти во вкладу «style.css».

Я хочу сам!

Создай переменную «canv» и присвой ей выбранный элемент «canvas». Сделай так, чтобы элемент «canvas» занимал весь экран редактора. Создай переменную «c» и присвой ей элемент «canvas» с методом «getContext("2d")».

Я хочу сам!

Создаем переменные: circleX, circleY, speedY, circleRadius. Присваиваем им какие-нибудь реальные значения. Создаем еще две переменные: gravity и cof. Присваиваем им значения 0.1 и 0.9.

Multiple Choice

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

• setDelay()

• setTimeout()

• setInterval()

• setRepeater()

Я хочу сам!

Создаем функцию «setInterval()». Указываем вторым параметром у этой функции значение «10».

Multiple Choice

Какой метод мы можем использовать для стирания элементов в «canvas»?

• clearRect()

• arc()

• beginPath()

• stroke()

Я хочу сам!

Добавь метод «clearRect()» в функцию элемента «setInterval()». Сделай так, чтобы данный метод стирал все элементы в canvas. Добавь в функцию элемента «setInterval()» команды для рисования круга. Не забудь использовать в методе «arc» переменные, которые ты создал(а) выше :)

Multiple Choice

Какую координату мы должны изменять, чтобы наш круг двигался вверх или вниз?

• y

• x

• z

• w

Я хочу сам!

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

Poll

Когда наш круг летит вниз, координата «y» увеличивается или уменьшается?

• Увеличивается

• Уменьшается

• Не знаю

Я хочу сам!

Воспользуйся if-блоком и запиши туда такое условие: если переменная «circleY» плюс переменная «circleRadius» больше высоты элемента «canvas», то переменная «speedY» равняется минус переменная «speedY» умноженная на переменную «cof».

Я хочу сам!

После if-блока нужно создать условие «else» и записать туда выражение, чтобы переменная «speedY» увеличивалась на переменную «gravity».