文档章节

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

 田浩hoyt
发布于 2017/08/31 23:36
字数 1198
阅读 174
收藏 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/ 效果预览 正常速度的录制,体验流畅 ...

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

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

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

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

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

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

ifreecoding
2012/09/08
461
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
46分钟前
2
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
51分钟前
4
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
今天
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
今天
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部