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

На прошлом шаге мы реализовали физику игры. Мячик летает, отпрыгивает от стен, и игра перезапускается при вылете мячика за пределы поля. Но при этом игрок ничего не может сделать, кроме как смириться с постоянными поражениями! Ракетка не двигается! Поэтому на этом шаге займёмся тем, чтобы добавить управление в игру.

Создадим дополнительный скрипт controls.js в папке js. И не забудем добавить его в главный файл index.html перед добавлением скрипта engine.js:

<!-- Начало места, которое мы изменяем -->
    <img src="assets/background.jpg" id="background"></img>
    <script src="js/render.js"></script>
    <script src="js/controls.js"></script>
    <script src="js/engine.js"></script>
</body>

</html>
<!-- Конец редактирования -->

Вот так будет выглядеть наша папка проекта после создания файла controls.js:

ping-pong
├── index.html
├── assets
│   ├── ball.png
│   ├── paddle.png
│   ├── background.jpg
│   └── style.css
└── js
    ├── render.js
    ├── engine.js
    └── controls.js

Используем для реализации управления движением ракетки стандартный обработчик событий document.addEventListener(). Но хитрость в том, что нам нужно отслеживать как нажатие на клавиши, так и тот момент, когда игрок их отпускает.

Смысл в том, что платформы движутся только когда игрок зажимает клавишу. Как только он её отпускает — платформа останавливается. Именно поэтому мы сделаем два обработчика: один будет следить за нажатыми клавишами, а второй — за отпущенными.

Следующий код мы добавим в файл controls.js:

// Вводим словарик с состояниями нажатых клавиш
const keyPresses = {
    up: 0,
    down: 0,
    nothing: 1
};

// Отслеживаем нажатия клавиш
document.addEventListener("keydown", function (e) {
    // Если нажата клавиша вверх,
    if (e.which === 38) {
        // то двигаем правую платформу вверх
        rightPaddle.dy = -rightPaddle.paddleSpeed;
        keyPresses["up"] = 1;
        keyPresses["down"] = 0;
        keyPresses["nothing"] = 0;
    }
    // Если нажата клавиша вниз,
    else if (e.which === 40) {
        // то двигаем правую платформу вниз
        rightPaddle.dy = rightPaddle.paddleSpeed;
        keyPresses["up"] = 0;
        keyPresses["down"] = 1;
        keyPresses["nothing"] = 0;
    }
    // Если нажата клавиша W,
    if (e.which === 87) {
        // то двигаем левую платформу вверх
        leftPaddle.dy = -leftPaddle.paddleSpeed;
    }
    // Если нажата клавиша S,
    else if (e.which === 83) {
        // то двигаем левую платформу вниз
        leftPaddle.dy = leftPaddle.paddleSpeed;
    }
});

// А теперь следим за тем, когда кто-то отпустит клавишу, чтобы остановить движение платформы
document.addEventListener("keyup", function (e) {
    // Если это стрелка вверх или вниз,
    if (e.which === 38 || e.which === 40) {
        // останавливаем правую платформу
        rightPaddle.dy = 0;
        keyPresses["up"] = 0;
        keyPresses["down"] = 0;
        keyPresses["nothing"] = 1;
    }
    // А если это W или S,
    if (e.which === 83 || e.which === 87) {
        // останавливаем левую платформу
        leftPaddle.dy = 0;
    }
});

Словарик с действиями игрока keyPresses нам пригодится в дальнейшем.

к сведению

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