用H5教你如何做游戏——消灭星星(3)

空列
列的连续空洞
列的非连续空洞
image
砖块在消除后，映射到单个列上的空洞会有两种分布形态 —— 连续与非连续。
image
「连续空洞」与「非连续空洞」的夯实过程如下：
image
其实「空列」放大于墙体上，也会有「空洞」类似的分布形态 —— 连续与非连续。
image
它的夯实过程与空洞类似，这里就不赘述了。
3.4 消除残砖
上一小节提到了「描述墙体的边界并记录墙体的空洞」的「列集合」，笔者是直接使用这个「列集合」来消除残砖的，伪代码如下：
image
四、 View
View 主要的功能有两个：
UI 管理
映射 Model 的变化（动画）
UI 管理主要是指「界面绘制」与「资源加载管理」，这两项功能比较常见本文就直接略过了。View 的重头戏是「映射 Model 的变化」并完成对应的动画。动画是复杂的，而映射的原理是简单的，如下伪代码：
image
Model 的砖块每次数据的更改都会通知到 View 的砖块，View 会根据对应的变化做对应的动作（动画）。
五、 Control
Control 要处理的事务比较多，如下：
绑定 Model & View
生成通关分值
判断通关条件
对外事件
用户交互
初始化时，Control 把 Model 的砖块单向绑定到 View 的砖块了。如下：
image
「通关分值」与「判断通关条件」这对逻辑在本文的「游戏规则」中有相关介绍，这里不再赘述。
对外事件规划如下：
image
用户交互 APIs 规划如下：
6. 问题
在知乎有一个关于「消灭星星」的话题：popstar关卡是如何设计的？
这个话题在最后提出了一个问题 —— 「无法消除和最大得分不满足过关条件的矩阵」。
image
两个问题
「无法消除的矩阵」其实就是最大得分为0的矩阵，本质上是「最大得分不满足过关条件的矩阵」。
最大得分不满足过关条件的矩阵
求「矩阵」的最大得分是一个 「背包问题」，求解的算法不难：对当前矩阵用「递归」的形式把所有的消灭分支都执行一次，并取最高分值。但是 javascript 的「递归」极易「栈溢出」导致算法无法执行。
image
其实在知乎的话题中提到一个解决方案：
<bi style="box-sizing: border-box; display: block;">网上查到有程序提出做个工具随机生成关卡，自动计算，把符合得分条件的关卡筛选出来</bi>