Хочешь сделать свою первую игру, но не знаешь с чего начать? Отлично! Ниже — пошаговое руководство, как создать простую игру “Поймай квадрат” с использованием HTML, CSS и JavaScript. Никаких фреймворков, только чистый код и немного фантазии.
Что за игра?
На экране появляется квадрат, который нужно успеть кликнуть, пока он не исчез. Чем больше кликов — тем выше счёт. Простая, но отличная для тренировки логики и понимания основ.
Шаг 1. Создай HTML-файл
Создай файл index.html. По умолчанию он будет открываться браузером, поэтому чтобы отредактировать его открой с помощью текстового редактора. Обычный блокнот подойдет. Вставь в него следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Поймай квадрат</title>
<style>
body {
text-align: center;
font-family: sans-serif;
background-color: #f0f0f0;
}
#gameArea {
position: relative;
width: 400px;
height: 400px;
margin: 20px auto;
background: white;
border: 2px solid #333;
}
.square {
width: 50px;
height: 50px;
background: tomato;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Поймай квадрат</h1>
<p>Счёт: <span id="score">0</span></p>
<div id="gameArea"></div>
<script src="game.js"></script>
</body>
</html>
Создать файл можно любой текстовый с расширением .txt, затем в блокноте выбрать «Сохранить как» и уже ввести нормальное название и расширение.
Шаг 2. Добавь JavaScript
Создай рядом файл game.js и вставь:
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
let score = 0;
function createSquare() {
const square = document.createElement('div');
square.classList.add('square');
// Случайная позиция
const x = Math.random() * (gameArea.clientWidth - 50);
const y = Math.random() * (gameArea.clientHeight - 50);
square.style.left = `${x}px`;
square.style.top = `${y}px`;
// Клик по квадрату
square.onclick = function () {
score++;
scoreDisplay.textContent = score;
gameArea.removeChild(square);
createSquare();
};
// Удалить через 2 секунды, если не кликнули
setTimeout(() => {
if (gameArea.contains(square)) {
gameArea.removeChild(square);
createSquare();
}
}, 2000);
gameArea.appendChild(square);
}
// Запуск игры
createSquare();
Шаг 3. Открой файл index.html
С помощью браузера Chrome, FireFox или другого открой файл и посмотри что получилось.
Что мы сделали:
- Использовали HTML для структуры страницы
- Добавили CSS для внешнего вида и позиционирования
- Написали JavaScript, чтобы:
создавать квадрат в случайном месте
обрабатывать клики
обновлять счёт
заменять квадрат каждые 2 секунды
Создание своей игры — отличный способ научиться программировать. Даже простая игра может научить многому: работе с DOM, событиями, позиционированием и логикой. И главное — ты сразу видишь результат и можешь играть в то, что сделал сам.
Хочешь попробовать дальше, но не знаешь, с чего начать?
👉 У меня есть мини-курс по HTML, CSS и JavaScript, где ты:
🔸 разберёшься с основами HTML
🔸 узнаешь, как сделать интерактивную историю с выбором
🔸 создашь свою первую игру прямо в браузере — всего за 1 час
📘 Всё просто, пошагово и без сложных терминов. Курс идеально подойдёт для новичков.
Подписывайся на курс ВКонтакте — и пусть это будет твой первый шаг в мир геймдева:
🔗 Хочу пройти курс и сделать свою игру
Начни сегодня — и создавай игры, а не просто играй в них! 🎮✨