Урок 16. Финал: игра «Поймай кружок»

Новой теории почти нет — только одна вещь, без которой игру не сделать: как понять, куда именно кликнули по холсту.

Координаты клика

Событие клика знает координаты относительно всего окна, а нам нужны — относительно холста. Разницу даёт getBoundingClientRect:

holst.addEventListener('click', function (e) {
  const ramka = holst.getBoundingClientRect();
  const mx = e.clientX - ramka.left;
  const my = e.clientY - ramka.top;
});

Попали или нет

Клик засчитан, если расстояние от него до центра кружка меньше радиуса. Расстояние между двумя точками считают по теореме Пифагора:

const rasstoyanie = Math.sqrt((mx - x) * (mx - x) + (my - y) * (my - y));
if (rasstoyanie < r) { /* попал */ }

Как устроена игра

1. функция narisui стирает холст и рисует кружок в точке (x, y);
2. функция pereprygni ставит кружку новые случайные координаты и вызывает narisui;
3. по клику проверяем попадание: если да — увеличиваем счёт и вызываем pereprygni;
4. в самом конце один раз вызываем narisui, чтобы кружок появился на старте.

Частые вопросы