ballsObjects

ballObjects

Создай новый проект

Зайди на сайт https://repl.it/ и создай новый проект

Начинаем с нашего любимого HTML

Привычные действия

Добавляем тег «canvas» в элемент «body».

Немножко стиля

Привычные действия

Добавь элементу «canvas» рамку.

Самое жесткое

Привычные действия

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

Poll

Как думаешь, какой тип данных лучше всего тебе подойдет для хранения вот таких параметров: x-координату мяча, y-координату мяча, радиус мяча, цвет мяча? PS: на этот вопрос ты можешь не знать ответа

• переменная

• список

• функция

• объект

Poll

Как ты думаешь, какая штука помогла бы нам присваивать каждому шарику свои значения ( x-координату мяча, y-координату мяча, радиус мяча, цвет мяча)?

PS: на этот вопрос ты можешь не знать ответа

• мощная переменная

• конструктор объектов

• цикл

Что такое объект

Объект - это очень удобный тип данных. Давайте посмотрим на пару примеров, чтобы понять как это работает :)

Как создать объект

Чтобы создать объект, мы создаем переменную и присваиваем ей вот такие скобки - {}.

Пример: let apple = {}

А что дальше?

Конечно, мы можем присваивать какие-то значения нашему объекту. Для этого используется ключ (локальная перменная), которой присваивается какое-то значение.

Пример: let boy = {name: "Vasja", age: 100}

Multiple Choice

Выберите объект с именем «phone» и ключом «model» со значением «Iphone1000».

• let phone{model:"Iphone1000"}

• let auto = {model:"Firrari"}

• let phone = {model:"Iphone1000"}

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

Давайте рассмотрим пример:

let persone = {name: "Darth Vader", age: "89"}

Чтобы получить значение имени у данного объекта «persone», мы можем написать: persone.name

Если мы хотим получить возраст, то пишем: persone.age

Multiple Choice

Какая конструкция поможет получить значение ключа «name» у объекта «fruit»?

Объект «fruit»:

let fruit = {

name: "apple"

}

• fruit.name

• fruit.name()

• fruit.age

• name.fruit

Поздравляем

Ты становишься все более крутой программисткой/крутым программистом. Объекты - это не особо легкая тема, но ты уже смог(ла) немного освоить ее.

Что же такое конструктор объектов?

Конструктор объектов - это штука, которая позволяет нам создавать объекты с ключами, которые мы задали.

Дальше мы посмотрим на пару примеров, а потом начнем делать наш конструктор шариков ;)

Multiple Choice

C помощью какого ключевого слова мы создаем функцию?

• func

• const

• let

• function

Multiple Choice

В какие скобочки мы пишем параметры нашей функции?

• ()

• {}

• []

• ({})

Хватит уже теории

Создай функцию с именем «ball» и укажи у нее параметры: x, y, radius, color, speedX, speedY

Сам хочу

Напиши конструкцию: this.x. Присвой этой конструкции переменную «x».

Сам хочу

Создай по такой же логике конструкции: this.y, this.radius, this.color, this.speedX, this.speedY. Присвой этим переменным значения: y, radius, color, speedX, speedY.

В первый раз

Создай свой первый метод с именем «move».

Для этого напиши: this.move. Присвой данной конструкции функцию.

Multiple Choice

При помощи какой конструкции мы задаем условие в программировании?

• if/else

• for

• let

• c.beginPath()

Уже умею

Создай в методе «move» if-блок и укажи у него вот такое условие: this.x + this.radius > canv.width || this.x - this.radius < 0

Multiple Choice

Вспомни, что обозначает вот этот символ - ||

• Это логическое или

• Это две палки от деда

• Это сложная конструкция для крутых прогеров

• Это создание новой переменной

Уже умею

Укажи в if-блоке вот такую конструкцию: this.speedX = -this.speedX;

Уже умею

Создай в методе «move» еще один if-блок и укажи у него вот такое условие: this.y + this.radius > canv.height || this.y - this.radius < 0

Уже умею

Укажи в if-блоке вот такую конструкцию: this.speedY = -this.speedY;

Уже умею

Добавь в метод «move» вот такие конструкции:

this.x += this.speedX;

 this.y += this.speedY;

this.draw()

Уже умею

Создай еще один метод у конструктора объектов «ball». Для этого напиши конструкцию: this.draw. Присвой этой конструкции функцию.

Multiple Choice

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

• c.strokeStyle

• c.fillStyle

• c.color

Multiple Choice

При помощи какой конструкции мы можем залить наш круг каким-нибудь цветом?

• c.fill()

• c.fillColor()

• c.colorful()

Уже умею

Добавь методу «draw» конструкции:

c.fillStyle = this.color;

c.fill()

c.beginPath();

c.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);

c.stroke()

Уже умею

Выйди из блока конструктора объектов и создай функцию «randomY».

Multiple Choice

Для чего мы используем слово «return» в нашей функции?

• Чтобы создавать переменные в функции

• Чтобы передавать параметры в функцию

• Чтобы возвращать какие-то значение после вызова функции

Уже умею

Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию, которая выдаст тебе рандомное число от 0 до высоты канваса.

Уже умею

Cоздай функцию «randomX». Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию, которая выдаст тебе рандомное число от 0 до ширины канваса.

Уже умею

Cоздай функцию «randomColor». Создай в этой функции три переменных: red, green, blue. Присвой этим переменным конструкцию, которая задаст рандомное число от 0 до 255.

Уже умею

Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию: "rgba(" + red + "," + green + "," + blue  + ")"

Уже умею

Cоздай функцию «randomSpeedY». Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию: Math.floor(Math.random() * 10) + 1

Уже умею

Cоздай функцию «randomSpeedX». Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию: Math.floor(Math.random() * 10) + 1

Уже умею

Cоздай функцию «randomRadius». Создай в этой функции конструкцию «return». После этого на той же строчке, где ты написал(а) return, укажи конструкцию: Math.floor(Math.random() * 20) + 1

Уже умею

Создай список с именем «ballArr».

Уже умею

Создай цикл со счетчиком. Сделай так, чтобы цикл выполнялся 10 раз.

Уже умею

Внутри цикла запиши вот такую конструкцию:

ballArr.push(new ball(randomX(), randomY(), 

randomRadius(), randomColor(), randomSpeedX(), 

randomSpeedY()))

Уже умею

Напиши функцию «setInterval». Не забудь указть ей два параметра: function и 10. Укажи внутри функции «setInterval» цикл со счетчиком. Сделай так, чтобы цикл выполнялся столько раз, сколько элементов находится в списке «ballArr».

Уже умею

Внутри цикла запиши вот такую конструкцию:

ballArr[i].move()