Спортивная мишень
Режим target в Playground демонстрирует кольца, десять событий и итоговый счёт.
Механика
Преобразуйте нормализованное попадание в координаты Canvas. Измерьте расстояние до центра цели в тех же единицах. Внешнее кольцо задаётся радиусом в пикселях логического Canvas; поэтому круг визуально остаётся кругом, даже когда физическое полотно имеет отношение сторон 16:9.
Учёт
Каждое новое событие увеличивает shots, успешное попадание внутри игровой цели — hits. Счёт зависит от кольца. Событие с уже обработанным shot_id не учитывается. На паузе и во время countdown очки не начисляются. Итог формируется после десяти принятых событий, а не десяти нажатий на спуск вне полотна.
Проверка
Проверьте центр, край кольца, попадание вне круга, углы полотна и повтор одного shot_id. Изменение CSS-масштаба не должно менять начисление для одной физической точки. Коммерческие правила точности, длительности и tie-break задаются отдельно.
Пример кода
Фрагмент интеграции: переменные игрового проекта задаются приложением. Полный запускаемый пример — в Playground.
const p = toCanvasPoint(hit, {width: canvas.width, height: canvas.height});
const radius = Math.hypot(p.x - target.x, p.y - target.y) / target.r;
const points = radius > 1 ? 0 : Math.max(1, 10 - Math.floor(radius * 10));