«Поймай квадрат» — компактная игра на реакцию. Задача игрока простая: за ограниченное время нажать на как можно больше появляющихся целей. На этом примере удобно разобрать случайные координаты, таймер раунда и управление состоянием.
Мини-игра с движущейся целью: раунд 30 секунд, счёт, рекорд, перезапуск, случайное позиционирование квадрата в пределах поля.
Сначала попробуйте готовую игру
Запустите раунд и попробуйте набрать рекорд. Так вы сразу увидите, почему важны ограничение координат и корректный таймер завершения.
Структура проекта
poymay-kvadrat/
├── source.html
├── style.css
└── game.jsHTML: поле и цель
Интерфейс включает счёт, таймер, рекорд, кнопку нового раунда и игровое поле с кнопкой-целью.
CSS: единый стиль и игровая зона
Визуал выдержан в общей стилистике сайта. Поле фиксируется по пропорции 16:9, а квадрат перемещается абсолютным позиционированием.
.target__field {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.target__square {
position: absolute;
width: 52px;
height: 52px;
}JavaScript: случайное перемещение
Перед каждым перемещением вычисляются допустимые границы по X и Y, чтобы квадрат всегда оставался внутри поля.
function moveSquare() {
const maxX = fieldEl.clientWidth - squareEl.offsetWidth;
const maxY = fieldEl.clientHeight - squareEl.offsetHeight;
const x = randomInt(Math.max(0, maxX));
const y = randomInt(Math.max(0, maxY));
squareEl.style.left = x + "px";
squareEl.style.top = y + "px";
}JavaScript: таймер раунда и рестарт
Раунд длится 30 секунд. После завершения квадрат блокируется, а кнопка «Новый раунд» запускает игру с чистого состояния.
function startRound() {
score = 0;
timeLeft = roundSeconds;
playing = true;
squareEl.disabled = false;
}
function finishRound() {
playing = false;
squareEl.disabled = true;
}Проверка
| Проверка | Ожидаемый результат |
|---|---|
| Клик по квадрату | Счёт увеличивается на 1, квадрат прыгает в новую точку |
| Во время раунда наблюдать таймер | Каждую секунду время уменьшается на 1 |
| Дождаться конца раунда | Квадрат блокируется, выводится итог по очкам |
| Нажать «Новый раунд» | Счёт и время сбрасываются, цель снова активна |
FAQ
Как усложнить игру?
Постепенно уменьшайте размер квадрата и сокращайте интервал его автоперемещения по мере роста счёта.
Можно ли добавить уровни сложности?
Да. Введите пресеты с разной длительностью раунда и скоростью перемещения цели.
Откройте финальные файлы этой версии. Это тот же код, который работает в демо наверху и на странице «Поиграть».
Книга по JavaScript для начинающих
«JavaScript с нуля: учимся программировать, создавая игры»Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.
Читать книгу на ЛитРес →