курс от Брэда Трэверси

Код Github

Возможности:

рисунок на холсте

клавиша вниз и клавиша вверх

requestAnimationFrame()

HTML

раздел правил скрыт слева с кнопкой правил и кнопкой закрытия для управления

Canvas — это игровой контейнер со всем рисунком.

CSS

установить холст для отображения блока

боковые правила лежат слева и трансформируются по оси x при добавлении имени класса show

JS

выберите необходимые элементы DOM

контекст холста с помощью canvas.getContext(‘2d’)

инициировать текущий счет и рисовать количество строк и столбцов кирпича

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

положение x, y, размер, скорость движения. dx - положение оси x. dy - направление Y

Сначала рисуем все фигуры на холсте. мяч, весло, счет и кирпичи

каждый раз сначала очищайте контекст с помощью ширины и высоты холста

drawBall() с ctx.arc(x,y,радиус,начальный угол,конечный угол)

Подробнее о canvasrenderingcontext2d.arc() MDN

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

drawPaddle() с помощью rect()

подробнее о canvasrenderingcontext2d.rect() MDN

ctx.rect(x, y, width, height);

DrawScore() с fillText()

подробнее о canvasrenderingcontext2d.fillText() MDN

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

хранить все кирпичи в массиве. кирпичи представляют собой блоки сетки

с помощью for… зациклить ряд кирпичей и столбец кирпичей, чтобы вычислить каждый кирпич x и y, а затем сохранить в массиве кирпичей с помощью brickInfo

drawBricks() с rect() с шириной, высотой и положением x, y

если видимое истинно, задайте ему цвет фона, если нет, прозрачный

После рисования холста пришло время двигать мяч и весло.

с requestAnimationFrame() для запуска анимации

Метод window.requestAnimationFrame() сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает, чтобы браузер вызвал указанную функцию для обновления анимации перед следующей перерисовкой. Метод принимает обратный вызов в качестве аргумента, который должен быть вызван перед перерисовкой.

подробнее о requestAnimationFrame() MDN

ось x весла добавила измененный x

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

если вы попали в левую сторону стены, где x весла меньше 0, то оставайтесь в 0

движущийся мяч должен учитывать такие ситуации, как удар о стену, удар по ракетке и удар по кирпичам.

когда мяч ударяется о стену по оси x или оси y, направление меняется

если мяч ударяется о ракетку, направление меняется

при ударе по кирпичу направление меняется и кирпич становится невидимым, затем увеличивается счет

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

когда все кирпичи исчезнут, сбросьте игру с помощью showAllBricks()

когда весь кирпич виден, прямоугольная заливка цветом

манипулировать веслом, с помощью левой и правой клавиш.

при нажатии клавиши движущийся x менялся со скоростью

когда keuup, движущийся x останавливается

Мероприятия

показать правила с классом переключения