Vanilla JavaScript. Первый Frontend проект.
Или «Лещи» от сеньора в игре «Junior Верстальщик». Прошлый пост я посвятил своему самому первому проекту на Java, но потом, волею судьбы, мне пришлось переключиться на изучение frontend разработки. Посмотрев, что к чему, стало понятно, что frontend нынче пишут в основном, используя ряд популярных фреймворков (библиотек) и двигаться нужно в этом направлении. Но обучение своё я начал, естественно, с азов. HTML, CSS и, конечно же, чистый, ванильный JS. И первый свой Frontend проект я решил сделать именно в этом инструментарии, т.е. максимально простым, ванильным и, главное, на вырост, т.е. что бы была возможность всегда к нему вернуться и что-то добавить, дописать на чистом JS (дабы не забывать те самые азы). Подумав, я решил, что идеальным для этого будет каталог простеньких игр, написанных на JS, к увеличению числа которых и можно в любой момент вернуться. Забегая вперёд, скажу, что первой (и пока единственной) игрой в этом каталоге стала игра «Junior Верстальщик». Но сначала пара слов о самом сайте: https://rommcl.github.io/CasualGamesRomMcl/
- дизайн прост до безобразия, но мне самому он почему-то так «зашёл», что до сих пор радует;
- сам сайт стилизован с использованием Bootstrap5, а игры, как и задумывалось, ручками, на чистом CSS;
- сайт, конечно же, адаптивный, но подход Mobile First я не применял, поэтому изначально игры рассчитаны под десктоп, хотя и под мобилку подстраиваются;
- есть страничка с погодником, который там «ни к селу, ни к городу», но мне очень хотелось пощупать jQuery (это единственная страничка на нём) и поработать с API;
- главная страница… Тут, наверное, отдельно стоит остановиться на Стасике, который моим друзьям (первым юзерам) почему-то очень понравился. Стасик- это жук, который живёт на главной странице. Если его не трогать, он живёт своей жизнью, ползает по своим жучачьим делам и поёт песенку. Но если Вы попытаетесь его обидеть (прихлопнуть), он, естественно, изменит своё поведение и будет категорически этому противостоять. Его я писал, осваивая такие понятия, как анимации, всплытие и погружение событий и т.д. Пришлось даже тригонометрию вспомнить (тангенсы/котангенсы всякие). Ну а теперь о флагманской игре сайта: «Junior Верстальщик» https://rommcl.github.io/CasualGamesRomMcl/games/layoutDesigner.html Игра, как вы поняли, тематическая, должна зайти, собственно верстальщикам, фронтендерам и web-дизайнерам, знакомым с вёрсткой. Хотя и гражданин любой другой специальности справится без особых проблем. Лор: Вы – начинающий верстальщик. У Вас есть руководитель – Сеньор, который контролирует Вашу работу над проектом. В меню игры есть F.A.Q. (онбординг так сказать). Геймплей: Выбрав размер проекта себе по силам, Вам нужно открывать Карточки с тегами (открывающий/закрывающий + всегда есть один одиночный). В режиме «Код-ревью» (он по умолчанию отключен), пары нужно открывать в правильном порядке, сначала открывающий, потом закрывающий. Иначе Сеньор будет ругаться. После открытия пары, Сеньор задаёт Вам контрольный вопрос об открытом теге. В режиме Доброго Сеньора количество ошибок не ограничено, в режиме Злого Сеньора (стоит по умолчанию) за каждую ошибку Вы получаете Леща. После трёх Лещей Вас в нокауте выносят с проекта. Следите за временем, Дедлайны – это важно. Верстать можете как в тишине, так и под музыку (включается в меню игры). Будь на Вайбе – так гласит Корпоративная культура. Вот такая вот игра получилась. Если кто решит поиграть, отпишитесь хоть сколько Лещей словили и удалось ли завершить проект? А ещё интересно, Сеньоры в жизни то злые или добрые? Как у них дела с лещами обстоят?
· 09.09.2025
Вечерок обеспечен))
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 09.09.2025
Не Unreal Engine 5, конечно, зато на любой машине потянет 😂
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 09.09.2025
Ну что я могу сказать, жук бесподобен, динамика, эргономика, .. Успеваю🤣🤣🤣
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 09.09.2025
На погоду хочется, конечно, что-то такое 😜
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 09.09.2025
Верстальщик - вещь. Чуть рваная динамика для меня, но это от того, что лёжа.., или возраст 🧔 Приспособился. Для развития скорочтения прям, кайф, думаю Ну и за серенький - отдельный респект.
А картинки сами делаете? Нравится баланс страшности-ужасности-приемлемости 🤔
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 09.09.2025
С погодником там на самом деле интересная штука. Не видная пользователю, но разработчик может улыбнуться. Используемый API (ресурс откуда информация о погоде приходит) – буржуйский, и он против нас санкции ввёл, и по идее, если пользователь под российским IP на сайт заходит (без VPN), то данные приходить не должны. Но, как видите, всё работает. 🙂 Я об этом позже на примере другого приложения расскажу. А вот внешний вид погодника передизайнить нужно. Муза придёт, обсудим с ней варианты.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 09.09.2025
Я всего лишь скромный фронтендер, причём не особо опытный. Т.е. я с кодом люблю работать. Мастерством web-дизайна, графического дизайна и уж тем более game-дизайна я, к сожалению, не обладаю. Поэтому выкручиваюсь как могу. 🙃 Могу найти готовую растровую картинку и посидеть в Photoshop, подогнав под свои нужды, или на её основании нарисовать SVG в Figma. А сейчас ещё и ИИ с этим могут помочь.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён