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. (онбординг так сказать).      Геймплей: Выбрав размер проекта себе по силам, Вам нужно открывать Карточки с тегами (открывающий/закрывающий + всегда есть один одиночный). В режиме «Код-ревью» (он по умолчанию отключен), пары нужно открывать в правильном порядке, сначала открывающий, потом закрывающий. Иначе Сеньор будет ругаться. После открытия пары, Сеньор задаёт Вам контрольный вопрос об открытом теге. В режиме Доброго Сеньора количество ошибок не ограничено, в режиме Злого Сеньора (стоит по умолчанию) за каждую ошибку Вы получаете Леща. После трёх Лещей Вас в нокауте выносят с проекта. Следите за временем, Дедлайны – это важно. Верстать можете как в тишине, так и под музыку (включается в меню игры). Будь на Вайбе – так гласит Корпоративная культура.    Вот такая вот игра получилась. Если кто решит поиграть, отпишитесь хоть сколько Лещей словили и удалось ли завершить проект? А ещё интересно, Сеньоры в жизни то злые или добрые? Как у них дела с лещами обстоят?
Vanilla JavaScript. Первый Frontend проект. | Сетка — социальная сеть от hh.ru
Vanilla JavaScript. Первый Frontend проект. | Сетка — социальная сеть от hh.ru Vanilla JavaScript. Первый Frontend проект. | Сетка — социальная сеть от hh.ru