← Назад к курсу

⚡ Урок 5b: Силы-апы и полировка

Завершаем создание профессиональной игры

🎯 Цель урока

Финальный урок! Добавляем систему сил-апов, звуковые эффекты, полируем интерфейс и оптимизируем производительность игры.

После этого урока у тебя будет полнофункциональная, профессионально выглядящая игра, готовая для публикации!

⚡ Система сил-апов

Добавляем специальные способности, которые игрок может активировать:

🔮

Предвидение

Видишь следующий ход противника

5 монет
🛡️

Щит

Ничья засчитывается как победа

3 монеты

Молния

Автоматическая победа в раунде

10 монет
🎲

Удача

Двойные очки за следующую победу

4 монеты
🧠

Замешательство

ИИ делает случайный ход

6 монет

Замедление

Больше времени на раздумья

2 монеты

⚡ Реализация системы сил-апов

Создадим полноценную систему сил-апов с экономикой, эффектами и балансировкой.

⚡ Система PowerUps
// Система сил-апов
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
Силы-апы:
🔮 Предвидение (5🪙)
🛡️ Щит (3🪙)
⚡ Молния (10🪙)
🎲 Удача (4🪙)

✨ Полнофункциональная игра с ИИ, анимациями, звуками и прогрессией!

🏆 Поздравляем с завершением курса!

Ты успешно создал продвинутую игру "Камень-ножницы-бумага"

Освоенные технологии: HTML5, CSS3, JavaScript ES6+, Анимации, Web Audio API

Уровень: Продвинутый веб-разработчик 🚀

⚡ Финальное задание

Завершаем создание профессиональной игры:

  1. Реализуй полную систему сил-апов с покупкой и использованием
  2. Добавь звуковые эффекты для всех игровых событий
  3. Создай систему сохранения прогресса в localStorage
  4. Оптимизируй код для лучшей производительности
  5. Добавь экспорт/импорт сохранений
  6. Создай настройки игры (звук, сложность, анимации)
  7. Протестируй игру на разных устройствах
  8. Опубликуй игру и поделись с друзьями!

💡 Теперь у тебя есть все навыки для создания современных веб-игр!

🏠 Вернуться к обзору курса