РАЗРАБОТКА ИГРЫ с НУЛЯ за 10 часов! React / TS / Zustand
🔥 Оформить премиум подписку -
🖥 Скачивай исходник( стартовый проект для самостоятельной практики) или играй прям на платформе -
В этом видео мы создадим игру с нуля за 10 часов, используя мощный стэк: React, TypeScript, Zustand, Framer-motion, Tailwind и Bun. Погрузитесь в процесс разработки на React (reactjs, реакт) и TypeScript (TS, Тайпскрипт). Мы покроем все - от начальной инициализации PWA до создания UI компонентов и управлением состояниями через Zustand. Увидите, как настроить цвета, создать колоды карт, и многое другое. Это идеальное видео для тех, кто хочет углубиться в разработку игр и изучить новые технологии!
В этом видео:
- PWA
- Игровые механики
- Анимации
- Игровой стол
- Атака картой и выбор таргета
- И другие темы в тайм-кодах.
🍥 Тема в редактор/IDE - Catpuccin icons / Lunar eclipse golden hour (наверно 🤔)
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze | KZZI K75Pro / Moment linear switch
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00:00 - Начало
00:02:36 - Стэк
00:03:06 - ДЕМО игры
00:07:22 - Предисловие
00:13:00 - Обзор карт
00:20:00 - Инициализация PWA
00:39:20 - Базовые настройки
00:44:40 - Цветовая схема
00:46:30 - Алиасы
00:48:50 - UI компоненты
01:27:50 - Карточки
01:31:00 - Типы карт
01:35:50 - Zustand (state)
01:38:36 - ВАЖНЫЙ ДИСКЛЕЙМЕР
01:39:20 - Описываем типы store
01:51:00 - Создание колоды
01:56:00 - Начало
01:59:00 - Завершение хода
02:12:00 - Карта на стол
02:17:00 - Атака карты
02:28:24 - Атака героя
02:37:00 - Главный компонент
02:52:00 - Игровой стол
03:09:40 - Компонент карты на поле
03:17:00 - Карты в руке
04:08:18 - ЭМОЦИИ
04:27:37 - Фикс багов анимации
04:35:00 - Мана
04:53:00 - Карточка героя
05:07:30 - Музыкальный плеер
05:16:26 - ЭМОЦИИ
05:18:44 - Загрузочный экран
05:40:00 - Правим визуал
05:47:00 - Уведомления
05:57:00 - Правим визуал
06:18:00 - Возврат карты в руку
06:30:00 - Фикс багов
06:36:00 - Улучшаем стартовую колоду
06:45:00 - Набор карт в начале
07:00:00 - Добор карт
07:14:00 - Атака картой и выбор таргета
07:45:50 - Продвинутые уведомления
08:26:00 - Селекты
08:40:00 - Фикс бага с маной
08:47:00 - Анимация удаления ХП
09:15:00 - Самое сложное Игра от компьютера
10:17:00 - Тест на смартфоне
👉 Все ссылки ( настройка редактора) и информация обо мне -
Контакты для связи
partners@ - Реклама и сотрудничество
work@ - Если хотите к нам в команду
#React #TypeScript #Zustand #RedGroup
506 views
1811
506
1 month ago 01:04:28 1
STALKER 2 ВЫШЕЛ! - ЧЕСТНЫЙ ОБЗОР И ПЕРВЫЙ ВЗГЛЯД НА RTX 4090
1 month ago 00:10:44 1
Как работает STALKER 2: Heart of Chornobyl на Xbox и ПК? Технический обзор
2 months ago 00:01:46 1
|120 second| - Marvelous Designer - 001 - Как добавить и выровнять пуговицы