文档章节

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

 田浩hoyt
发布于 2017/08/31 23:36
字数 1198
阅读 140
收藏 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
开发微信小程序的必备技能图谱

今天被微信小程序彻底刷屏了,哎呀,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
409
0
C++ 实现俄罗斯方块

说明:文章内容均截选自用户“Gamerchen”发布在实验楼上的教程【C++ 实现俄罗斯方块】,未经允许,禁止转载; 俄罗斯方块是很多人的入门游戏啊,小时候常常拿着游戏机玩,现在学了编程,你是...

实验楼
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学hadoop需要什么基础

最近一段时间一直在接触关于hadoop方面的内容,从刚接触时的一片空白,到现在也能够说清楚一些问题。这中间到底经历过什么只怕也就是只有经过的人才会体会到吧。前几天看到有个人问“学hadoo...

左手的倒影
6分钟前
1
0
LOADING Redis is loading the dataset in memory

Redis出现错误 LOADING Redis is loading the dataset in memory 原因是: redis中dump.rdb文件到达3G时,所有redis的操作都会抛出此异常。 解决方法: redis.conf中 maxmemory 调大。 另外一...

swingcoder
7分钟前
0
0
闪屏页设置

相信每个app都需要一个闪屏页 就是一个开始页面 对于新手来说 可能就直接一个activity 弄个背景图片 ,细心地同学也许会发现 每次启动 应用程序的时候 一开始显示的不是那个设置的背景图片 ...

王先森oO
12分钟前
1
0
解析Excel

import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import java.util.ArrayList;import java.util.List;import or......

开源中国封号找我
16分钟前
0
0
pandas不能在pycharm中使用plot()方法显示图像的解决方法

最近用了pycharm,感觉还不错,就是pandas中Series、DataFrame的plot()方法不显示图片就给我结束了,但是我在ipython里就能画图 以前的代码是这样的 import matplotlib.pyplot as pltfrom p...

kipeng300
20分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部