# tetris

**Repository Path**: chen-xiaocheng545/tetris

## Basic Information

- **Project Name**: tetris
- **Description**: 俄罗斯方块小游戏
使用 React + TypeScript + Vite
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-26
- **Last Updated**: 2024-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 俄罗斯方块游戏

## 概述 React + TypeScript + Vite

使用技术: React + TypeScript + Vite + 面向对象开发

项目目的:

1. 学习 vite 结合 ts 做开发
2. 巩固 TS 的知识
3. 锻炼逻辑思维能力
4. 体验面向对象编程的思想

## 工程搭建

vite 对 TS 天然就支持, 使用`pnpm crete vite`创建项目即可

1. build 构建时自动清除 dist 目录重新打包
2. 默认使用根目录下的 index.html 作为项目模版, 如需要动态设置模板内容需安装`vite-plugin-html`插件

## 开发

### 开发原则

- 单一职能原则: 每个类只做它相关的一件事
- 开闭原则: 系统中的类, 应该对扩展开放,对修改关闭

##### 基于以上两个原则, 系统中使用如下模式:

数据-界面分离模式

数据都写在`src/core`文件夹内

### 设计类的一些规范

- 对所有的内部变量都私有化, 通过访问器获取值, 设置值统一走 `set` 对变量高度控制

### 开发小方块类 Square

在`core/Square`中实现小方块数据类型

在`viewer/SquarePageViewer`实现小方块类中的`viewer`和样式组件`SquareComp`

### 开发小方块的组合类 SquareGroup

组合类中的属性:

- 小方块的数组
  - 数组应该是不能变化的, 只读数组
  - 数据来源?? 需要描述组合的形状(一组相对坐标的组合, 组合中有一个特殊坐标表示形状的中心)
    中心点的坐标如果是[0,0] 其他坐标相对中心点坐标产生

### 开发俄罗斯方块生产者方法

预定义一些方块的形状

### 俄罗斯方块的规则类

`TerisRule`内实现了规则的静态方法

### 俄罗斯方块旋转类

旋转本质: 根据当前形状 产生一个新的形状

- 有些方块是不旋转的
- 有些方块旋转只有两种状态

`rotate` 方法有一种通用的实现方式, 但是,不同的情况下会有不同的具体实现

将 `SquareGroup` 作为父类, 其他的子类可以重新它的方法

- 旋转不能超出边界

### 游戏类

Game 类清楚什么时候显示的切换, 但不知道如何显示