Создаем первую игруСоздаем первую игру

Хочешь сделать свою первую игру, но не знаешь с чего начать? Отлично! Ниже — пошаговое руководство, как создать простую игру “Поймай квадрат” с использованием 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 час

📘 Всё просто, пошагово и без сложных терминов. Курс идеально подойдёт для новичков.

Подписывайся на курс ВКонтакте — и пусть это будет твой первый шаг в мир геймдева:

🔗 Хочу пройти курс и сделать свою игру

Начни сегодня — и создавай игры, а не просто играй в них! 🎮✨