Структура и элементы страницы

HTML (HyperText Markup Language — язык гипертекстовой разметки) описывает структуру и содержание документа. Теги обозначают элементы страницы, а атрибуты уточняют их свойства и связи.

Оформление элементов

CSS (Cascading Style Sheets — каскадные таблицы стилей) описывает представление документа. Правило CSS состоит из селектора и блока объявлений. Каждое объявление содержит свойство и его значение.

.panel {
  background-color: white;
  padding: 12px;
  border: 1px solid green;
}

Команды, данные и рисование

JavaScript — язык программирования, который задаёт поведение страницы: выполняет вычисления, изменяет элементы, обрабатывает события и управляет графикой Canvas.

Элементы управления и смысловые разделы

Новые элементы сразу используются в панели управления моделью. Они уточняют назначение частей документа и делают интерфейс понятнее.

<section>
  <h2>Управление</h2>
  ...
</section>

<label for="speed">Скорость</label>

<input id="speed" type="range"
       min="1" max="5" step="1" value="2">

<output id="speedValue"
        for="speed">2</output>

Компоновка и состояния интерфейса

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chip {
  --accent: #165d8d;
  border-color: var(--accent);
  transition: 0.2s;
}
.chip:hover {
  color: white;
  background: var(--accent);
}

Задания используют изученные темы, но имеют новые формулировки и примеры.

Проверьте основу модели

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

function tick() {
  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;

    if (p.x < p.r ||
        p.x > canvas.width - p.r) {
      p.vx = -p.vx;
    }

    if (p.y < p.r ||
        p.y > canvas.height - p.r) {
      p.vy = -p.vy;
    }
  });
  draw();
}

Как перебрать все пары частиц

Один цикл выбирает первую частицу пары. Второй цикл выбирает вторую частицу из элементов, расположенных правее в массиве. Поэтому частица не сравнивается с собой, а одна и та же пара не проверяется дважды.

for (let i = 0;
     i < particles.length;
     i++) {

  for (let j = i + 1;
       j < particles.length;
       j++) {

    const a = particles[i];
    const b = particles[j];
    // здесь проверяем пару a и b
  }
}

Расстояние между центрами

Два круга соприкасаются или пересекаются, если расстояние между их центрами не превышает сумму радиусов.

function distance(a, b) {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.sqrt(dx * dx + dy * dy);
}

function isColliding(a, b) {
  return distance(a, b) <= a.r + b.r;
}

Отметьте столкнувшиеся частицы

Сначала реализуйте надёжное обнаружение столкновения. Физически точный расчёт нового движения требует дополнительных формул, поэтому в базовой версии столкновение обозначается изменением цвета.

function findCollisions() {
  particles.forEach(p => {
    p.hit = false;
  });

  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1;
         j < particles.length; j++) {
      const a = particles[i];
      const b = particles[j];

      if (isColliding(a, b)) {
        a.hit = true;
        b.hit = true;
      }
    }
  }
}

function drawParticle(p) {
  ctx.beginPath();
  ctx.arc(p.x, p.y, p.r,
          0, Math.PI * 2);

  if (p.hit) {
    ctx.fillStyle = "#c8413a";
  } else {
    ctx.fillStyle = "#1d5a49";
  }

  ctx.fill();
}

if (isColliding(a, b)) {
  a.vx = -a.vx;
  a.vy = -a.vy;
  b.vx = -b.vx;
  b.vy = -b.vy;
}

Обработчики событий через addEventListener

Событие сообщает программе, что произошло определённое действие: пользователь нажал кнопку, переместил ползунок или изменил значение поля. Метод addEventListener назначает функцию, которая будет вызвана при наступлении выбранного события.

const pauseButton =
  document.getElementById("pause");

pauseButton.addEventListener(
  "click",
  function () {
    running = !running;
  }
);

const speedInput =
  document.getElementById("speed");

speedInput.addEventListener(
  "input",
  function () {
    speed = Number(speedInput.value);
  }
);

Добавьте управление моделью

<section class="controls">
  <button id="pause">Пауза</button>

  <label for="speed">Скорость</label>
  <input id="speed" type="range"
         min="1" max="5" value="2">
  <output id="speedValue"
          for="speed">2</output>
</section>

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

button {
  transition: background-color 0.2s;
}

button:hover {
  background-color: #1d5a49;
}

let running = true;
let speed = 2;

pauseButton.addEventListener("click", function () {
  running = !running;
  pauseButton.textContent = running ? "Пауза" : "Пуск";
});

speedInput.addEventListener("input", function () {
  speed = Number(speedInput.value);
  speedValue.textContent = speed;
});

function tick() {
  if (!running) return;
  // изменение координат с учётом speed
}

Выберите одно расширение модели

Сначала сохраните работающую базовую версию проекта. Затем создайте копию файла и добавьте одно расширение.

Проверьте результат занятия