курс от Брэда Трэверси
Возможности:
рисунок на холсте
клавиша вниз и клавиша вверх
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 останавливается
Мероприятия
показать правила с классом переключения