Урок 3: JavaScript логика игры

🎯 Цель урока

В этом уроке мы напишем основную логику игры на JavaScript. Научимся определять победителя, создавать ИИ противника и обновлять статистику игры в реальном времени.

Ты изучишь переменные, функции, условия и циклы на практическом примере создания полнофункциональной игры.

Живая демонстрация логики

Попробуй поиграть и посмотри, как работает код:

0 Победы

0 Поражения

0 Ничьи

0 Серия

👤 Игрок

❓

🤖 ИИ

❓

Выбери свой ход!

📋 Правила игры

Вспомним логику определения победителя:

Камень vs Ножницы

✊ → ✌️

Камень побеждает!

Бумага vs Камень

✋ → ✊

Бумага побеждает!

Ножницы vs Бумага

✌️ → ✋

Ножницы побеждают!

🔧 Настройка переменных

Начнём с создания переменных для хранения состояния игры. Это данные, которые изменяются в процессе игры.

🔧 Игровые переменные

// Объект для хранения статистики игры
let gameStats = {
    wins: 0,        // Количество побед
    losses: 0,      // Количество поражений
    draws: 0,       // Количество ничьих
    streak: 0,      // Текущая серия побед
    maxStreak: 0,   // Максимальная серия
    totalGames: 0   // Общее количество игр
};

// Объект с вариантами ходов и их отображением
const choices = {
    rock: {
        emoji: '✊',
        name: 'Камень'
    },
    paper: {
        emoji: '✋',
        name: 'Бумага'
    },
    scissors: {
        emoji: '✌️',
        name: 'Ножницы'
    }
};

// Массив возможных ходов для ИИ
const choiceKeys = Object.keys(choices); // ['rock', 'paper', 'scissors']

let позволяет изменять переменную, const - создаёт константу. Объекты удобны для группировки связанных данных.

🎮 Основная функция игры

Создадим главную функцию, которая запускается при клике на кнопку выбора. Она координирует весь процесс игры.

🎮 Функция makeChoice

// Главная функция игры
function makeChoice(playerChoice) {
    // 1. Получаем выбор компьютера
    const computerChoice = getComputerChoice();
    
    // 2. Показываем выборы на экране
    displayChoices(playerChoice, computerChoice);
    
    // 3. Определяем результат
    const result = determineWinner(playerChoice, computerChoice);
    
    // 4. Обновляем статистику
    updateStats(result);
    
    // 5. Показываем результат
    showResult(result, playerChoice, computerChoice);
    
    // 6. Обновляем отображение
    updateDisplay();
}

Функция принимает параметр playerChoice - выбор игрока ('rock', 'paper' или 'scissors').

🤖 Создание ИИ противника

Напишем функцию для генерации случайного выбора компьютера. Пока сделаем простого противника, а в следующих уроках улучшим его.

🤖 Случайный выбор ИИ

// Функция выбора компьютера
function getComputerChoice() {
    // Генерируем случайное число от 0 до 2
    const randomIndex = Math.floor(Math.random() * 3);
    
    // Возвращаем соответствующий выбор
    return choiceKeys[randomIndex];
}

// Альтернативный способ - более читаемый
function getComputerChoiceV2() {
    const choices = ['rock', 'paper', 'scissors'];
    const randomIndex = Math.floor(Math.random() * choices.length);
    return choices[randomIndex];
}

Math.random() возвращает случайное число от 0 до 1. Math.floor() округляет вниз до целого числа.

🏆 Определение победителя

Самая важная функция - определение того, кто выиграл раунд. Используем логику условий для сравнения ходов.

🏆 Логика победы

// Функция определения победителя
function determineWinner(player, computer) {
    // Если выборы одинаковые - ничья
    if (player === computer) {
        return 'draw';
    }
    
    // Объект с правилами победы
    const winConditions = {
        rock: 'scissors',      // Камень бьёт ножницы
        paper: 'rock',        // Бумага бьёт камень
        scissors: 'paper'     // Ножницы бьют бумагу
    };
    
    // Проверяем, побеждает ли игрок
    if (winConditions[player] === computer) {
        return 'win';
    } else {
        return 'lose';
    }
}

// Альтернативная версия с подробными условиями
function determineWinnerDetailed(player, computer) {
    if (player === computer) {
        return 'draw';
    }
    
    if (
        (player === 'rock' && computer === 'scissors') ||
        (player === 'paper' && computer === 'rock') ||
        (player === 'scissors' && computer === 'paper')
    ) {
        return 'win';
    } else {
        return 'lose';
    }
}

🔄 Поток выполнения игры

Игрок делает выбор

Нажимает на одну из кнопок: Камень, Бумага или Ножницы

Генерируется выбор ИИ

Math.random() создаёт случайное число, выбирается один из трёх вариантов

Отображаются выборы

На экране показываются эмодзи выборов игрока и компьютера

Определяется победитель

Сравниваются выборы по правилам игры, возвращается результат

Обновляется статистика

Увеличиваются счётчики побед/поражений/ничьих, пересчитывается серия

Показывается результат

Выводится сообщение о результате раунда и обновляется интерфейс

📊 Обновление статистики

Создадим функцию для обновления игровой статистики и отображения изменений на экране.

📊 Функции статистики

// Обновление статистики после игры
function updateStats(result) {
    gameStats.totalGames++;
    
    switch (result) {
        case 'win':
            gameStats.wins++;
            gameStats.streak++;
            // Обновляем максимальную серию
            if (gameStats.streak > gameStats.maxStreak) {
                gameStats.maxStreak = gameStats.streak;
            }
            break;
            
        case 'lose':
            gameStats.losses++;
            gameStats.streak = 0; // Сброс серии
            break;
            
        case 'draw':
            gameStats.draws++;
            // Серия не сбрасывается при ничьей
            break;
    }
}

// Обновление отображения на экране
function updateDisplay() {
    // Находим элементы по ID и обновляем их содержимое
    document.getElementById('wins').textContent = gameStats.wins;
    document.getElementById('losses').textContent = gameStats.losses;
    document.getElementById('draws').textContent = gameStats.draws;
    document.getElementById('streak').textContent = gameStats.streak;
}

// Отображение выборов игроков
function displayChoices(playerChoice, computerChoice) {
    document.getElementById('playerChoice').textContent = choices[playerChoice].emoji;
    document.getElementById('computerChoice').textContent = choices[computerChoice].emoji;
}

💬 Показ результатов

Добавим функцию для показа понятных сообщений о результате игры с использованием эмодзи и текста.

💬 Функция результатов

// Показ результата игры
function showResult(result, playerChoice, computerChoice) {
    const resultElement = document.getElementById('gameResult');
    const playerName = choices[playerChoice].name;
    const computerName = choices[computerChoice].name;
    
    let message = '';
    let className = 'result-text';
    
    switch (result) {
        case 'win':
            message = `🎉 Ты победил! ${playerName} бьёт ${computerName}!`;
            className += ' win';
            break;
            
        case 'lose':
            message = `😔 Ты проиграл! ${computerName} бьёт ${playerName}!`;
            className += ' lose';
            break;
            
        case 'draw':
            message = `🤝 Ничья! Оба выбрали ${playerName}!`;
            className += ' draw';
            break;
    }
    
    // Обновляем текст и стиль
    resultElement.textContent = message;
    resultElement.className = className;
    
    // Добавляем информацию о серии
    if (gameStats.streak >= 3 && result === 'win') {
        setTimeout(() => {
            resultElement.textContent += ` 🔥 СЕРИЯ x${gameStats.streak}!`;
        }, 1000);
    }
}

template literals (обратные кавычки) позволяют встраивать переменные в строки. setTimeout выполняет код с задержкой.

🐛 Отладка и тестирование

console.log(): Добавь console.log(playerChoice, computerChoice, result) в функции для отслеживания значений переменных в консоли браузера.

Проверка результатов: Протестируй все возможные комбинации ходов, чтобы убедиться, что логика определения победителя работает правильно.

Обработка ошибок: Добавь проверки на существование элементов DOM перед их изменением: if (element) element.textContent = value.

🐛 Отладочная версия

// Версия с отладкой
function makeChoiceDebug(playerChoice) {
    console.log('🎮 Игрок выбрал:', playerChoice);
    
    const computerChoice = getComputerChoice();
    console.log('🤖 Компьютер выбрал:', computerChoice);
    
    const result = determineWinner(playerChoice, computerChoice);
    console.log('🏆 Результат:', result);
    
    console.log('📊 Статистика до:', { ...gameStats });
    updateStats(result);
    console.log('📊 Статистика после:', { ...gameStats });
    
    displayChoices(playerChoice, computerChoice);
    showResult(result, playerChoice, computerChoice);
    updateDisplay();
}

⚡ Твоё задание

Добавь JavaScript логику к своей игре:

Создай переменные для хранения статистики игры
Напиши объект с вариантами ходов и их отображением
Реализуй функцию случайного выбора для ИИ
Создай функцию определения победителя с правильной логикой
Добавь обновление статистики с подсчётом серий
Реализуй отображение результатов с эмодзи
Подключи функции к кнопкам через onclick
Протестируй все возможные комбинации ходов

💡 Используй console.log() для отладки своего кода!

Следующий урок: Продвинутые режимы →

⚡ Урок 3: JavaScript логика