yesworld / tutorial-dnd-animals

A children's interactive puzzle game with animals, written for the purpose of learning TypeScript / JS and knowledge of OOP in the front end. We take a simple old game code and refactor everything with a clean architecture using design patterns.

Уроки как создать чистую ООП архитектуру для детской игры. / Lessons on how to create a pure OOP architecture for a children's game.

Детская интерактивная пазл игра с животными на ts (TypeScript), написанная с целью обучения, где мы попытаемся разбить портянку старого кода и создать свою Чистую архитектуру проекта, придерживаясь ООП стиля программирования с использованием паттернов.

Сложность урока: :full_moon: :full_moon: :full_moon: :full_moon: :last_quarter_moon: (Очень сложно)

Image by Freepik

Список уроков на ютубе

• Урок 0: Подготовка проекта. Установка Vite, Prettier и Konva.
  📺 YouTube

• Урок 1: SVG нарезка и содание отдельных файлов c животными. Подготовка файла источника sources с набором координат.
  📺 YouTube git-branch: tutorial-01

• Урок 2: Создание ImageLoaderService по загрузке изображений. Добавление типов для TS.
  📺 YouTube git-branch: tutorial2-create-image-loader-service

• Урок 3: Применяем пораждающий паттерн Билдер (Builder). Приводим проект к ООП стилю.
  📺 YouTube git-branch: tutorial3-create-game-builder

• Урок 4: Применяем пораждающий паттерн Фабрика (Simple Factory). Делаем небольшой рефакторинг.
  📺 YouTube git-branch: tutorial4-create-konva-factory

• Урок 5: Применяем анти паттерн Одиночка (Singleton).
  📺 YouTube git-branch: tutorial5-create-pattern-singleton

• Урок 6: Плюсы/минусы Синглитона в TypeScript. Создаем сервис для работе с размерами игры в ООП стиле.
  📺 YouTube git-branch: tutorial06-create-canvas-size-service

• Урок 7: Применим SRP - принцип единой ответственности в TypeScript (SOLID).
  📺 YouTube git-branch: tutorial07-srp-animal-manager

• Урок 8: Живой пример поведенческого паттерна Наблюдатель (Observer) на TypeScript / JavaScript.
  📺 YouTube git-branch: tutorial08-animal-observer

• Урок 9: Создаем интерфейс для работы с игрой и добавим canvas confetti в callback завершения игры.
  📺 YouTube git-branch: tutorial09-create-api-game-add-confetti-to-game

Как ты можешь помочь проекту?

• ⭐️ Поставь звезду проекту tutorial-dnd-animals (справа наверху этой страницы).
• 📺 Подпишись на канал.
• 💬 Оставь комментарий под видео.
• 👍 Воткни свой царский лайк.

На кофе:

• ☕️ donationalerts