俄罗斯方块游戏 {ignore=true}

[toc]

概述

使用技术：webpack + jquery + typescript + 面向对象开发

项目目的：

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

工程搭建

环境：浏览器 + 模块化

webpack：构建工具，根据入口文件找寻依赖，打包

1. 安装webpack

2. 安装html-webpack-plugin

3. 安装clean-webpack-plugin

4. 安装webpack-dev-server

5. 安装ts的相应loader

ts-loader，awesome-typescript-loader

它们依赖typescript

游戏开发

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

基于以上两个原则，系统中使用如下模式： 数据-界面分离模式

传统面向对象语言，书写类的属性时，往往会进行如下操作：

1. 所有的属性全部私有化
2. 使用公开的方法提供对属性的访问

开发小方块类

小方块类：它能处理自己的数据，知道什么时候需要显示，但不知道怎么显示

react、react-dom / react-native

小方块的显示类

作用：用于显示一个小方块到页面上

开发方块的组合类

组合类中的属性：

• 小方块的数组

思考：该数组的组成能不能发生变化。

回答：不能发生变化，是只读数组

思考：该数组的每一项从何而来

一个方块的组合，取决于组合的形状（一组相对坐标的组合，该组合中有一个特殊坐标，表示形状的中心）

如果知道：形状、中心点坐标、颜色，就可以设置小方块的数组

• 形状

俄罗斯方块的生产者

俄罗斯方块的规则类

开发旋转功能

旋转的本质：根据当前形状 -> 新的形状

• 有些方块是不旋转的，有些方块旋转时只有两种状态

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

将SquareGroup作为父类，其他的方块都是它的子类，子类可以重写父类的方法

• 旋转不能超出边界

开发游戏类

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

触底处理

触底：当前方块到达最底部

什么时候可能发生触底？（什么时候调用函数）

1. 自动下落
2. 玩家控制下落

触底之后做什么？（函数如何编写的问题）

• 切换方块
• 保存已落下的方块
• 消除方块的处理

消除时做哪些事？ 从界面上移除、从exists数组中移除，改变y坐标

• 游戏是否结束

积分

完成游戏界面

总结

为什么要讲面向对象？

1. 面向对象带来了新的开发方式

面向对象开发已经非常成熟，特别善于解决复杂问题

2. TypeScript的某些语法是专门为面向对象准备

3. 学习一些设计模式

为什么选择做游戏？

1. 游戏特别容易使用面向对象的思维

2. 目前这门课的受众有一定的开发经验

开发：高内聚、低耦合