专题 俄罗斯方块的React实现 (一)游戏基本执行框架
专题 俄罗斯方块的React实现 (一)游戏基本执行框架
田浩hoyt 发表于6个月前
专题 俄罗斯方块的React实现 (一)游戏基本执行框架
  • 发表于 6个月前
  • 阅读 48
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

系统设计

回忆一下童年玩的俄罗斯方块,那是一个拿在手上的掌机,屏幕左部分,是游戏区域,右侧是计分区,同时还有下一个即将到来的砖块预览,同时还有上下左右四个按键、变形键、加速键。

在回忆的同时,罗列出涉及到的实体,有方块(Tetris)、屏幕、按键。

每一个俄罗斯方块(Tetris),都是由若干个(经典版的是4个)正方形(Tile)组成的形状。我以前玩的俄罗斯方块是黑白的,虽然当时玩的也很开心,但现在看有点单调了,因此,把这些俄罗斯方块做成彩色(Color)的吧,看起来更加美观。砖块颜色不要超过4种,否则又太花哨了,有很多在线配色网站可以直接给出一组颜色,非常方便。

屏幕上有游戏区和预览区,都是显示俄罗斯方块用的,唯一的区别是,游戏区显示的砖块很多,预览区只显示下一个即将出现的砖块。游戏区域有残留砖块和活动砖块,残留砖块是游戏过程中,没有消除的砖块堆积而成的;活动砖块这是当前玩家可操控的砖块。游戏区域砖块的显示信息,可以通过一个二维矩阵来加以表示。此时,我们需要一个控件(就命名为Grid吧),可以通过参数设定它的宽高,并将给定的二维矩阵信息转化成正方形的小砖块来显示,实际显示时,通过Canvas API绘制图片。

而控制系统呢,则是通过监听键盘事件。为了方便玩家操作,应当监听整个document的按键事件。

类和组件

先来看看最基本的Tetris要如何设计。首先分析Tetris的基本属性,它应当有自己的颜色信息,隶属于同一个Tetris的小方块(Tile)颜色应当一致。同时,还需要知道它的碰撞位信息,才能进行碰撞检测,因此Tetris会有一个二维表(matrix),记录它自己的相对坐标中,某行某列是透明还是有小方块。我们还需要知道这个Tetris的宽度和高度。同时,砖块还可以旋转,顺时针或者逆时针,当然,旋转还需要考虑Tetris目前所在的位置,因为有可能它当前所处的位置已经不允许它进行旋转操作了。Tetris的移动也是一样,不能单独考虑自身,还需要结合整个游戏区域的信息才能判断,但Tetris肯定还需记录自己在游戏区域的坐标信息。

根据上述的信息,我们已经可以大致列出一下一些类:

class Tile,表示一个小方块,只需要有颜色这个属性即可,单个方块的大小设计为全局常量

class ColorPicker,这是一个工具类,用来获取某几个颜色中的随机颜色 
class Tetris, 由Tile的二维矩阵组成。由于Tile会大量重复出现,为了节约内存,并不需要大量的示例化Tile,而只需示例化4种颜色的Tile各1个,总共4个对象即可,在Tetris.getTile(row, col)时,根据当前Tetris的颜色返回对应的Tile示例就好了。 
class Grid,接受一个matrix和一个Tetris作为其属性,将其绘制成canvas进行显示。

React中更新Canvas

React本身的状态机制,当一个元素属性发生变化时,会自动更新Dom Tree。但是我们不会去直接更新Canvas的属性信息,因此也就不能指望React来帮我们自动刷新,而必须手动进行更新,具体做法是,在componentDidUpdate接口中,清空当前的Canvas画布,并根据Grid关联的Matrix和活动Tetris重绘。

执行流程

整个系统的执行流程还是非常简单、清晰、明了的:

  • 系统初始化,生成游戏Grid、预览Grid,监听键盘事件
  • 生成2个随机Tetris,作为初始Tetris,一个是当前活动可控的Tetris,另一个是作为下一个即将下落的Tetris
  • 等待玩家输入,若等待超时,则活动Tetris自动下落
  • 更新Tetris坐标,进行碰撞计算
  • 活动Tetris落到底部后,将下一个即将落下的Tetris作为活动Tetris,并重新生成下一个Tetris

AI的执行流程也是一样的,只是等待的不是玩家输入,而是AI给出的按键。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 5
码字总数 4943
×
田浩hoyt
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: