tetrisJS

link on github pages : https://valdemarus21.github.io/tetrisJS/index.html

• Введение
  Проект tetrisJS - является полноценной копией оригинальной игры тетрис. Он реализован с помощью такого стэка :

1. HTML
2. CSS
3. JS
4. TypeScript

Структура папок и файлов : Проект имеет древовидную структуру :

• .git (папка сохранений гитхаб)
• dist (папка с уже переконвертированным javascript в собранной версии)
• node_modules (папка с модулями и зависимостями)
• src (папка, в которой содержится разбатываемые файл проекта)
  • css (стили, используемые в проекте)
  • img (папка с картинками, которые используются в проекте)
  • ts (папка, которая содержит весь typescript-код проекта)
• index.html (html-файл страницы)
• package.json (json-файл с зависимостями проекта)
• tsconfig.json (json-файл в котором описаны настройки компилятора typescript)

Установка проекта

1. Клонируйте репозиторий (git clone url)
2. Установите зависимости (для просмотра typescript-версии файлов разработки)

npm i

3. Если хотите запустить уже готовую версию проекта, то просто откройте файл index.html в любом доступном редакторе кода
4. Если хотите просмотреть файлы разработки и заново перекомпилировать typescript в javascript, то в консоли с папкой проекта напишите :

npx tsc

Файлы typescript будут снова перекомпилированы и их можно будет запустить открыв index.html .

Описание работы проекта

src > ts > gameContent.ts :

В файле содержатся две экспортируемые константы menuContent, tetrisContent, которые представляют разметку HTML-кода для создания меню игры и основного контента игры TetrisJS соответственно.

• Константа menuContent содержит разметку HTML для создания игрового меню. Она включает элементы, такие как заголовок меню и кнопки для выбора уровня сложности игры.

• Константа tetrisContent содержит разметку HTML для создания основного контента игры TetrisJS. Она включает элементы, такие как заголовок, игровое поле, информацию о следующем тетромино, счетчик очков и кнопки управления игрой.

src > ts > gameMenu.ts :

В файле-модуле размещена структура функции 'createGameMenu', которая используется для создания игрового меню веб-приложения. Функция загружает содержимое меню, добавляет обработчики событий для кнопок выбора уровня сложности и вызывает фукнцию 'addHoverForButtons', которая добавляет эффект при наведении на кнопки

Детальное описание параметров функции :

• app: Функция обратного вызова, которая будет вызываться при выборе уровня сложности игры. Она принимает числовой аргумент difficult, который представляет выбранный уровень сложности.

Описание :

Функция createGameMenu выполняет следующие действия:

1. Получает ссылку на элемент с классом game-content и приводит его к типу HTMLDivElement.
2. Очищает содержимое элемента game-content.
3. Загружает содержимое игрового меню, используя константу menuContent, и устанавливает его как содержимое элемента game-content.
4. Получает ссылки на кнопки выбора уровня сложности (easy, normal и hard) и приводит их к типу HTMLButtonElement.
5. Добавляет обработчики событий для кнопок выбора уровня сложности. При клике на каждую кнопку вызывается функция app с соответствующим значением уровня сложности (35 для кнопки "EASY", 15 для кнопки "NORMAL" и 5 для кнопки "HARD").
6. Вызывает функцию addHoverForButtons, которая добавляет эффект при наведении на кнопки.

src > ts > index.ts

В этом файле описывается основной код игры, который включает в себя инициализацию игрового меню, создание игрового поля, управление тетромино, отображение игровых сообщений и другие функции для осуществления игрового процесса.

Импортируемые модули :

• tetraminoItems: модуль, содержащий информацию о тетромино (фигуры, используемые в игре).
• tetrisContent: модуль, содержащий HTML-код для отображения игрового поля.
• createGameMenu: модуль, содержащий функцию для создания игрового меню.
• addHoverForButtons: модуль, содержащий функцию для добавления эффекта при наведении на кнопки.
• isValidPos, moveOnClickLeft, moveOnClickRight, rapidFallDown, rotateOnCliclUp, showGameMessage, showNextTetromino, shuffle, tetrisResize: модули, содержащие вспомогательные функции и утилиты для игрового процесса.

Основные функции и переменные

Переменные :

• tetraminoItems: Это переменная типа объект. Она импортируется из модуля ./tetraminoItems.js и содержит информацию о различных тетромино (фигуры игры Тетрис) и их матрицах.
• tetrisContent: Это переменная типа строка. Она импортируется из модуля ./gameContent.js и содержит HTML-код для отображения игрового поля в игре Тетрис.
• createGameMenu: Это переменная типа функция. Она импортируется из модуля ./gameMenu.js и принимает аргумент app типа Function. Она выполняет действия по созданию меню игры, очищает содержимое .game-content, устанавливает содержимое menuContent в .game-content, добавляет обработчики событий на кнопки сложности игры (easyBtn, normBtn, hardBtn) и вызывает функцию addHoverForButtons.
• addHoverForButtons: Это переменная типа функция. Она импортируется из модуля ./sketchBtn.js и не принимает аргументов. Она выполняет действия по добавлению эффекта наведения на кнопки в игре.
• isValidPos: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргументы matrix типа any[][], row типа number, col типа number, playArea типа (string | number)[][]. Она выполняет проверку на допустимость позиции тетромино в игровом поле и возвращает значение типа boolean.
• moveOnClickLeft: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргументы tetramino типа { name: string; matrix: number[][]; row: number; col: number; }, playArea типа (string | number)[][]. Она выполняет действия по перемещению тетромино влево в игровом поле.
• moveOnClickRight: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргументы tetramino типа { name: string; matrix: number[][]; row: number; col: number; }, playArea типа (string | number)[][]. Она выполняет действия по перемещению тетромино вправо в игровом поле.
• rapidFallDown: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргументы tetramino типа { name: string; matrix: number[][]; row: number; col: number; }, playArea типа (string | number)[][], placeTetramino типа () => void. Она выполняет действия по быстрому опусканию тетромино вниз в игровом поле.
• rotateOnClickUp: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргументы tetramino типа { name: string; matrix: number[][]; row: number; col: number; }, playArea типа (string | number)[][]. Она выполняет действия по повороту тетромино в игровом поле по часовой стрелке.
• showGameMessage: Это переменная типа функция. Она импортируется из модуля ./game.js и принимает аргументы context типа CanvasRenderingContext2D, canvas типа HTMLCanvasElement, message типа string. Она выполняет действия по отображению сообщения в игровом окне.
• showNextTetromino: Это переменная типа функция. Она импортируется из модуля ./game.js и принимает аргумент nextTetromino типа string. Она выполняет действия по отображению следующего тетромино на игровом поле.
• shuffle: Это переменная типа функция. Она импортируется из модуля ./utils.js и принимает аргумент array типа any[]. Она выполняет действия по перемешиванию элементов в массиве.
• tetrisResize: Это переменная типа функция. Она импортируется из модуля ./game.js и не принимает аргументов. Она выполняет действия по изменению размеров игрового окна.
• colors: Это переменная типа объект. Она импортируется из модуля ./tetraminoItems.js и содержит информацию о цветах, используемых для отображения тетромино в игре.

Функции:

• app: Это функция, которая принимает аргумент difficult типа number и возвращает значение типа void. Она выполняет действия по инициализации и запуску игры с указанным уровнем сложности.
• showGameOver: Это функция, которая не принимает аргументов и возвращает значение типа void. Она выполняет действия по отображению сообщения о завершении игры.
• createTetramino: Это функция, которая не принимает аргументов и возвращает объект с информацией о новом тетромино. Она выполняет действия по созданию нового тетромино для использования в игре.

src > ts > sketchBtn.ts :

1. Модуль addHoverForButtons экспортирует функцию addHoverForButtons, которая добавляет эффект наведения на кнопки.

2. Функция addHoverForButtons()

Функция addHoverForButtons не принимает аргументов и не возвращает значения. Она выполняет следующие действия:

• Создает функцию createSVG, которая принимает аргументы width (число), height (число) и radius (число). Эта функция создает SVG-элемент с заданными параметрами, включая прямоугольник с закругленными углами.
• Получает список всех элементов с классом "sketch-button" с помощью метода document.querySelectorAll('.sketch-button').
  • Для каждой найденной кнопки выполняет следующие действия:
  • Получает стили кнопки с помощью функции getComputedStyle.
  • Создает элемент
    для отображения линий на кнопке и добавляет ему класс "lines".
  • Создает две группы элементов
    : groupTop и groupBottom.
  • Создает SVG-элемент с помощью функции createSVG, используя ширину и высоту кнопки, а также радиус скругления из стилей кнопки.
  • Добавляет несколько клонов SVG-элемента в каждую группу (groupTop и groupBottom).
  • Добавляет группы элементов в
    с классом "lines".
  • Добавляет
    с линиями на кнопку.
  • Добавляет обработчик события pointerenter для кнопки, который добавляет класс "start" при наведении курсора на кнопку.
  • Добавляет обработчик события animationend для SVG-элемента, который удаляет класс "start" после завершения анимации.

src > ts > tetraminoItems.ts :

1. Модуль tetraminoItems экспортирует объект tetraminoItems, который представляет собой набор фигур тетрамино и их матриц.

2. Модуль colors экспортирует объект colors, который содержит цвета для каждой фигуры тетрамино. Объект tetraminoItems

• Объект tetraminoItems содержит следующие свойства, представляющие фигуры тетрамино: 'I': Матрица для фигуры "I". Форма фигуры представлена числами: 0 - пустая ячейка, 1 - заполненная ячейка. 'J': Матрица для фигуры "J". 'L': Матрица для фигуры "L". 'O': Матрица для фигуры "O". 'S': Матрица для фигуры "S". 'Z': Матрица для фигуры "Z". 'T': Матрица для фигуры "T".

3. Каждая матрица представлена в виде двумерного массива чисел, где каждый элемент указывает на состояние ячейки фигуры.

4. Объект colors содержит цвета для каждой фигуры тетрамино. Каждое свойство объекта соответствует имени фигуры, а значение свойства - цвету, представленному в виде строки.

Доступные цвета для фигур тетрамино:

'I': Цвет "cyan". 'O': Цвет "yellow". 'T': Цвет "purple". 'S': Цвет "green". 'Z': Цвет "red". 'J': Цвет "blue". 'L': Цвет "orange". src > ts > utils.ts :

1. Функция shuffle(array: string[]): string[] Функция shuffle принимает массив строк array и перемешивает его элементы случайным образом. Функция использует алгоритм Fisher-Yates для перемешивания массива. Возвращает новый перемешанный массив строк. Параметры

   array (тип: string[]): Массив строк, который требуется перемешать.
   

Возвращаемое значение

Тип: string[]
Новый массив, содержащий элементы исходного массива, перемешанные в случайном порядке.

Функция rotate(matrix: number[][])

Функция rotate принимает двумерный массив чисел matrix и выполняет поворот матрицы по часовой стрелке. Размерность матрицы остается неизменной. Функция возвращает новый повернутый двумерный массив чисел. Параметры * matrix (тип: number[][]): Двумерный массив чисел, который требуется повернуть.

Возвращаемое значение * Тип: number[][] Новый повернутый двумерный массив чисел.

Функция isValidPos(tetromino: number[][], tetrominoRow: number, tetrominoCol: number, playArea: (string | number)[][]): boolean

Функция isValidPos проверяет, является ли текущая позиция фигуры tetromino с учетом смещений tetrominoRow и tetrominoCol допустимой в пределах игровой области playArea. Функция возвращает true, если позиция допустима, и false в противном случае.

Параметры

* tetromino (тип: number[][]): Двумерный массив чисел, представляющий фигуру тетромино.
* tetrominoRow (тип: number): Смещение фигуры по вертикали.
* tetrominoCol (тип: number): Смещение фигуры по горизонтали.
* playArea (тип: (string | number)[][]): Двумерный массив, представляющий игровую область.

Возвращаемое значение

Тип: boolean
true, если текущая позиция фигуры допустима, и false, если она недопустима.

Функция rapidFallDown

Функция rapidFallDown выполняет быстрое перемещение фигуры tetromino вниз в игровой области playArea. Если новая позиция недопустима, то функция помещает фигуру на предыдущую позицию в игровой области с помощью функции placeTetromino.

Параметры

• tetromino (тип: { name?: string; matrix: number[][]; row: number; col: number }): Объект, представляющий фигуру тетромино.
• playArea (тип: (string | number)[][]): Двумерный массив, представляющий игровую область.
• placeTetromino (тип: { (): void; (): void; (): void }): Функция, которая помещает фигуру на предыдущую позицию в игровой области.

Функция showGameMessage(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement, text: string)

Функция showGameMessage отображает сообщение text на холсте canvas с помощью контекста рендеринга context.

• Параметры context (тип: CanvasRenderingContext2D): Контекст рендеринга холста. canvas (тип: HTMLCanvasElement): Элемент холста. text (тип: string): Текст сообщения.

Функция rotateOnClickUp

Функция rotateOnClickUp выполняет поворот фигуры tetromino по часовой стрелке при клике на кнопку "вверх". При повороте проверяется, является ли новая позиция допустимой в пределах игровой области playArea.

Параметры

* tetromino (тип: { name?: string; matrix: number[][]; 
* row: number; col: number }): Объект, представляющий фигуру тетромино.
* playArea (тип: (string | number)[][]): Двумерный массив, представляющий игровую область.

Функции moveOnClickRight, moveOnCliclLeft

Фукнции выполняют смещение фигуры вправо при клике на кнопку "право" и в лево при клике на соответствующую кнопку. При смещении область проверяется, является ли новая позиция допустимой в пределах игровой области.

• Параметры :

1. tetromino (тип: { name?: string; matrix: number[][]; row: number; col: number }): Объект, представляющий фигуру тетромино.
2. playArea (тип: (string | number)[][]): Двумерный массив, представляющий игровую область.

Функция showNextTetromino(name: string)

Функция showNextTetromino отображает следующую фигуру тетромино с указанным именем name на игровом поле. Отображение осуществляется путем применения соответствующего класса к элементу блока фигуры. Параметры * name (тип: string): Имя следующей фигуры тетромино.

Функция tetrisResize()

Функция tetrisResize выполняет масштабирование игрового поля в зависимости от размера экрана пользователя. При изменении размера экрана функция применяет соответствующий масштаб для элемента игрового контента.