Если ты уже пробовал писать простые HTML-страницы и хочешь делать что-то более увлекательное — этот урок для тебя. Мы шаг за шагом создадим свою первую мини-игру «Камень, ножницы, бумага» на HTML, CSS и JavaScript — прямо в браузере, без установок и сложных программ.
А если захочешь двигаться дальше и углубиться в веб-разработку через создание интерактивных проектов — можно продолжить обучение в мини-курсе, где ты шаг за шагом создашь полноценную текстовую игру с выбором и анимацией. Ссылка на обучение.
Шаг 1. HTML — создаём основу страницы
Сначала создадим структуру с заголовком, тремя кнопками для выбора и местом, где будет отображаться результат.
<body>
<h1>Камень, ножницы, бумага ✊✌️✋</h1>
<div class="choices">
<button onclick="play('камень')">✊ Камень</button>
<button onclick="play('ножницы')">✌️ Ножницы</button>
<button onclick="play('бумага')">✋ Бумага</button>
</div>
<div class="selection" id="selection" style="display: none;">
<div class="player">
<div class="choice-icon" id="playerIcon">❔</div>
<div class="label">Ты выбрал</div>
</div>
<div class="computer">
<div class="choice-icon" id="computerIcon">❔</div>
<div class="label">Компьютер выбрал</div>
</div>
</div>
<div class="result" id="result">Сделай свой выбор!</div>
</body>
Здесь:
- Кнопки вызывают функцию play() с выбором игрока.
- Блоки с playerIcon и computerIcon показывают выбранные варианты.
- Результат выводится в элемент с id result.
Шаг 2. CSS — стилизуем игру
Добавим немного стилей, чтобы сделать игру приятной визуально:
<style>
body {
font-family: sans-serif;
text-align: center;
background: #f0f0f0;
margin-top: 50px;
}
.choices button {
font-size: 20px;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 8px;
background: #4CAF50;
color: white;
cursor: pointer;
}
.choices button:hover {
background: #45a049;
}
.selection {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 20px;
}
.choice-icon {
font-size: 50px;
}
.result {
margin-top: 30px;
font-size: 22px;
font-weight: bold;
}
</style>
Шаг 3. JavaScript — логика игры
Теперь добавим интерактив: обработку выбора, случайный выбор компьютера и отображение результата.
<script>
const icons = {
'камень': '✊',
'ножницы': '✌️',
'бумага': '✋'
};
function play(playerChoice) {
const computerChoice = ['камень', 'ножницы', 'бумага'][Math.floor(Math.random() * 3)];
document.getElementById('playerIcon').textContent = icons[playerChoice];
document.getElementById('computerIcon').textContent = icons[computerChoice];
document.getElementById('selection').style.display = 'flex';
let result = 'Ты проиграл 😢';
if (playerChoice === computerChoice) {
result = 'Ничья!';
} else if (
(playerChoice === 'камень' && computerChoice === 'ножницы') ||
(playerChoice === 'ножницы' && computerChoice === 'бумага') ||
(playerChoice === 'бумага' && computerChoice === 'камень')
) {
result = 'Ты выиграл! 🎉';
}
document.getElementById('result').innerHTML = result;
}
</script>
Что делает этот код:
- Генерирует случайный выбор компьютера;
- Показывает выбранные иконки игрока и компьютера;
- Сравнивает выборы и выводит результат.
Заключение
Ты только что создал свою игру с использованием HTML, CSS и JavaScript. Это отличный способ начать понимать, как работает интерфейс, логика и взаимодействие в браузере.
Если хочешь продолжать обучение и сделать следующий шаг — у меня есть пошаговый мини-курс, где ты создашь свою текстовую игру с выбором, оформлением и звуками. Все уроки — на простом языке и без лишней теории. Курс подойдёт даже тем, кто только начинает.
Продолжить обучение
Мини-курс: «Создай свою первую игру на HTML за один вечер» — это практическое пошаговое руководство, в котором ты:
- разберёшься с HTML на практике, без теории;
- создашь собственную интерактивную историю;
- узнаешь, как использовать HTML, CSS, JavaScript для оформления и интерактива.
Материал подаётся последовательно и понятно — от базовой структуры до полноценной мини-игры с переходами и анимацией. Подходит для абсолютных новичков.