Инструкции по выполнению шага

Поскольку в дальнейшем игровое поле нужно будет перерисовывать достаточно часто, то хорошо бы обернуть весь код, который отвечает за компоновку игровых элементов на сцене, в отдельную функцию, которую затем можно будет удобно вызывать. На языке JavaScript существует несколько способов задания функций. Следующие примеры создают одну и ту же функцию сложения двух чисел:

// Изначальный синтаксис объявления функций
function add(a,b) {
    return a+b;
};

// Функция-выражение
var add = function (a,b) {
    return a+b;
};

// Объявление функции через конструктор
const add = new Function('a', 'b', 'return a + b');

// Стрелочная функция, стандартная запись
let add = (a, b) => {
    return a+b;
};

// Стрелочная функция, краткая запись
let add = (a, b) => (a+b);

Как можно увидеть, JavaScript предоставляет большую гибкость при объявлении и описании функций. Хорошей практикой является использование одного типа объявления функций в своём проекте. Очень редко используют два типа объявлений (некоторые объявления отличаются по логике работы). При разработке будем использовать по возможности объявления в виде стрелочных функций в стандартной форме. Объявим стрелочную функцию redraw без параметров, которая будет перерисовывать сцену игры каждый раз при вызове:

к сведению

Следующая часть кода переписывает часть кода в render.js после строчки const context = canvas.getContext("2d"); до конца файла.

const redraw = () => {
    // Очищаем холст от предыдущего кадра
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Рисуем содержимое заднего фона на холст
    context.drawImage(backgroundImg, 0, 0, backgroundImg.width, backgroundImg.height, 0, 0, canvas.width, canvas.height);

    // Рисуем левую ракетку на холсте
    context.drawImage(paddleImg, 0, 0, paddleImg.width, paddleImg.height, leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);

    // Рисуем мячик
    context.drawImage(ballImg, 0, 0, ballImg.width, ballImg.height, ball.x, ball.y, ball.width, ball.height);

    // Рисуем правую ракетку на холсте
    context.drawImage(paddleImg, 0, 0, paddleImg.width, paddleImg.height, rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);

    // Рисуем стены
    context.fillStyle = "lightgrey";
    context.fillRect(0, 0, canvas.width, grid);
    context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);

    // Рисуем сетку посередине
    for (let i = grid; i < canvas.height - grid; i += grid * 2) {
        context.fillRect(canvas.width / 2 - grid / 2, i, grid / 2, grid / 2);
    };
};

Теперь для того чтобы перерисовать игровую сцену, достаточно будет написать redraw() в любом месте кода. Что и предлагается сделать после описания функции:

к сведению

Следующую часть кода добавляем в конец файла render.js.

redraw();

Внешний вид страницы должен остаться прежним (в случае отсутствия некоторых элементов игры попробуйте обновить страницу).

к сведению

Итоговый результат выполнения шага можно скачать тут.