Проект

Данный проект по сути представляет собой объединение двух веб-приложений: Learn Letters и Guess Animal. Главная страница styleTest содержит в себе ссылки на оба приложения.

Learn Letters

Приложение Learn Letters содержит главное меню и три раздела: теория, тест и галерея. В разделе "Теория" пользователь может, собственно, учить буквы посредством нажатия на соответствующий графический символ, в ответ на что программа выдаёт голосовое воспроизведение. В разделе "Тест" можно проверить свои знания, попробовав правильно выбрать букву, которая соответствует звуку, называемуму в случайном порядке. В разделе "Галерея" пользователь может нажать на понравившееся ему изображения, чтобы услышать и увидеть название того, что на нём изображено. В главном меню есть возможность проверить громкость, а также выбрать предпочтительный голос: мужской/женский.

3. Guess Animal

На самом деле, здесь особо нечего говорить, приложение налицо. Первоначально я сделал именно это приложение, после чего работал над Learn Letters.

4. Почему выбрал этот проект?

У меня есть младшая сестричка, которой пять лет, а я параллельно изучению js проходил курс веб-разработки, поэтому решил попрактиковаться и сделать для неё игру с угадыванием животных. Каково же было моё удивление, когда я узнал, что в пять лет она не знает букв. Тогда я и решил сделать игру Learn Letters.

5. Ход разработки

Разработка велась в четыре этапа: на первом проработал основу, задал механизмы работы. На втором занимался адаптивным дизайном, чтобы приложение одинаково хорошо смотрелось на всех устройствах и во всех браузерах (на тот момент я ещё не знал про правило @media и технологию Bootstrap, поэтому вручную долго возился с этим). На третьем этапе сжимал медиафайлы. На четвёртом старался максимально устранить говнокод.

6. Чем горжусь в проекте?

1) Алгоритмически, пожалуй, самым значительным для меня моментом была реализация алгоритма подсчёта очков в разделе "Тест". У меня крайне мало опыта в разработке, поэтому вышло так, что из-за массовых вложений подсчёт правильных ответов влиял на подсчёт неправильных, и наоборот, в итоге реализовал такую штуку: вносил состояние игры после каждого ответа в массив по типу [0, 1, 1, 1, 4, 4, 6] и с помощью метода map() проверял разницу на каждом шаге, получая на выходе массив типа [0, 0, 0, 0, 1, 0, 1], после чего с помощью метода reduce() получал количество неправильных ответов, которые в итоге отнимал от общего числа ответов. Скорее всего, я просто запутался и поэтому пришлось делать так сложно — быть может, можно сделать и проще. Я просил своих друзей, которые уже давно занимаются разработкой взглянуть на код, чтобы посмотреть, можно ли проще, но им было не особо интересно, поэтому, возможно, Вы скажете мне, как это можно было реализовать по-другому, когда взглянете на код.

2) С точки зрения дизайна самым важным для меня есть то, что в галерее после закрытия конкретного изображения экран возвращается в то место, в котором был до открытия. Как оказалось, это реализуется в одну строчку, но я всё же немного помучился с этим.

7. Будущее проекта

Я хотел залить Learn Letters в VK Apps, но там надо платить за модерацию, поэтому пока не сделал этого. У меня есть небольшой опыт работы с Apache Cordova, поэтому, возможно, в будущем я переведу приложуху на мобильную платформу, ведь в Play Store у меня уже имеется аккаунт разработчика, и там проклятые капиталисты бабки сдирать не будут.

8. Пасхалки

Не знаю, заметили ли Вы, но в тесте последней всегда идёт буква "Я", независимо от рандома.

9. Заключение

Не судите строго. Уповаю на Васъ. Вашъ покорный слуга Никита.

P.S.

Скрипт particles.js — не мой, нашёл его для красоты.

Сайт использует cookies, потому что иначе всё работало бы через жопу, поэтому, проверяя мою работу, Вы подтверждаете своё согласие на использование файлов cookie в соответствии с настоящим уведомлением в отношении данного типа файлов. Если Вы не согласны с тем, чтобы на сайте использовался данный тип файлов, то Вы должны соответствующим образом установить настройки Вашего браузера или не использовать сайт.