Skip to content

Use create-react-app, redux-toolkit, typescript to code Tetris.

License

Notifications You must be signed in to change notification settings

m1yang/redux-tetris

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

游戏规则

控制掉落的方块,填满水平行使其消失,尝试尽可能多的消除不断掉落的方块

项目demo

心路历程

最早是希望能有个小项目可以时不时拿来练练新出的技术,不然一直抄demo,过眼不过脑。 阅读了用React、Redux、Immutable做俄罗斯方块,后决定就这个项目了。然后开始读源码,试图重新造轮子。从文件夹开始,标注每一个文件夹大致是对应哪一块业务,再一步步细分到文件、文件中的函数,拆解完后。。。2周,我感觉2周就能搞定这个项目。。。但是真正码起来却是:

卧槽,这里有个细节得打磨打磨!

欸,这样式排版要搞好还得充充电!

啊,事件整一块原来这么麻烦!

不行,这样写太啰嗦,我要重构!

时间悄咪咪就过去了,回头一看,mud, almost 2 month

真正写的时候,发现其实这个游戏简单的操作后面都是强大的逻辑在做支撑,中间踩了不少坑,像是伪随机、旋转、踢墙,以及最基本的方块的构建,都下了不少功夫。前面chvin的代码还能参考参考,后面基本上都是自己的思路了,轮子也不是说造,那么简单就能造的啊!

最后,写完感觉自己进入了贤者模式。

术语统一

特地写了个术语描述栏目,方便对业务进行描述,以及后续编程时进行命名

术语 别名 描述
方块(数组) tetromino,tetrads 俄罗斯方块的简称
方块(对象) pieces 俄罗斯方块的简称
方块填充 blocks,filled 方块展示在矩阵上
方格 cell,minoes 组成矩阵的小格子
矩阵 matrix 由行(rows)和列(columns)组成的2维界面
形状 shape 4个方块的基本排列方式
方向 direction,direct 方块的朝向,也是相对基本排列旋转90°的次数
摇杆 joystick 控制方块的按钮
游戏场地 playField 游戏内容的主要展示界面
移动点(坐标) point,location 通过x轴和y轴来确定矩阵上移动的点
定位点 origin,position 相对位置
计分板 scoreboard 展示方块得分

编码思路

基于create-react-app 这个脚手架搭建,轻度使用了typescript ,重度使用了redux-toolkitts 让代码更加可读,redux-toolkit 则是集成了常用的全家桶,例如thunk ,reselector ,immer 等,这样延迟计算、记忆函数、不可变等新鲜特性都可以很方便的使用了。

npx create-react-app my-app --template redux-typescript

使用脚手架后省去了配置webpack 的烦恼,集成的工具库刚好够使用,这样就可以将精力都放在功能实现上了。

一开始考虑的东西不要太多太复杂,不然难以提笔。直接从最核心的部分开始,也就是矩阵和方块,考虑用怎样的数据结构来实现。以此为圆心,交互为半径,整个功能开发向周边扩散。虽然很多文章说,考虑清楚了再开发,时间80%在思考20%在编码。但真实的情况是,你硬是要想,只能发现硬不起来。没有实际可运行的代码,再多的想法都是空中楼阁。思考和编码的比例并不重要,将复杂的问题拆解后,编码即是思考,思考即是编码。

第一步明确要处理怎样的数据

2维数组天然适合这种行和列的单元格展示,但是渲染方块的移动,key-value结构的对象会更合适。

  • 矩阵和方块均由2维数组构建,1和0分别表示有无填充。
  • 压缩2维数组为key-value结构,value用数组存储方块所在下标。e.g. {1:[5,6,7]}表示第一行的5、6、7格有方块填充

强调一下为什么不统一用2维数组:

  1. 2维数组映射成dom 后,不需要直接操作dom ,只需要更改dom 上的color属性。
  2. key-value结构可以很轻松的表示方块降落到了底部第20行,而2维数组做同样的表示还得有19行的0做陪跑。
  3. 根据算法知识,合理压缩过的数据,可以用更少的遍历来到达同样的效果,在性能上会更有优势。
  4. reactredux 均建议找出应用所需state的最小表示,然后计算出其它所需要的数据。

确定了2维数组后,就可以依此将整个静态的游戏界面css 出来了

flow

对于方块,2维数组能在视觉上有更为直观的表达。然后可以通过坐标{x,y}来表示方块掉落到矩阵哪个位置。比如[[1,1,1,1]] 和 {4,7} 就可以表示为在矩阵第7行第4列有个形状为 'I' 的方块。

以上,便确定了矩阵使用2维数组布局,使用对象渲染掉落的方块;方块使用2维数组表示形状,结合坐标{x,y} 来表示如何展示在矩阵上。

第二步拆解复杂的交互动作

矩阵是静态的,当方块掉落进来才有了一系列的展示和消除,所以首先关注方块的操作。对方块的操作主要有3类,降落、旋转和左右移动,对应的代码应该也至少拆分为3块逻辑。

降落和平移是改变方块的位置,而旋转是改变方块的形状。位置的改变很简单,变量xy 做加减法就可以了。而形状却需要改变表示方块的2维数组。拿方块'L' 举例,经过逆时针旋转最终会有4种展示:

L0: [
    [0, 0, 1],
    [1, 1, 1],
],
L1: [
    [1, 1],
    [0, 1],
    [0, 1],
],
L2: [
    [1, 1, 1],
    [1, 0, 0],
],
L3: [
    [1, 0],
    [1, 0],
    [1, 1],
]

能十分直观的看到,下一次的旋转,就是上一次的行变成了列,并是从后往前变的 ,依此可以编写一个按顺时针旋转的函数。

var rotate = (tetrads) => {
    return tetrads
        .reduce((acc, item) => {
            item.forEach((v, k) => {
                if (acc[k] === undefined) {
                    acc[k] = [];
                }
                // 转换行和列
                acc[k].push(v);
            });
            return acc;
        }, [])
        .reverse(); // 由后往前反转行
};

其它形状的方块也都遵从这样的旋转规则,那么顺时针呢?又要这样走一遍么。这里我略作思考(想了半天),大胆的决定,只使用一个旋转函数(再来一遍太痛苦了),来缓存当前方块的所有旋转结果,再通过一个表示上下左右4个方向的变量direct 来索引旋转结果。此时,redux 只需要极其精简的两个变量就能表示出复杂的旋转结果了。

  tetromino: {
    currentShape: 'L',
    direct: 1,
    }

可以表示为

L1: [
    [1, 1],
    [0, 1],
    [0, 1],
],

顺时针旋转,direct自增;逆时针旋转,direct自减。瞬间被自己的机智所折服。。。

拿着旋转后的数组和坐标{x,y},再通过转换函数就能得到方块展示在矩阵上的各个形状了。但是这里还存在着bug,因为坐标需要始终位于方块的中心,然而方块与方块之间不能一概而论。so, 在转换数组为对象前,对方块的每个形状,需要加入一个偏移量 来改变方块于坐标{x,y}的相对位置。这样,坐标的值不需要改变,数组是通过中点掉落到矩阵中。

// 每个形状中点移动的值不同
var midPoint = {
    I: [-1, 0],
    L: [-1, -1],
    J: [-1, -1],
    Z: [-1, -1],
    S: [-1, -1],
    O: [0, -1],
    T: [-1, -1],
}

var getOffset = (
    { x, y },
    offset,
) => {
    return {
        x: x + offset[0],
        y: y + offset[1],
    }
}

本来挺复杂的方块旋转问题就这样拆解开并各个击破了。如何操作方块的问题解决了,但是方块在什么情况下能被操作呢?

  1. 没有被其它方块阻塞
  2. 没有超出矩阵边界

三个动作两个条件,继续拆!

要知道是否被阻塞,其实就是预测方块下一步是否和矩阵中已填充的方块存在交点。简要说明一下,如果是左移则x-1,是软降y-1,是左转direct-1,然后转化成对象判断是否存在交点,是就不能做该操作。

超出边界则是判断当前方块,判断每一小块是否小于矩阵的边界高20宽10。至此整个方块的交互最核心的部分得以实现。

第三步通过数据与交互构建功能

根据一、二步的信息,可以让键盘和按钮绑定上对应的操作,此刻这个项目便能“动”了起来。以此可以再深入拓展游戏界面playfield 的功能。其主要功能为自动降落,方块填充与消除、游戏开始和结束窗口展示。自动降落使用计时器setInterval 设置一个时间变量来不断触发软降。

但这个模块的难点并不在计时器setInterval 的使用,而是动作的触发以及状态的扭转。需要计算是否阻塞-->是否触底-->是否溢出。捋顺了说,触底和阻塞都会触发方块填充,填充后需要判断是否溢出,是则游戏结束,否则继续降落。

如果游戏结束了,就从前面的动作触发变为开始结束的状态扭转,并依托于重置、暂停两个功能。重置功能就是清除数据并初始化,没太多好说的。

而无论开始还是结束,游戏都处于暂停状态。如果用false表示结束,true表示开始,那么暂停时通过计算这一Boolean变量就能判断该展示开始界面还是结束界面。也就是计算已填充的方块是否超出矩阵的高度,超过了则改变Boolean变量为false,暂停游戏并弹窗结束界面。

如果要让组件处理逻辑更加纯粹,那么这里的逻辑会拆分到3个文件(组件)内执行:

  • 一个文件使用计时器setInterval 实现自动降落
  • 一个文件只处理方块渲染,包括填充与清除
  • 一个文件做开始和结束的弹窗画面

思路大致就写到这里了,这三步基本攻破核心内容,后续的功能添加就可以按照一定的迭代计划,周期性的慢慢添加了。俄罗斯方块指南 有着对其功能丰富的说明。

亮点片段

某些功能的实现,自我感觉良好,所以拎出来单独表扬(狗头)。

伪随机系统

官方推荐的是一个叫7-bag的伪随机系统,类似于每次从包里拿出一个小球,小球一共有7个且颜色各不相同,拿完之后把小球放回重新拿。

const randomGenerator = () => {
  let bag = 'OISZLJT'.split('') as Shape[];
  let tmp: number[] = []
  return function () {
    if (tmp.length === 0) {
      tmp = Array.from({ length: bag.length }, (_, i) => i)
    };
    const result = tmp.splice(Math.floor(Math.random() * tmp.length), 1)[0]
    return bag[result];
  }
}

let bag = randomGenerator()

这里利用js 闭包特性,让调用对象记住了包里还剩几个球。

缓存旋转结果

方块有顺时针和逆时针两种旋转,但是旋转的结果最多也就上下左右四种,所以缓存起来再通过下标来访问,就不用每次调用函数进行旋转了。

const rotateCache = (item: Tetromino) => {
    let items = [item];

    for (
        // rotate是旋转方块的函数
        let i = rotate(item);
        items[0].length !== i.length ||
        // 判断2维数组是否相等
        items[0].some((x, y) => x.some((m, n) => i[y][n] !== m));
        i = rotate(i)
    ) {
        items.push(i);
    }
    return items;
};

只要写一个旋转函数,通过这个函数判断这一次和上一次的旋转结果是否相同。不同则缓存,相同则返回结果。虽然代码就是一个for循环,但是这个思路我的确琢磨了不少时间。

预测移动结果

数据进行压缩后,只需要形状,方向和坐标就能表示出方块在矩阵中的展示。如果将方向和坐标抽出来作为函数的参数,那么修改这个参数,就能非常方便的获取到方块操作的结果。

/*...只展示核心代码*/
export const selectTetrominoCreator = createSelector(
    (state: RootState) => state.tetromino.currentShape,
    // 返回一个结束方向和坐标的函数,便于计算任意操作下的方块
    (shape) => (direct: Direction, point: Point) => {
        // 获取当前方向的方块
        const tetrad = getTetrad(shape, direct)
        // 矫正方块的相对位置
        point = getOffset(point, midPoint[shape])
        // 将方块从2维数组转换成对象
        return convertToBlocks(tetrad, point)
    }
)

export const selectForecast =  createSelector(
    selectTetrominoCreator,
    (state: RootState) => state.tetromino.direct,
    (state: RootState) => state.tetromino.point,
    (state: RootState) => state.playfield.filled,
    (tetrads, direct, point, filled) => (
        next: string,
        step: number,
    ) =>{
        // 保存当前步骤
        let nextPoint = { ...point }
        let nextDirect = direct
        // 确定方块操作
        switch (next) {
            case 'move':
                nextPoint.x += step
                break;
            case 'drop':
                nextPoint.y += step
                break;
            case 'rotate':
                nextDirect += step
                break;
            default:
                throw new Error(`only have move,drop,rotate to control`);
        }
        const tetrad = tetrads(nextDirect, nextPoint)
        // 判断下一步是否有移动空间
        return isVacated(tetrad, filled)
    }
)

上面是伪代码,直接传入当前的方向和坐标,就是矩阵上展示的方块。如果对方向和坐标进行修改,就能提前得到方块移动后的结果了。

目录结构

common 工具代码、注释代码等弱业务相关

components 组件,基本渲染组件,不参与最终交互

features 功能区,业务逻辑主要目录,内部划分:

  • 每个功能区只处理同一类型的业务
  • 动作跟着状态走,共享状态就抽出来做更高一层

心得体会

尽量避免直接编写函数对业务进行处理。思考业务对应的数据类型,对此数据类型进行函数处理。业务发生变动,如果是数值变化,可能只需要修改相应参数;如果变动巨大,也只需要对单个函数进行修改,原来的代码结构不会受影响。

提供给外界调用的函数,先封装一层,再export出去。这样即使代码重构,比如被封装函数的名字改了,外界调用也不会受影响。所以API 的函数签名十分重要,一旦被外部引用,你就不能随心所欲的对它进行修改了。

一开始编写代码时不一定非要高度抽象,面向过程的编码也是不错的,因为思考的负担很小。在功能实现后,再来对过程进行抽象。太早思考最终方案和最佳实践,即使大脑的算力能跟上,大脑的存储可跟不上。

封装数据处理逻辑一致的代码,而不是封装相似程度高的代码。虽然大部分情况下,封装长得一样的代码没错,但知道这里代码为什么相似,会让封装的意义更明确,封装的也更彻底。

Available Scripts

In the project directory, you can run:

  • npm start
  • npm test
  • npm run build
  • npm run eject

迭代计划

TODO 核心功能

  • 得分榜
  • 恢复游戏给出3秒倒计时

TODO 非核心功能

  • 音乐
  • 填充动画、消除动画
  • 数据缓存
  • 是否聚焦

TODO 重构

  • 可以用构造函数,使矩阵数据聚合性更强。用promise完成链式关系的事件,逻辑会更清晰。
  • 使用material-UI ,react-hotkeys 使得UI交互代码更直观
  • 考虑使用rxjs ,lodash 简化工具代码

About

Use create-react-app, redux-toolkit, typescript to code Tetris.

Topics

Resources

License

Stars

Watchers

Forks