Как делать крутые челленджи онлайн бесплатно

Кто я?

Всем привет, всем здоровейте! Я тот самый автор первого интерактивного челленджа на Пикуко challenge?. Многих стал интересовать вопрос, как создаются такие челленджи. Пишу этот пост специально для этого. Попытаюсь объяснить максимально просто и доступно, чтобы каждый при желании смог сделать что-то подобное.

* * *

Проблема в понимании

Для начала, я так понимаю, что многие думают, что SVG файл который надо загружать при создании теста - это что-то сложное, какой-то засекреченный формат, который надо находить в интернете готовым или еще что-то подобное.

Но это не так. SVG - это буквально язык кружочков и квадратиков. Можете воспринимать его именно так, это значительно упростит вам жизнь. Давайте разберем простой пример.

* * *

Основы SVG

Слева - код, справа - то как он выглядит.

Вот, например, как можно сделать простенького призрака. Первая строчка - черный квадрат занимающий всё доступное пространство. Иначе говоря фон.
<rect x="0" y="0" width="100%" height="100%" fill="black"/>
где x и y - координаты начала, т.е. верхнего левого угла; width и height - длинна и ширина квадрата. Здесь можно указать во многих величинах, но вам понадобится только px - пиксели и % - проценты от размера полотна. Можно в прицепе обойтись только пикселями. fill - цвет заливки. Можно указать как и стандартные black, red, green и тд. Так и HEX-коды #000000, #ff0000, #00ff00 и тд. Кто не знает что это такое, просто знайте что, в любой онлайн палитре можно скопировать код цвета и прописать его фигуре. Также есть circle(круг), но там вместо x и y используются cx и cy. То есть центы окружности. r - радиус. И самое главное - ellipse. Это тот же самый круг, но вместо одного радиуса r есть rx и ry, то есть грубо говоря кривой круг, овал. Посмотрите на рот призрака. Вот это ellipse rx="10" ry="6".
Помимо этих основных фигур также есть и другие, например, line(линии), polygon(многоугольники) и path(кривые). Но их можете освоить самостоятельно при желании. Вы вполне можете обойтись и без них.  

Первые трудности

И вот вы, весь такой веселый, нарисовали какого-нибудь призрака и бежите вставлять его на Pikuco, но вдруг видите вот это:

Вышеупомянутый призрак после загрузки на Pikuco

Вы ещё даже не успели начать, а злой admin уже засунул палки во все колеса, кроме одного. Для стандартного режима челлендж, к которому мы все так привыкли есть одно простое правило, которое вы все знаете: что не отгадано то серое. Но что тогда это за овалы и почему они не серые? Это ellipse. Так уж вышло, что admin запретил окрашивать абсолютно всё, кроме ellipse и обводки(stroke но ооб этом позже). За что я ему чрезмерно благодарен, ведь без этой маленькой лазейки ничего бы не вышло. И что тогда делать вы спросите, а я отвечу - элипсы, элипсы и еще раз элипсы. Да. Вы всё правильно поняли. 90% всего того что вы видели в моем тесте это элипсы. Фон - это огромный элипс в центре. Лучи солнца это элипс, у которого с cx=5 и cy=50, т.е очень вытянутый. Безумие? Возможно, но а как иначе.

Вы еще даже не успели начать, а злой admin уже засунул палки во все колеса, кроме одного. Для стандартного режима челленджа, к которому мы все так привыкли, есть одно простое правило, которое вы все знаете: что не отгадано, то серое. Но что тогда это за овалы и почему они не серые? Это ellipse. Так уж вышло, что admin запретил окрашивать абсолютно всё, кроме ellipse и обводки (stroke, но об этом позже). За что я ему чрезмерно благодарен, ведь без этой маленькой лазейки ничего бы не вышло. И что тогда делать, вы спросите, а я отвечу: элипсы, элипсы и еще раз элипсы. Да. Вы всё правильно поняли. 90% всего того, что вы видели в моем тесте, это элипсы. Фон - это огромный элипс в центре. Лучи солнца - это элипс, у которого cx=5 и cy=50, то есть очень вытянутый. Безумие? Возможно, но а как иначе?

Прочие проблемы

Не буду томить. Помимо цветов на основные фигуры, admin вырезал еще 70% всего SVG. Грустно? Да. Но многие из них можно восстановить костылями. Например, квадрат. Помните, я сказал, что цвет работает помимо круга еще и на обводку - stroke. Если говорить на простом языке, то обводка это буквально обводка. У каждой фигуры можно прописать помимо цвета, координат и размера еще кучу параметров, и один из них stroke.

Вот кому надо код этого SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="450" viewBox="0 0 300 150">
<!-- С обводкой: --><rect x="20" y="20" width="100" height="100" fill="#ff6666" />
<circle cx="70" cy="170" r="50" fill="#6666ff" />
<!-- С обводкой: -->
<rect x="180" y="20" width="100" height="100" fill="#ff6666" stroke="#000000" stroke-width="10" />
<circle cx="230" cy="170" r="50" fill="#6666ff" stroke="#000000" stroke-width="10" />
</svg>

И вот что делать, если вам прям очень нужен прямоугольник? Да всё просто. Сделайте тонкую линию с огромной обводкой.

* * *

Style и анимации

Поздравляю, сейчас вы за 10 минут узнали то, что я методом проб и ошибок узнавал не один час. Теперь вы можете создавать всё те же обычные челленджи, но, например, сделать цвет океана на карте мира синим. Но полагаю, вы сюда не за этим пришли. Как же взаимодействовать с курсором? Здесь надо освоить еще одну небольшую лазейку, которую забыл удалить админ. Это стили, или как их называет компьютер <style>. Они нужны для создания движения, анимации, а также некоторых других функций, но для простой игры они вам не понадобятся.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 300 150">
<style>
@keyframes pulse {
0% { transform: scale(1); }
100% { transform: scale(1.2); }
}
.animated {
animation: pulse 1s infinite alternate;
transform-origin: 100px 100px;
}
</style>
<rect x="50" y="50" width="100" height="100" fill="#6666ff"  class="animated" />
</svg>

Поверьте, он движется, честно

К сожалению, я не могу на одном скриншоте показать работоспособность этого SVG. Кто хочет, вставьте этот код в любой онлайн SVG reader. Всё кажется громоздким и сложным, но на самом деле всё очень просто. После того как вы сделали какую-либо фигуру, допишите в конце class="название класса". В моем случае это animated, но вы можете написать что угодно. Затем сверху между <style> и </style> вы должны прописать свойства этого самого class. На самом деле в нем может быть любые свойства объекта: цвет, обводка, анимация, прозрачность и тд. Но так как всё это мы можем прописать и в самом объекте, для простоты не будем этого делать. Оставим только анимацию. Так ладно, давайте разбираться, как это делать:
1. Вы пишите название класса с точкой в начале и фигурными скобками в конце, например, .animated {}
2. Между фигурными скобками для удобства нажимаем enter и с новой строки (находясь внутри скобок) присваиваем анимацию. Для этого вы пишите animation: *название анимации* *сколько секунд она длится*s infinite alternate; Прошу заметить точку с запятой в конце, ни в коем случае не забывайте ее ставить. Название может быть любое. infinite - это сколько повторять анимацию. alternate - делает так, чтобы после конца анимации она повторяла всё то же самое в обратном порядке, чтобы вернуться в начальное положение. На простом языке анимация смещения на 100px без alternate сдвинет его вправо, а затем моментально вернет в изначальное положение. Здесь есть миллион разных свойств по типу задержки, сглаживания и тому подобного, но если я буду их все описывать, то вы будете читать этот пост до завтра.
3. transform-origin: 100px 100px; - это центр, откуда играть анимацию. Легко понять, например, на вращении. Если укажете координаты центра самого объекта, он будет крутиться на месте. Если укажете любые другие координаты, он будет вращаться вокруг них как бы по орбите.
4. Мы подошли к самому главному - сама анимация. Вы также как и в случае с class должны прописать ей свойства. Но немного другой синтаксис. Вы пишите @keyframes *название анимации* {}. Важно: название анимации должно совпадать с тем, что вы прописали в классе.
5. Прописывайте саму анимацию. Ставьте просто, в какой момент и что должно стать с объектом. Например:
0% { transform: scale(1); }
100% { transform: scale(1.2); }
Значит, что в самом начале на 0% объект будет изменен до своего стандартного размера. То есть не изменится. А вот в самом конце на 100% увеличится в 1.2 раза. Учитывая infinite и alternate, он будет бесконечно увеличиваться и уменьшаться.
Помимо scale() есть еще rotate(_deg), где вместо подчеркивания вы пишите градус. translateX(_px) для смещения по X и translateY(_px) для смещения по Y. Этого вам хватит на большинство идей. Также есть и другие анимации по типу прозрачности и смены цвета, но опять же в другой раз об этом.

Вот вам картинка, чтобы не было "стен текста". Хотя как тут без них

* * *

Якоря и ссылки

Если вы дочитали до этого момента, то вы освоили 80% всего, что необходимо. Остается последнее, самое простое, но не менее важное - якорь. Многие, возможно, заметили, что при нажатии ЛКМ в моем челлендже в конце ссылки меняется значение. Это и есть якорь. Грубо говоря, мы просто добавляем в конец ссылки что-то, а потом смотрим: если в конце ссылки есть это "что-то", то, например, вывести какую-нибудь менюшку. Всё очень просто, но вот для реализации придется освоить несколько нововведений.

Cамая простая реализация якоря

Что здесь происходит? Изначально на экране 2 кнопки. Если нажимаете первую, выводится ЭКРАН 1. Если нажимаете на вторую, ЭКРАН 2. Вы уже должны понять большую часть кода за исключением этих строк:

•  display: block/none; - показать/скрыть класс
• #btn1:target ~ .screen1 - тут сразу два. :target - как раз та самая проверка: если в конце ссылки есть это "что-то". Если btn1, то ... Затем мы через ~ указываем, что меняем. В этом случае это .screen1. Затем в фигурных скобках указываются свойства. Грубо говоря, если вы просто напишите .screen1 {display: block;} - это включит отображение .screen1 по умолчанию. Если вы перед этим добавите #btn1:target ~, то отображение будет включено тогда, когда в ссылке есть якорь #btn1.
• <g id="btn1"></g> - вот так надо, так сказать, объявить якорь в самом начале, чтобы потом компьютер знал, с чем работать. Можно сделать и по-другому, но советую делать именно так, чтобы проблем точно не возникло. Вместо btn1 можно написать любое название. Кстати, это тоже лазейка, на поиск которой у меня ушло более 2 часов. А именно вот эта буква g. Проблема в том, что все пользуются блоком div, но админ его вырезал. А g - это так сказать устаревший всеми забытый аналог.
• <a href="#btn1">...</a> - ссылка. Буква a означает ссылку. Всё, что будет находиться между <a> и </a> будет кликабельным и переносить на якорь btn1 или любой другой, который вы укажите. Но не забудьте поставить #, без него работать ничего не будет.
• <g class="screen screen1">...</g> - снова буква g, которая показывает границы группы. Очень легко запомнит g - группа. Вы указываете class и его свойства будут дублироваться на всё что находится между <g> и </g>. Можно указывать несколько классов через пробел, как показано в примере.
• Остается только текст, но разбирать его я не вижу смысла, так как он достаточно простой, всем и так должно быть всё понятно.

* * *

Прочее

Вот мы подошли к самому концу. Самые последние завершающие функции, которые расширят ваш инструментарий. И первое, о чем хочется сказать, это :hover. Используется в стилях также, как :target, но срабатывает при наведении курсора на объект. Например, в моем тесте на третьем уровне курсор надо было держать в белом круге. Я просто проигрываю анимацию только тогда, когда курсор на круге. Если он выходит, то анимация сбросится в нулевой кадр.

Если курсор на зеленом круге, то синий круг увеличивается и краснеет

Забыл то, без чего вы даже круг не сделаете. Весь код должен находиться между <svg xmlns="http://www.w3.org/2000/svg" width="ширина" height="высота"> и </svg>. Скажу так, полотна 1000х1000px хватит с головой, так как это размер видимой области. Но вы также можете работать и за её пределами.

Советы

Также прошу перед началом создания теста взять во внимание пару советов:

• Прошу, не пытайтесь сразу делать что-то сверх объемное и сложное. Начните с простого. Москва не сразу строилась. Для начала освойте все инструменты, чтобы затем можно было комфортно заниматься разработкой. Если вы только начинаете, сделайте простую игру. И пусть это будет 60 кликов по движущейся цели. Это быстро, понятно и порой даже весело.
• Используйте нейросети. Хоть я ненавистник нейро-контента, но на самом деле лучше сделать пару запросов дипсику, чем сидеть 3 часа и искать, где вы забыли точку с запятой.
• Группы <g> - очень недооцененный инструмент. Вы можете обвернуть в этот блок что угодно, а затем одним transform="translate(...)" сдвинуть его куда угодно, а внутри координаты не менять.
• Используйте невидимые объекты, чтобы закрывать курсору доступ. Поверх, например, кнопки или объекта с :hover поставьте невидимый круг (или квадрат, так как он невидимый, мы можем его использовать), тем самым игрок не сможет взаимодействовать с этим объектом.
• Используйте комментарии. Это некие подсказки для вас самих, которые игнорируются компьютером. Пишутся так: <!-- Тут пишите что угодно -->. Вы спокойно можете забыть, за что отвечает отдельная часть кода. А если там будет комментарий, в котором написано, что это, то у вас никогда не возникнет таких проблем.

Вот и всё

Очень жду похожих работ от вас! Креативных людей на Пикуко хватает. Если есть желание, а теперь и возможность - творите. Надеюсь, в скором времени увидеть эту самую "новую эру челленджей". Также обращение к дорогому и неповторимому admin: не надо, пожалуйста, запрещать эти лазейки. Они прекрасны. Всем флаг в руки, если через месяц никто ничего не сделает, я обижусь.