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), написанная с целью обучения, где мы попытаемся разбить портянку старого кода и создать свою Чистую архитектуру проекта, придерживаясь ООП стиля программирования с использованием паттернов.

We are developing an interactive game of puzzles for children with animals using Typescript. We will do a refactor of the old code and try to write with pure architecture. Where we will use the design of the pattern.

Сложность урока/difficulty of the lesson: 🌕 🌕 🌕 🌕 🌗 (Очень сложно/Very hard)

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

• Урок 10 CI/CD: Build и Deploy нашей игры на TS для публикации в Git Pages при помощи GitHub Actions.
  📺 YouTube commit: add deploy

Тот кто смог :)

• 🏆 https://github.com/davidbayra/game-puzzle-animals / 🕹 Play
• 🏆 https://github.com/karfagen86/tutorial-dnd-animals-v2 / 🕹 Play

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

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

На кофе:

• ☕️ boosty
• ☕️ donationalerts