谷美|使用TypeScript构建的经典小游戏-俄罗斯方块(含源码)
项目概述
使用TypeScript语言,借助webpack构建工具的一款经典小游戏,采用了 数据-视图 相分离的模式,可以灵活的根据配置文件定义方块和面板大小以及方块内的文字灯,能较好的锻炼面向对象思想以及复习总结TypeScript相关知识。
很适合学习了一段TypeScript基础知识想要找项目练手的人群。
项目日志
2020年4月19日晚,项目启动
项目概述
TetrisGames
俄罗斯方块的游戏制作
项目的目的
- 学习webpack结合TS做开发
- 巩固TS的基础知识
- 锻炼逻辑思维能力
- 体验面向对象的思想(有些思想靠理解是达不到那个程度的,需要大量的练习)
技术栈
webpack + jquery(方便dom操作) + typescript + 面向对象思想
须知
整个项目可能比较复杂,切忌浮躁,要稳扎稳打,慢慢来。
工程搭建
环境:浏览器 + 模块化
工具:webpack
html-webpack-plugin插件
html-webpack-plugin将html文件打包到出口文件,该文件会自动将js文件引入
官网
安装:开发依赖
clean-webpack-plugin插件
清除dist目录重新进行打包
官网
webpack-dev-server
安装ts的相应的加载器(二选一)
他们依赖ts,所以还要安装ts(注意需要tsconfig.json文件)
- ts-loader(官方)
- awsome-typescript-loader(民间)
游戏开发
面向对象的一些原则
单一职能原则:每个类只做跟它相关的一件事
开闭原则:系统中的类应该对扩展开放,对修改关闭.(增加功能时尽量不要修改类的代码,而是增加代码来进行功能的扩展)
- 所有的属性全部私有化
模式
仿照react使用"数据-视图"分离 模式
core:核心数据类,只涉及数据处理
小方块类的开发
- 小方块不知道怎么显示,但是知道什么时候显示
2020年4月20日
小方块的显示类(core/viewer目录)
安装:
jquery及其类型库(@types/jquery)(开发依赖)
小方块的组合类
本质是小方块的数组
- 小方块的数组
俄罗斯方块的生产者类
进行形状预定义,随机产生形状
2020年4月22日
俄罗斯方块规则类
俄罗斯方块的旋转
旋转的本质就是改变形状(形状的本质是数组)
本质:根据当前形状产生一个新的形状
rotate 方法有一种通用的实现方式,但是,不同情况下会有不同的具体实现
将SquareGroup作为父类,其他的小方块都是它的子类,子类可以重写父类的方法
2020年4月25日
游戏类
控制整个游戏的进程
- 方块的下落,消除,下一个方块的形状灯
Game清楚什么时候切换,但是不知道如何显示
触底处理
触底:当前方块到达最底部,这里的底部不一定是界面的最底部,有可能下面有方块,也是触底.
什么时候触底
什么时候调用触底函数
触底后要做的事情:
触底函数如何编写
- 切换方块
- 当触底后如何保存已经落下的方块(保存已经落下的方块)
- 如何根据已经保存的方块,判断当前方块是否可以移动
- 消除方块的处理
- 消除时做哪些事情(从界面移除,从数组中移除,改变y坐标)
- 游戏是否结束?(在切换方块的时候进行判断)
积分
完成游戏界面
更新日志:
更新自定义方块文字内容(20200425)
可以在PageConfig.ts文件中修改innerText文本,来控制方块进行文本显示