文档章节

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

 田浩hoyt
发布于 2017/08/31 23:36
字数 1198
阅读 132
收藏 0
点赞 0
评论 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
Swing俄罗斯游戏编写详解(附源码)

俄罗斯方块游戏是一个上手简单,老少皆宜的游戏,它的基本规则是移动、旋转和摆放游戏自动产生的各种方块,使之排列成完整的一行或多行并且消除得分。 你能学到什么? 通过本文的阅读,读者可...

王孟君
2016/10/28
248
0
Facebook 最热门的开源项目推荐!

开源最前线(ID:OpenSourceTop) 猿妹 整编 链接:https://www.itcodemonkey.com/article/1293.html 本文为大家整理了 Facebook开源的热门项目,看看有没有感兴趣的,排名顺序按照 Github ★...

uzv80px5v412ne
2017/11/24
0
0
android 游戏移植 (一) (文末有福利) | SDL 西游释厄传调试

image 游戏效果(不是真实画质) image 有没有被惊艳到?你的内心肯定会说,我靠,画质这么渣,画面却如此熟悉。 对的,就是如此渣渣的画面,却伴随了我们的童年快乐。 下面我们就详细的讲讲...

代码GG陆晓明
2017/11/11
0
0
[Unity XLua]热更新XLua入门(二)-俄罗斯方块实例篇

前言 在xLua没出来之前,开源的lua框架基本都是以界面用Lua开发为主,核心战斗用C#开发,但xLua出来之后主推C#开发,Lua用作HotFix,这里我展示的第一个例子就是基于界面的经典2D小游戏——俄...

s10141303
2017/01/22
0
0
【文集】xlua

前段时间腾讯开源了一个内部热更框架XLua在Unity开发群里引起一阵热议,也受到广大开发者的热捧,我把相关的一些资料做了一个整理。 腾讯开源手游热更新方案:Unity3D下的XLua方案介绍 腾讯开...

CatherinePlans
2017/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

javascript前端AES加密解密

参考了一下网上的代码加上自已的一些想法,修改,key也可以是中文, 要引入一个aes.js的js文件。 html代码 <html> <head> <title>AES加解密</title> <meta http-equiv="Content-Type"......

oisan_
12分钟前
0
0
MacOS和Linux内核的区别

有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我们来看...

六库科技
16分钟前
0
0
Vue.js-自定义事件例子

自定义组件的 v-model 2.2.0+ 新增 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m...

tianyawhl
19分钟前
0
0
mybatis中获取sqlSession的源码分析

0 SqlSessionFactoryBuilder类 SqlSessionFactoryBuilder sqlSessionFacotory=SqlSessionFactoryBuilder().build(reader) public SqlSessionFactory build(Reader reader) { return build(re......

writeademo
20分钟前
0
0
RobotThread.cpp

#include "RobotThread.h"RobotThread::RobotThread(int argc, char** pArgv, const char * topic) :m_Init_argc(argc), m_pInit_argv(pArgv), m_topic(topic){/** ......

itfanr
22分钟前
0
0
防御ddos攻击的常见方法

DDoS攻击是一种特殊形式的拒绝服务攻击。它利用多台已经被攻击者所控制的机器对某一台单机发起攻击,在带宽相对的情况下,被攻击的主机很容易失去反应能力。分布式拒绝服务攻击(DDoS) 是一种...

上树的熊
22分钟前
0
0
Vue全家桶问题合集(很多eslint规范问题)

自己使用Vue全家桶问题合集(很多eslint规范问题) 遇到很多问题一一道来。 1.vue报错 Do not use built-in or reserved HTML elements as component id:header 组件,不能和html标签重复 he...

kisshua
24分钟前
0
0
Spring框架中的设计模式(四)​

Spring框架中的设计模式(四) 本文是Spring框架中使用的设计模式第四篇。本文将在此呈现出新的3种模式。一开始,我们会讨论2种结构模式:适配器和装饰器。在第三部分和最后一部分,我们将讨...

瑞查德-Jack
29分钟前
0
0
如何玩转小程序+公众号?手把手教你JeeWx小程序CMS与公众号关联

随着微信小程序新功能、新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道。Jeewx平台专注小程序的开发,逐步完善小程序生...

Jeecg
34分钟前
0
0
IDEA开发vue.js卡顿

由于新项目使用了vue.js。在执行cnpm install后会在node_modules这个文件下面生成vue的相关依赖文件,这个时候当执行npm run dev命令时,会导致IDEA出现卡死的问题。 解决办法:在idea中设置...

落雪飞声
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部