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

image
「消灭星星」是一款很经典的「消除类游戏」，它的玩法很简单：消除相连通的同色砖块。
image
一、 游戏规则
「消灭星星」存在多个版本，不过它们的规则除了「关卡分值」有些出入外，其它的规则都是一样的。
我将介绍的版本的游戏规则整理如下：
1. 色砖分布
10 x 10 的表格
5种颜色 —— 红、绿、蓝，黄，紫
每类色砖个数在指定区间内随机
5类色砖在 10 x 10 表格中随机分布
image
2. 消除规则
两个或两个以上同色砖块相连通即是可被消除的砖块。
3. 分值规则
消除总分值 = n * n * 5
奖励总分值 = 2000 - n * n * 20
「n」表示砖块数量。上面是「总」分值的规则，还有「单」个砖块的分值规则：
消除砖块得分值 = 10 * i 5
剩余砖块扣分值 = 40 * i 20
「i」表示砖块的索引值（从 0 开始）。简单地说，单个砖块「得分值」和「扣分值」是一个等差数列。
image
4. 关卡分值
关卡分值 = 1000 (level - 1) * 2000；「level」即当前关卡数。
5. 通关条件
可消除色块不存在
累计分值 >= 当前关卡分值
上面两个条件同时成立游戏才可以通关。
image
二、 MVC 设计模式
笔者这次又是使用了 MVC 模式来写「消灭星星」。星星「砖块」的数据结构与各种状态由 Model 实现，游戏的核心在 Model 中完成；View 映射 Model 的变化并做出对应的行为，它的任务主要是展示动画；用户与游戏的交互由 Control 完成。
从逻辑规划上看，Model 很重而View 与 Control 很轻，不过，从代码量上看，View 很重而 Model 与 Control 相对很轻。
image
三、 Model
10 x 10 的表格用长度为 100 的数组可完美映射游戏的星星「砖块」
image.png
R - 红色，G - 绿色，B - 蓝色，Y - 黄色，P - 紫色。Model 的核心任务是以下四个：
生成砖墙
消除砖块 （生成砖块分值）
夯实砖墙
清除残砖 （生成奖励分值）
image
1 .生成砖墙
砖墙分两步生成：
色砖数量分配
打散色砖
理论上，可以将 100 个格子可以均分到 5 类颜色，不过笔者玩过的「消灭星星」都不使用均分策略。通过分析几款「消灭星星」，其实可以发现一个规律 —— 「色砖之间的数量差在一个固定的区间内」。