文档章节

专题 俄罗斯方块的React实现 (一)游戏基本执行框架

 田浩hoyt
发布于 2017/08/31 23:36
字数 1198
阅读 167
收藏 0

系统设计

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

在回忆的同时,罗列出涉及到的实体,有方块(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
作品 0
杭州
私信 提问
掘金技术征文 | 【我与那些开发库 / 框架的爱恨情仇】评选结果

历时半个多月,第一期掘金技术征文主题活动终于落下了帷幕。短短半个月的时间里,我们也和大家一起,见证了掘金上各位开发者的技术实力,也感受到了掘金上浓厚的技术氛围,更接触到了开发们技...

稀土君
2017/01/04
0
0
基于 React Native 框架实现的俄罗斯方块 - react-tetris

react-tetris —— 用 React、Redux、Immutable 实现的俄罗斯方块游戏,支持自适应、数据持久化等。 在线体验:https://chvin.github.io/react-tetris/ 效果预览 正常速度的录制,体验流畅 ...

匿名
11/28
0
0
开发微信小程序的必备技能图谱

今天被微信小程序彻底刷屏了,哎呀,JS开发者坐等涨工资吧。 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...

Yomut
2016/09/23
123
0
React 回忆录(一)新的旅程

Hi 各位,好久不见 👋,即将陆续发布的系列文章《React 回忆录》将会总结我对 React 框架的一些理解和心得,希望可以帮助 React 初学者理解 React 框架所涵盖的基本内容与内在逻辑。也希望...

libinfs
07/13
0
0
在STM32F103上编写一个俄罗斯方块游戏

在STM32F103上编写一个俄罗斯方块游戏 代码和视频请在http://dl.dbank.com/c0vhnwzwx4下载 我手边有一块STM32F103VB的板子,在这个板子上有一个LCD显示屏和5个按键,正好可以用来做俄罗斯方块...

ifreecoding
2012/09/08
461
0

没有更多内容

加载失败,请刷新页面

加载更多

Integer使用双等号比较会发生什么

话不多说,根据以下程序运行,打印的结果为什么不同? Integer a = 100;Integer b = 100;System.out.println(a == b);//print : trueInteger a = 200;Integer b = 200;System.out.pr...

兜兜毛毛
27分钟前
0
0
CockroachDB

百度云上的CockroachDB 云数据库 帮助文档 > 产品文档 > CockroachDB 云数据库 > 产品描述 开源NewSQL – CockroachDB在百度内部的应用与实践 嘉宾演讲视频及PPT回顾:http://suo.im/5bnORh ...

miaojiangmin
38分钟前
1
0
I2C EEPROM驱动实例分析

上篇分析了Linux Kernel中的I2C驱动框架,本篇举一个具体的I2C设备驱动(eeprom)来对I2C设备驱动有个实际的认识。 s3c24xx系列集成了一个基于I2C的eeprom设备at24cxx系列。at24cxx系列芯片包...

yepanl
40分钟前
2
0
设计模式之工厂模式

本篇博文主要翻译这篇文章: https://www.journaldev.com/1392/factory-design-pattern-in-java 由于翻译水平有限,自认为许多地方翻译不恰当,欢迎各位给出宝贵的建议,建议大家去阅读原文。...

firepation
今天
6
0

中国龙-扬科
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部