专题 俄罗斯方块的React实现 (三)AI算法及其实现

俄罗斯方块游戏本身的实现并不难,实现一个具备一定智能的AI有一定的难度。 整体思路 由于方块的每次可能的着陆状态是有限的,因此枚举所有的着陆可能,并结合当前游戏区域的状态,给每一种可能性予以评分,最后选择得分最高的着陆点,然后生成一条从起落点到终点的路径,就是一个砖块的解。重复这个步骤,就是一个游戏ai。 上述的步骤中,着陆点枚举(包含砖块状态枚举)相对较容易实现,除此之外,有几个难点和关键点: 状态分析,给定一个当前的游戏数据矩阵和活动砖块的着陆点,分析这种结果的好坏 已知活动砖块的起始状态和终止状态,给出一个状态变化序列描述这个过程 状态分析 现有分析指标 如何评判一个俄罗斯方块游戏局给定状态的好坏呢?作为一名年长的俄罗斯方块玩家,我个人有如下一些经验: 游戏区域残留的砖块越少越安全 如果一个砖块下落,可以消除某几行,那么优先考虑这个着陆点 尽量不要让砖块落下后导致出现空洞 砖块最好分布的比较均匀,不要一些地方对了很高、一些地方很低 这些经验可以转化成量化手段,LeeYiyuan在自己的AI实现中提出了是个指标来评价一个着陆状态。原文地址见:http://codemyroad.wordpress.com/2013/04/14/tetris-ai-the-near-perfect-player/ (需要翻墙)。这四个指标分别是: 消除行数,…

专题 俄罗斯方块的React实现 (二)自动化测试和webpack

关于mocha 引入单元测试可以有效的保证代码质量,Mocha(https://mochajs.org/ )是一个很常用的前端自动化框架。 Mocha支持多种形式的测试环境,默认是在命令行模式下工作,同时也支持其他的运行环境。俄罗斯方块的项目是在网页环境中运行的,因此选择将测试报告直接生成html更加方便。 生成mocha框架 mocha提供了命令行工具,来快速构建其执行环境,要生成html类型的报告,只需要在命令行执行以下命令 mocha -R doc init ./test-html 执行成功后,mocha会生成在test-html目录下 index.html,mocha.css和mocha.js三个文件。tests.js是预留的测试文件,测试代码写在里面就会被执行。 与webpack集成 由于单元测试代码需要不断更新并集成到mocha框架中,因此,可以稍微改动以下mocha生成的html资源,以便直接使用webpack和npm直接生成。 先将mocha的index.html修改成ejs文件,并直接删除下面的代码段。 <script> mocha.run(); </script> 自动测试的脚本可以集中放在test目录下,并在webpack的entry中添加一个配置,将所有的测试代码打包成一个bundle,并将这个bundle注入到测试报告的html中,…

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

系统设计 回忆一下童年玩的俄罗斯方块,那是一个拿在手上的掌机,屏幕左部分,是游戏区域,右侧是计分区,同时还有下一个即将到来的砖块预览,同时还有上下左右四个按键、变形键、加速键。 在回忆的同时,罗列出涉及到的实体,有方块(Tetris)、屏幕、按键。 每一个俄罗斯方块(Tetris),都是由若干个(经典版的是4个)正方形(Tile)组成的形状。我以前玩的俄罗斯方块是黑白的,虽然当时玩的也很开心,但现在看有点单调了,因此,把这些俄罗斯方块做成彩色(Color)的吧,看起来更加美观。砖块颜色不要超过4种,否则又太花哨了,有很多在线配色网站可以直接给出一组颜色,非常方便。 屏幕上有游戏区和预览区,都是显示俄罗斯方块用的,唯一的区别是,游戏区显示的砖块很多,预览区只显示下一个即将出现的砖块。游戏区域有残留砖块和活动砖块,残留砖块是游戏过程中,没有消除的砖块堆积而成的;活动砖块这是当前玩家可操控的砖块。游戏区域砖块的显示信息,可以通过一个二维矩阵来加以表示。此时,我们需要一个控件(就命名为Grid吧),可以通过参数设定它的宽高,…

专题 俄罗斯方块的React实现(零)总述

前言 俄罗斯方块是一款地球人都知道的游戏,规则简单,变化无穷。最近正好在看React的,想起来以前用js实现过一个简单版本,这几天就用React重做了一个升级版,并将AI相关的功能也加了进去。 目标 先明确一下这个小项目的边界和需求,大致如下: 实现一个经典版本的俄罗斯方块游戏 游戏包含最经典的Tetris形状,同时支持方便的扩展其他形状 Tetris可以移动、变形 可以切换游戏模式,由人控制或者AI控制 人操控时,每隔一定时间若无输入,Tetris自然落下一格 AI控制时,必须模拟人类的操作过程 现有项目 俄罗斯方块的实现版本非常多,在做前一个版本的俄罗斯方块时,参考过Github上的一个项目(https://github.com/LeeYiyuan/tetrisai ),这是一个js实现的俄罗斯方块,当时主要参考了AI算法的内容。这个项目做的非常不错,但是有一个小问题,也不算不上是问题吧,就是它的AI,每次新砖块都是直接从最后目标位置直接变形后落下,看不到左右和变形移动的过程(源码没详细读,或许有,只是太快了),显得有点假,除此之外都很棒。 技术/工具 React,技术框架 npm,…