Узнайте, как создать игру в пинг-понг с помощью JavaScript и HTML.
Понг — тематическая игра в настольный теннис для двух игроков. Он включает в себя движущийся мяч и две ракетки. Игроки перемещают ракетки вверх и вниз, чтобы убедиться, что мяч попадает в нее и отправляет ее обратно в направлении другого игрока. Если один пропускает мяч, очко получает другой игрок. Первый, кто достигнет точки, необходимой для победы, выиграет игру.
Мы используем холст HTML5 и JavaScript для реализации этой игры. Давайте посмотрим, как работает логика игры.
- Мы запустим мяч с начальной скоростью и направлением в центре.
- Двигаем лепестки вверх-вниз с помощью клавиш на клавиатуре. W и S для перемещения левого игрока вверх и вниз соответственно. ВВЕРХ и ВНИЗ клавиши со стрелками для правого игрока, чтобы двигаться вверх и вниз соответственно.
- Направление мяча меняется, а скорость немного увеличивается, когда мяч касается ракетки.
- Верхние и нижние границы холста будут отражать мяч при попадании мяча.
- Как только игрок пропускает мяч, счет другого игрока увеличивается на единицу. Проверяется, набрал ли игрок количество очков, необходимое для победы, и если оно достигнуто, то игрок выигрывает, и игра заканчивается.
- Игра продолжается до тех пор, пока один из игроков не выиграет.
Используемые технологии
- HTML
- CSS
- JavaScript
Объяснение исходного кода
Давайте рассмотрим код, чтобы лучше понять логику и посмотреть, как мы можем построить пинг-понг.
- Во-первых, нам нужно создать HTML-страницу с холстом для запуска игры.
Здесь у нас есть холст для рендеринга игры и два тега абзаца для отображения результатов. Блок с классом small-device предназначен для отключения игры и отображения сообщения на маленьких экранах, потому что не будет управления клавиатурой.
Файл CSS style.css и файл JavaScript script.js связаны с этим файлом HTML.
2. Теперь нам нужно добавить несколько стилей на нашу страницу, чтобы она выглядела красиво. Внешний вид страницы также является важной частью.
Стили просты, мы устанавливаем холст в центр, а результаты отображаются с обеих сторон доски. Теперь у нас также есть неоновый эффект в нашей игре с помощью теней.
3. Теперь пришло время построить логику игры с помощью JavaScript. Мы должны инициализировать холст, мяч и двух игроков.
Мы создали холст и сохраняем победителя в хранилище сеансов, и на данный момент для победителя установлено значение none.
Мяч, левый игрок ( левая ракетка) и правый игрок ( правая ракетка) инициализируются необходимыми свойствами, такими как высота, ширина, координаты x и y, цвет, имя игрока, скорость и т. д. Мяч будет иметь скорости x и y.
4. Теперь нам нужно создать состояние игры, а также обработать нажатия клавиш и состояния клавиш.
Мы будем отслеживать счет каждого игрока в игровом объекте. Он также содержит счет, необходимый для победы, количество ударов, чтобы вызвать увеличение скорости мяча и т. д.
У нас есть состояние для клавиш, чтобы записывать, какие клавиши нажимаются в данный момент времени. Прослушиватели событий настроены на обновление состояний клавиш при нажатии клавиши и нажатии клавиши.
5. Теперь нам нужно написать функции для рисования мяча и игроков на холсте.
Игроки и мяч рисуются на основе свойств объекта. Определена функция, очищающая холст и рисующая все объекты на экране.
6. Мы должны обрабатывать изменение размера окна и обновление значений при изменении размера. Когда мы изменяем размер холста экрана, необходимо изменить размер, а объекты на холсте должны быть перемещены в соответствии с новым размером холста.
Обработчик функции изменения размера вызывается каждый раз, когда мы изменяем размер экрана, а также при запуске программы для организации положения холста и объектов. Он также отключает игру с оверлеем, когда размер экрана меньше 560 пикселей.
7. Теперь нам нужно обновить положение лепестков при нажатии соответствующих клавиш.
Здесь мы обновляем позиции игроков в зависимости от нажатия клавиш и границ холста.
8. Время, когда некоторые служебные функции сбрасывают позиции мяча после того, как каждый игрок набирает очки, одна устанавливает очки игроков и отображает их на странице, а третья сбрасывает игру после ее окончания.
При сбросе мяча я меняю направление мяча, потому что тот, кто набрал очко, получает следующий удар. Функция, которая устанавливает счет, проверяет, выполнены ли все условия для обновления счета. Он сбрасывает мяч в центр и обновляет счет, отображаемый на странице. Функция сброса игры сбрасывает все очки и обновляет все состояния объектов до положения по умолчанию, по существу сбрасывая игру.
9. Время написать функцию завершения игры, которая проверяет, выиграл ли кто-нибудь
Функция завершения игры проверяет, выиграл ли кто-нибудь, и сохраняет победителя в хранилище сеансов. Страница перенаправляется на winner.html, который извлекает победителя из хранилища сеансов и отображает его.
10. Теперь осталось реализовать столкновение мяча, изменение направления, увеличение скорости и т.д.
Функция обновления состояний изменит скорость мяча по оси Y на противоположную, когда он коснется крыши и пола холста. Если он касается весла, скорость X изменяется, и вызывается функция с именем collisionTimeLag(). Время столкновения деактивирует столкновение объекта на 1 секунду, чтобы предотвратить любые типы ошибок при столкновении (например, многократное обновление состояния при столкновении). Во время деактивации столкновение не будет обнаружено (в это время тоже нет шансов на столкновение)
Функции для установки счета и проверки того, закончилась ли игра, вызываются для обеспечения правильного обновления игры. Скорость увеличивается, когда мы пересекаем количество попаданий, которое мы указали в объекте, чтобы увеличить скорость.
Самое главное, положение мяча изменяется путем добавления скорости к положению.
11. Теперь давайте реализуем основной игровой цикл, который запускает игру.
Этот игровой цикл будет обновлять нажатия клавиш, обновлять состояния и постоянно отрисовывать все со скоростью около 60 раз в секунду в зависимости от ресурсов нашего компьютера. requestAnimationFrame — это эффективный способ создания анимации в JavaScript. По мере выполнения нашего игрового цикла и обновления состояний наша игра будет работать гладко.
Вуаля! Мы сделали игру в пинг-понг🥳
Вы можете найти весь код игры в моем репозитории Github. Не стесняйтесь создавать ответвления и получайте удовольствие, меняйте настройки и добавляйте новые функции.
Хотите подключиться?
Подпишитесь на меня в Twitter.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
