colorfullCollision

colorfullCollision

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

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

Начинаем разработку с HTML

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

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

В этот раз мы пропускаем CSS

Зато начинаем плотную работу в JS

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

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

Multiple Choice

Вспомни с каким типом данных ты познакомилась(лся) на прошлом уроке?

• список

• цикл

• объект

• hash-map

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

Создай конструктор объектов с именем «sqares». Передай в конструктор вот такие параметры: x, y, w, h, speedX, speedY, color.

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

Внутри конструктора создай локальные переменные для объектов. Для этого воспользуйся ключевым словом this.

Пример: this.x = x

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

Создаем метод «update».

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

Создаем в этом методе if-блок. Указываем if-блоку вот такое условие: this.x + this.w > canv.width || this.x - this.w < 0

Если условие выдает значение «true», то выполняем вот такую команду:

this.speedX = -this.speedX;

Multiple Choice

Для чего нужно условие: this.x + this.w > canv.width || this.x - this.w < 0 ?

• Чтобы прямоугольник не улетал за канвас вправо и влево

• Чтобы прямоугольник двигался

• Чтобы прямоугольник сталкивались друг с другом

• Чтобы прямоугольник не улетал за канвас вверх или вниз

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

Выходим из if-блока и создаем в этом методе еще один if-блок. Указываем if-блоку вот такое условие: this.y + this.h > canv.height || this.y - this.h < 0

Если условие выдает значение «true», то выполняем вот такую команду:

this.speedY = -this.speedY;

Multiple Choice

Для чего нужно условие: this.y + this.h > canv.height || this.y - this.h < 0 ?

• Чтобы вовремя менять цвет прямоугольника

• Чтобы прямоугольник не улетал за канвас вверх и вниз

• Чтобы проверить прямоугольники на столкновение

• Чтобы добавить пафоса коду

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

Выходим из if-блока. Внутри метода указываем вот такие команды:  this.x += this.speedX

 this.y += this.speedY

this.draw()

Multiple Choice

Что делает команда: this.x += this.speedX?

• Увеличивает скорость движения прямоугольника

• Двигает прямоугольник по горизонтали

• Двигает прямоугольник по вертикали

• Меняет цвет прямоугольника

Multiple Choice

Что делает команда: this.y += this.speedY?

• Проверяет прямоугольники на столкновения друг с другом

• Создает множество прямоугольников

• Служит запуском программы

• Двигает прямоугольник по вертикали

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

Создаем метод «draw».

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

Пишем в данные метод вот такие команды:

c.fillStyle = this.color

        c.fill()

        c.beginPath()

        c.rect(this.x,this.y,this.w,this.h)

        c.stroke()

Multiple Choice

Что делает метод «rect»?

• Создаёт линию

• Создает круг

• Создает прямоугольник

• Создает закрещенный прямоугольник

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

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

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

Создаем функции: randomY и randomX. Добавляем ей конструкцию: return Math.floor(Math.random() * canv.height) и return Math.floor(Math.random() * canv.width)

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

Создаем функции: randomHeight и randomWidth. Добавляем им вот такую конструкцию:  

return Math.floor(Math.random() * 20) + 10

PS: вы можете поэкспериментировать с циферками ;)

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

Создаем функции: randomSpeedY и randomSpeedX. Указываем им вот такую конструкцию:

 return Math.floor(Math.random() * 1) + 1

Что-то новенькое

Создаем функцию с именем «collision» и указываем у нее вот такие параметры: x1, y1, w1, h1, x2, y2, w2, h2

Внутри функции создаем if-блок и указываем у него вот такое условие:

x2 > w1 + x1 || x1 > w2 + x2 || y2 > h1 + y1 || y1 > h2 + y2

Что-то новенькое

Если условие выдает «true», то программа должна выполнить вот такой код:

 return false;

Иначе она должна должна выполнить вот такой код:

else{ 

        return true

    }

Посмотрим поближе

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

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

Создаем функцию с именем «randomColor». Внутри функции создаем вот такие переменные: red, green, blue. Присваиваем этим переменным вот такую конструкцию: Math.floor(Math.random()*256);

Добавляем в конце функции команду: return "rgba(" + red + "," + green + "," + blue  + ")"

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

Создай цикл со счетчиком. Сделай так, чтобы твой цикл повторялся 10 или больше раз. Укажи в теле цикла вот такую конструкцию:

sqaresArr.push(new sqares(randomX(),randomY(), randomWidth(), 

randomHeight(),randomSpeedX(),randomSpeedY(),"black"))

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

Создай конструкцию «setInterval» укажи у этой конструкции вот такие параметры: function(){}, 10

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

Добавь в функцию конструкции «setInterval» команду: c.clearRect(0,0,canv.width,canv.height)

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

Создай цикл со счетчиком. Используй в цикле переменную «j». Сделай так, чтобы цикл выполнялся такое же количество раз, сколько элементов находится в списке «sqaresArr». В теле цикла укажи вот такую команду:

sqaresArr[j].update()

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

Выйди из тела цикла и создай еще один цикл со счетчиком. Используй в этом цикле переменную «i». Внутри цикла укажи вот такую конструкцию: let s1 = sqaresArr[i]

Что-то новое

Создай внутри цикла еще один цикл со счетчиком. Используй в этом цикле переменную «z». Начинай отсчет не от нуля, а от i + 1.

Внутри этого цикла укажи вот такую команду:

let s2 = sqaresArr[z]. Также создай внутри этого цикла if-блок.

Что-то новое

Укажи в if-блоке вот такое условие: collision(s1.x,s1.y,s1.w,s1.h,s2.x,s2.y,s2.w,s2.h)

Если условие выдает «true», то выполни вот такой код:

s1.color = randomColor()

s2.color = randomColor()