В этой серии проектов я поставил себе цель изучить разные аспекты нативных HTML/CSS/JS. Стиль выбрал простой, вдохновляясь старыми компьютерами из серии игр Fallout. В основном, я акцентировался на изучение таких аспектов JS как canvas, svg, взаимодействие с audio, video, local storage, взаимодействие с внешними api через AJAX запросы. Попрактиковался в разделение кода на модули, классы, а также старался держать код чистым и понятным. Какие-то приложения схожи по методам разработки, поэтому на них учился переносить и углублять опыт с предыдущих проектов. По мере накопления опыта планирую возвращаться и рефакторить эти мини приложения.
В этом проекте я решал, как соединить разметку с JS, сделать каждой кнопку интерактивной, прописать арифметическую логику для Input.
Тут я научился взаимодействовать с audio элементами в разметке, узнал какие есть методы и свойства у них.
В этой игре я изучал возможности canvas. Как взаимодействовать с ним, как управлять элементами с помощью клавиатуры и мыши, анимировать объекты. Решал, как прописать логику проигрыша и победы, стартового меню и меню EndGame.
Здесь я решил создать аналоговые и цифровые часы, чтобы попрактиковаться в анимации, в использовании объекта Date, конвертации времени и отображении его в разметке.
Тут я научился взаимодействовать с local storage для хранения данных. Также решал вопросы по фильтрации todo задач (законченные, незаконченные...), отображении самих задач, удалении и добавлении.
В этой игре я, как и в игре BlockKiller, учился прописывать коллизии между объектами, управление змейкой с помощью клавиатуры. А также писать логику самой игры.
Здесь я создал простой генератор паролей. Ничего сложного, поработал с рандомизацией значений и глобальным объектом Navigator для копирования пароля в буфер обмена.
Также как и в todo приложении, здесь я развивал навыки взаимодействия с local storage. По сути, функционал и приемы разработки такие же, только назначение приложения другое.
Здесь научился создать progressBar, который реализовал через svg в разметке и JS.
Тут реализовал прототип опросника, в котором потренировался во взаимодействием с данными, фиксированием ответов и выводом результатов.
Тут научился взаимодействовать с внешним API (в частности с погодным API OpenWeatherMap). Попрактиковался фетчить, изучил промисы, а также поработал с объектов Geolocation. Больше узнал про такие константы как келвин, фаренгейт, цельсий и конвертации их между собой. Но, как выяснилось из документации github, в github pages это приложение не сработает) Но локально все работает.
Как оказалось, над играми мне работать больше всего нравится, поэтому их тут достаточно. В PingPong я поучился писать AI противника. Вместо простого Score из цифр реализовал визуальный счет.
В этой игре появилось больше сложных задач. Прописать коллизию объектов, логику для очищения рядов, отрисовки самих элементов tetris, их вращение. Также повозился с задачей как отрисовывать следующий элемент на верхней правой панели. Сделал так, что игрой можно управлять как с клавиатуры, так и на цифровой панели со стрелками.
Тут я научился управлять элементом video из JS. Решил стилизовать как старый телевизор, где проигрывается часть игры Space Invaders. Здесь я также поработал с svg и стилизацией стандартного элемента input(range) для управления прогрессом воспроизведения и громкостью звука.
Тут я поработал с инлайновыми svg. Научился управлять ими из css и js.
В этой игре я еще глубже решил разобраться, как управлять инлайновыми svg. Поэтому отрисовал все нужные мне элементы в Adobe Illustrator, добавил им анимацию и звук. Поработал опять же с объектом Date, слушателями событий, разбиением кода на модули и на классы.