项目概述

使用TypeScript语言，借助webpack构建工具的一款经典小游戏，采用了 数据-视图 相分离的模式，可以灵活的根据配置文件定义方块和面板大小以及方块内的文字灯，能较好的锻炼面向对象思想以及复习总结TypeScript相关知识。

很适合学习了一段TypeScript基础知识想要找项目练手的人群。

项目日志

2020年4月19日晚，项目启动

项目概述

TetrisGames

俄罗斯方块的游戏制作

项目的目的

1. 学习webpack结合TS做开发
2. 巩固TS的基础知识
3. 锻炼逻辑思维能力
4. 体验面向对象的思想（有些思想靠理解是达不到那个程度的，需要大量的练习）

技术栈

webpack + jquery(方便dom操作) + typescript + 面向对象思想

须知

整个项目可能比较复杂，切忌浮躁，要稳扎稳打，慢慢来。

工程搭建

环境：浏览器 + 模块化
工具：webpack

html-webpack-plugin插件

html-webpack-plugin将html文件打包到出口文件，该文件会自动将js文件引入
官网

安装：开发依赖

clean-webpack-plugin插件

清除ｄｉｓｔ目录重新进行打包
官网

webpack-dev-server

安装ts的相应的加载器(二选一)

他们依赖ｔｓ，所以还要安装ts(注意需要tsconfig.json文件)

• ts-loader(官方)
• awsome-typescript-loader（民间）

游戏开发

面向对象的一些原则
单一职能原则:每个类只做跟它相关的一件事

开闭原则：系统中的类应该对扩展开放，对修改关闭．（增加功能时尽量不要修改类的代码，而是增加代码来进行功能的扩展）

1. 所有的属性全部私有化

模式
仿照react使用＂数据－视图＂分离　　模式
core:核心数据类，只涉及数据处理

小方块类的开发

• 小方块不知道怎么显示，但是知道什么时候显示
  2020年４月２０日

小方块的显示类(core/viewer目录)

安装：
jquery及其类型库(@types/jquery)(开发依赖)

小方块的组合类

本质是小方块的数组

• 小方块的数组

俄罗斯方块的生产者类

进行形状预定义，随机产生形状
2020年４月２２日

俄罗斯方块规则类

俄罗斯方块的旋转

旋转的本质就是改变形状(形状的本质是数组)
本质：根据当前形状产生一个新的形状
rotate　方法有一种通用的实现方式，但是，不同情况下会有不同的具体实现

将SquareGroup作为父类，其他的小方块都是它的子类，子类可以重写父类的方法
2020年４月２５日

游戏类

控制整个游戏的进程
-　方块的下落，消除，下一个方块的形状灯
Game清楚什么时候切换，但是不知道如何显示

触底处理

触底：当前方块到达最底部，这里的底部不一定是界面的最底部，有可能下面有方块，也是触底．

什么时候触底

什么时候调用触底函数

触底后要做的事情：

触底函数如何编写

• 切换方块
• 当触底后如何保存已经落下的方块（保存已经落下的方块）
• 如何根据已经保存的方块，判断当前方块是否可以移动
• 消除方块的处理
  • 消除时做哪些事情(从界面移除，从数组中移除，改变ｙ坐标)
• 游戏是否结束？（在切换方块的时候进行判断）

积分

完成游戏界面

更新日志:

更新自定义方块文字内容（20200425）

可以在PageConfig.ts文件中修改innerText文本，来控制方块进行文本显示

GitHub地址

github地址

在线体验地址

在线体验地址