English / Russian

Code and Magic

Educational demo project from HTML Academy for the 29th stream of the professional online course "JavaScript. Professional development of web interfaces".

How to play

1. Create your own Pendalf.
2. Press the space bar to start the game.
3. Control the character using the arrows on the keyboard.
4. In order to open fire, use Shift!

How to create a unique Pendalf?

1. Click on the avatar icon.
2. Choose a name for your Pendalf.
3. Select a new avatar.
4. By clicking on the robes, eyes and fireball to change their color.
5. Haven't found the perfect combination? Choose from the list of similar ones below!

What is implemented in the game? (by stages of development)

0. Initial version in HTML and CSS, preparation for development in JS.
1. The speed of movement of the magician and fireballs, as well as their sizes, is implemented.
2. The generation of random names, random mantle color, eyes and fireballs is implemented.
3. The function of creating a random magician from the generated data of item 3 is implemented.
4. The modal of settings with the generation of random magicians is implemented.
5. Added event handlers for click, Escape key.
6. Added validation of forms using the Pristine API.
7. Form submission has been implemented.
8. Generation of random magicians has been improved to generate similar magicians with a similar feature.
9. Elimination of rattle.
10. Avatar change has been implemented.

---

Код и Магия

Учебный демо-проект от HTML Academy для 29 потока профессионального онлайн‑курса «JavaScript. Профессиональная разработка веб-интерфейсов».

Как играть

1. Создайте своего Пендальфа.
2. Нажми пробел для запуска игры.
3. Управляй персонажем с помощью стрелочек на клавиатуре.
4. Для того, чтобы открыть огонь, используй Shift!

Как создать уникального Пендальфа?

1. Нажмите на иконку аватара.
2. Выберите имя для своего Пендальфа.
3. Выберите новый аватар.
4. Кликая по мантии, глазам и файерболлу, чтобы изменить их цвет.
5. Не нашли идеальную комбинацию? Выберите из списка похожих ниже!

Что реализовано в игре? (по этапам разработки)

0. Начальная версия на HTML и CSS, подготовка к разработке на JS.
1. Реализована скорость передвижения мага и огненных шаров, а так же их размеры.
2. Реализована генерация случайных имен, случайного цвета мантии, глаз и огненных шаров.
3. Реализована функция создания случайного мага из сгенерированных данных пункта 3.
4. Реализована модалка настроек с генерацией случайных магов.
5. Добавлены обработчики событий на клик, клавишу Escape.
6. Добавлена валидация форм с помощью API Pristine.
7. Реализована отправка формы.
8. Генерация случайных магов улучшена до генерации похожих магов со схожим признаком.
9. Устранение дребезга.
10. Реализована смена аватара.