Игра «Уколы» (Pin Spin)

Pin Spin — это лёгкая казуальная браузерная игра того же семейства, что и мобильные хиты AA и Pin Out. В центре экрана с постоянной скоростью вращается белый диск. Вы по одной выстреливаете иглы снизу, и каждая игла должна воткнуться в диск, не задев уже воткнутые. На каждом уровне дано фиксированное количество игл: воткните их все — и переходите дальше, любое касание мгновенно завершает раунд. Правила настолько просты, что разобраться можно за пару секунд, но кривая сложности быстро превращает её в серьёзную проверку чувства времени и самообладания. Инструмент работает целиком в браузере, без регистрации и установки: на компьютере — клик мышью, на телефоне — касание экрана.

Главный цикл управляется requestAnimationFrame. На каждом кадре внутреннее значение rotation увеличивается на фиксированное speed (градусов на кадр), затем перебираются все воткнутые иглы и им присваивается transform: rotate(baseAngle + rotation). Поскольку transform — свойство слоя композиции, браузер передаёт вращение в поток GPU-композитора, не вызывая ни layout, ни paint, поэтому последний уровень со всеми 15 вращающимися иглами стабильно держит 60 fps. Проверка столкновений строится на схеме «разница углов через длину хорды». Каждая воткнутая игла представлена своим baseAngle в системе координат диска (фиксированный сдвиг относительно диска, не зависящий от вращения). Когда выпущенная игла достигает центра, её угол в мировых координатах равен TARGET_ANGLE = 0, что в координатах диска даёт normalizeAngle(0 - rotation). Затем новый baseAngle сравнивается со всеми существующими: разница углов Δθ переводится в длину хорды 2R·sin(Δθ/2) между центрами точек на остриях игл (R = 111px от центра каждой точки-острия до центра диска). Если она оказывается меньше порога 24px, выстрел считается столкновением и раунд завершается. Выстрел регулирует небольшой конечный автомат. shootLocked помечает иглу как «в полёте» и предотвращает двойную обработку одного и того же выстрела событием transitionend и резервным setTimeout на 180 мс. CSS-переход длится 120 мс; setTimeout на 180 мс — страховка для редкого случая, когда transitionend не срабатывает (например, когда DOM изменяется до завершения перехода). pendingShots буферизует клики, поступившие во время полёта, с лимитом в 3 — клики сверх этого лимита отбрасываются (а не помещаются в очередь), что сохраняет ощущение быстрой стрельбы и не даёт нескольким иглам одновременно лететь к центру. И поражение, и зачёт переводят gameOver в true: главный цикл продолжает крутиться, но rotation больше не обновляется, и сцена «застывает». Чтобы корректно масштабироваться по экрану, игра удерживает фиксированный дизайн-размер 420×720, а внешняя обёртка вычисляет коэффициент масштабирования от размеров viewport и применяет его через transform: scale. Текущая реализация ограничивает масштаб единицей, поэтому маленькие viewport пропорционально уменьшаются, а десктопные — сохраняют исходный размер и не увеличиваются. Благодаря этому проверка столкновений всегда работает в дизайн-координатах с единым набором пиксельных порогов, и на любом экране результат одинаков.

• Главный цикл: requestAnimationFrame, на каждом кадре rotation += speed, всем иглам выставляется transform: rotate(baseAngle + rotation).
• GPU-ускорение: для вращения используется transform, а не left/top, поэтому им занимается композитор браузера — без layout и перерисовки.
• Проверка попадания: 0° в мировых координатах проецируется в координаты диска как normalizeAngle(0 - rotation); длина хорды 2R·sin(Δθ/2) сравнивается с порогом 24px.
• Конечный автомат: shootLocked блокирует двойную обработку, pendingShots ограничен 3 кликами с отбрасыванием избытка (без очереди), gameOver замораживает обновления rotation.
• Завершение выстрела: 120 мс полёта на CSS, transitionend как основной путь + setTimeout на 180 мс как страховка для редкого случая, когда transitionend не срабатывает.
• Масштабирование: фиксированная дизайн-система 420×720; обёртка применяет transform: scale в зависимости от размера viewport, с потолком 1, чтобы десктопы сохраняли исходный размер, а не увеличивались.
• Хранение: в localStorage сохраняется только лучший пройденный уровень. Ничего не отправляется на сервер, нет аккаунтов и таблицы лидеров.