🎯 Цель урока
Финальный урок! Добавляем систему сил-апов, звуковые эффекты, полируем интерфейс и оптимизируем производительность игры.
После этого урока у тебя будет полнофункциональная, профессионально выглядящая игра, готовая для публикации!
⚡ Система сил-апов
Добавляем специальные способности, которые игрок может активировать:
Предвидение
Видишь следующий ход противника
Щит
Ничья засчитывается как победа
Молния
Автоматическая победа в раунде
Удача
Двойные очки за следующую победу
Замешательство
ИИ делает случайный ход
Замедление
Больше времени на раздумья
⚡ Реализация системы сил-апов
Создадим полноценную систему сил-апов с экономикой, эффектами и балансировкой.
// Система сил-апов const PowerUpSystem = { coins: 10, // Стартовые монеты activePowerUps: [], // Активные эффекты powerUps: { foresight: { name: 'Предвидение', cost: 5, icon: '🔮', description: 'Видишь следующий ход противника', duration: 1 // В раундах }, shield: { name: 'Щит', cost: 3, icon: '🛡️', description: 'Ничья засчитывается как победа', duration: 1 }, lightning: { name: 'Молния', cost: 10, icon: '⚡', description: 'Автоматическая победа в раунде', instant: true // Мгновенный эффект }, luck: { name: 'Удача', cost: 4, icon: '🎲', description: 'Двойные очки за следующую победу', duration: 1 }, confusion: { name: 'Замешательство', cost: 6, icon: '🧠', description: 'ИИ делает случайный ход', duration: 1 } }, // Покупка силы-апа buyPowerUp(powerUpId) { const powerUp = this.powerUps[powerUpId]; if (!powerUp || this.coins < powerUp.cost) { showMessage('Недостаточно монет!', 'error'); return false; } this.coins -= powerUp.cost; if (powerUp.instant) { // Мгновенные эффекты this.applyInstantEffect(powerUpId); } else { // Эффекты с длительностью this.activePowerUps.push({ id: powerUpId, duration: powerUp.duration, ...powerUp }); } this.updateUI(); showMessage(`Активирован ${powerUp.icon} ${powerUp.name}!`, 'success'); return true; }, // Мгновенные эффекты applyInstantEffect(powerUpId) { switch (powerUpId) { case 'lightning': // Автоматическая победа forceWin(); break; } }, // Проверка активных эффектов hasActivePowerUp(powerUpId) { return this.activePowerUps.some(pu => pu.id === powerUpId); }, // Обновление эффектов после раунда updateEffects() { this.activePowerUps = this.activePowerUps.filter(powerUp => { powerUp.duration--; return powerUp.duration > 0; }); this.updateUI(); }, // Заработать монеты earnCoins(amount) { this.coins += amount; this.updateUI(); // Анимация заработка AnimationSystem.coinEarnEffect(amount); } };
🔊 Звуковая система
Звуки делают игру более захватывающей. Добавим звуковые эффекты для всех ключевых событий.
// Система звуков const AudioSystem = { enabled: true, volume: 0.7, // Создание звука createSound(frequency, duration, type = 'sine') { if (!this.enabled) return; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.type = type; oscillator.frequency.value = frequency; gainNode.gain.value = this.volume; gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + duration); }, // Звуковые эффекты playWinSound() { // Мелодичный звук победы this.createSound(523, 0.2); // C5 setTimeout(() => this.createSound(659, 0.2), 100); // E5 setTimeout(() => this.createSound(784, 0.3), 200); // G5 }, playLoseSound() { // Нисходящий звук поражения this.createSound(200, 0.5, 'sawtooth'); }, playDrawSound() { // Нейтральный звук ничьей this.createSound(400, 0.3, 'triangle'); }, playClickSound() { // Короткий клик this.createSound(1000, 0.1, 'square'); }, playPowerUpSound() { // Магический звук силы-апа for (let i = 0; i < 5; i++) { setTimeout(() => { this.createSound(800 + i * 100, 0.1); }, i * 50); } }, playCoinSound() { // Звук монеток this.createSound(800, 0.1); setTimeout(() => this.createSound(1000, 0.1), 50); }, // Переключение звука toggle() { this.enabled = !this.enabled; localStorage.setItem('rps_audio_enabled', this.enabled); return this.enabled; } };
🔊 Демонстрация звуков
Нажми кнопки для прослушивания звуковых эффектов:
💾 Сохранение прогресса
Добавим систему сохранений, чтобы игрок не терял прогресс при закрытии браузера.
// Система сохранений const SaveSystem = { // Сохранение данных save() { const saveData = { stats: gameStats, coins: PowerUpSystem.coins, achievements: AchievementSystem.unlockedAchievements, settings: { audioEnabled: AudioSystem.enabled, difficulty: AISystem.difficulty }, timestamp: Date.now() }; localStorage.setItem('rps_save_data', JSON.stringify(saveData)); showMessage('Игра сохранена!', 'success'); }, // Загрузка данных load() { const saveData = localStorage.getItem('rps_save_data'); if (!saveData) { // Первый запуск игры this.initializeFirstTime(); return; } try { const data = JSON.parse(saveData); // Восстанавливаем статистику Object.assign(gameStats, data.stats); // Восстанавливаем монеты PowerUpSystem.coins = data.coins || 10; // Восстанавливаем достижения if (data.achievements) { AchievementSystem.unlockedAchievements = data.achievements; } // Восстанавливаем настройки if (data.settings) { AudioSystem.enabled = data.settings.audioEnabled; AISystem.difficulty = data.settings.difficulty || 'easy'; } showMessage('Прогресс загружен!', 'info'); } catch (e) { console.error('Ошибка загрузки сохранения:', e); this.initializeFirstTime(); } }, // Автосохранение каждые 30 секунд startAutoSave() { setInterval(() => { this.save(); }, 30000); }, // Экспорт сохранения exportSave() { const saveData = localStorage.getItem('rps_save_data'); if (saveData) { const blob = new Blob([saveData], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'rps_save.json'; a.click(); URL.revokeObjectURL(url); } } };
⚡ Оптимизация производительности
Важные советы для создания быстрой и отзывчивой игры:
🔧 Кэширование DOM
Сохраняй ссылки на часто используемые элементы в переменных, вместо поиска их каждый раз.
⏱️ Дебаунсинг событий
Ограничивай частоту выполнения функций для событий resize, scroll и input.
🎨 CSS вместо JS
Используй CSS анимации и переходы там, где это возможно - они работают быстрее.
📦 Минификация кода
Сжимай CSS и JavaScript файлы для уменьшения времени загрузки.
🖼️ Оптимизация изображений
Используй подходящие форматы (WebP, SVG) и сжимай изображения.
🔄 Управление памятью
Удаляй обработчики событий и очищай интервалы при необходимости.
🎮 Финальная демонстрация
Вот как выглядит полная игра со всеми возможностями:
47
23
12
8
🪙 15
🏆 7/12
✨ Полнофункциональная игра с ИИ, анимациями, звуками и прогрессией!
🏆 Поздравляем с завершением курса!
Ты успешно создал продвинутую игру "Камень-ножницы-бумага"
Освоенные технологии: HTML5, CSS3, JavaScript ES6+, Анимации, Web Audio API
Уровень: Продвинутый веб-разработчик 🚀
⚡ Финальное задание
Завершаем создание профессиональной игры:
- Реализуй полную систему сил-апов с покупкой и использованием
- Добавь звуковые эффекты для всех игровых событий
- Создай систему сохранения прогресса в localStorage
- Оптимизируй код для лучшей производительности
- Добавь экспорт/импорт сохранений
- Создай настройки игры (звук, сложность, анимации)
- Протестируй игру на разных устройствах
- Опубликуй игру и поделись с друзьями!
💡 Теперь у тебя есть все навыки для создания современных веб-игр!