Ты уже построил мир. Он дышит, мерцает неоновыми тенями, реагирует на выборы игрока. Но чего-то всё ещё не хватает...
Тишина.
Любая киберпанк-реальность неполна без ритма. Без звуковых сигналов, пульса синтезатора, вибраций тревоги и технологических шумов. В этом уроке мы пробудим ещё один слой восприятия — звуковой.
Ты научишься добавлять музыку и эффекты, чтобы твоя игра стала по-настоящему живой и атмосферной.
Пристегни наушники. Включаем звук.
Музыку и звук эффекта ты сможешь взять из материалов к уроку по ссылке:
Цель этого урока: усилить атмосферу с помощью фоновой музыки и звуков при взаимодействии.
Что ты изучишь: подключение аудио в HTML, автозапуск фона, добавление звуков при наведении, настройка громкости и повторов.
На выходе: интерактивная сцена с фоновой музыкой и звуками — игра становится по-настоящему живой.
Анимация персонажа: он оживает
Ранее твой персонаж был статичен. Давай добавим ему лёгкую анимацию дрожания, чтобы он словно "глючил" на экране. Создадим новую анимацию тряски:
@keyframes glitchShake {
0% { transform: translate(0, 0); }
20% { transform: translate(-2px, 1px); }
40% { transform: translate(2px, -1px); }
60% { transform: translate(-1px, 2px); }
80% { transform: translate(1px, -2px); }
100% { transform: translate(0, 0); }
}Теперь применим это к классу персонажа:
.character {
position: absolute;
right: 100px;
width: 50%;
animation: fadeInCharacter 0.2s ease-out forwards, glitchShake 3s ease-in-out infinite;
}Теперь он не просто "есть на экране", а живёт. Мелочь — а сразу ощущается движение.
Подключение фоновой музыки
Добавить музыку на страницу очень просто. Но у современных браузеров есть ограничение на автоматическое воспроизведение музыки. Поэтому мы чуть-чуть прибегнем к магии JavaScript.
Для начала добавь тег audio с айди background-music, аттриббут loop говорит воспроизводить музыку повторно при окончании.
<audio id="background-music" src="sound/cyberpunk-music.mp3" loop></audio>Музыка может воспроизвестись, если пользователь как-то повзаимодействовал со страницей. Например сделал клик. По рандомному клику давайте запускать наше музыкальное оформление. В других уроках включение музыки и эффектов уйдет в специальное окно настроек.
В тег body добавляем обработчик onclick который будет вызывать функцию проигрывания музыки.
<body id="index" onclick="playMusic()">JavaScript код, как и CSS, можно писать внутри тегов, в отдельном html теге <script></script> или вынести в отдельный \*.js файл.
Чтобы объявить нашу функцию мы пишем так:
<script>
function playMusic() {
const music = document.getElementById('background-music');
music.volume = 0.1;
music.play();
document.body.onclick = null;
}
</script>Проверь результат.
Эффекты при наведении
Музыка звучит, персонаж живой — давай сделаем и интерфейс чувствительным к действиям игрока.
Шаг 1: Добавим класс ссылкам
<a href="login.html" class="link">Войти в систему и прочитать сообщение</a>
<a href="disconnect.html" class="link">Срочно выключить питание и исчезнуть</a>Шаг 2: Добавим аудио для эффектов
<audio id="hoverSound" src="sound/ui.mp3" preload="auto"></audio>Шаг 3: Код воспроизведения звука при наведении
Вставь этот код после предыдущей функции в теге script.
const sound = document.getElementById('hoverSound');
sound.volume = 0.3;
const links = document.querySelectorAll('.link');
links.forEach(link => {
link.addEventListener('mouseenter', () => {
sound.currentTime = 0;
sound.play();
});
});Теперь каждый раз, когда игрок наводит курсор на выбор — звучит технологичный UI-звук. Деталь, которая делает твою игру гораздо насыщеннее.
Заключение
Поздравляю! Теперь в твоей новелле есть звук. Это очень важный шаг: ты подключил не просто код, а целое новое чувство для игрока.
В твоей игре уже есть атмосфера света и слов, а теперь в ней зазвучала жизнь.
В следующих уроках мы научимся управлять звуками ещё глубже, выстроим ветвистую сюжетную линию игры, добавим разных персонажей, инвентарь и вещи главного героя, выведем настройки в отдельное меню, добавим игровой интерфейс, карту города и много чего другого.
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →