Короткие заметки о JavaScript и маленькие программки.

кран

Симулятор обмена трёх переменных

Конспект
✍️React-симулятор обмена трёх переменных
✍️Ссылка для игры
✍️SVG для выравнивания кругов

Лекция
В прошлых постах мы обсуждали задачу обмена значениями двух переменных. Здесь представляем симулятор для трёх переменных. Три круга обозначают переменные, их цвета — значения. Шесть кнопок покрывают присваивания a=b, b=a, b=t, t=b, a=t и t=a. Нажмите кнопку, и присваивание произойдёт сразу.

Мы использовали React для создания приложения и Vite для сборки. Было несколько интересных моментов, о которых расскажем позже. Начнём с задачи: как расположить три круга в вершинах равностороннего треугольника?

Есть несколько подходов:
Сетка с фиксированными ячейками — плюс: просто; минус: неочевидно и, скорее всего, приблизительно
Canvas — плюс: точные координаты; минус: элементы не кликабельны, холст растровый
SVG — плюс: координаты, кликабельные элементы, лаконичный код
Мы выбрали SVG. Посмотреть код можно на GitHub. На сегодня всё, позже расскажем подробнее об этой технологии.

#education #devJS #devTopic #junior