目录
1 游戏介绍 1
2.1 Model 3
2.1.1 生成砖墙 4
2.1.2 消除砖块 4
2.1.3 夯实砖墙 6
2.1.4 消除残砖 11
2.2 View 12
2.3 Control 13
1游戏介绍
「消灭星星」是一款很经典的「消除类游戏」，它的玩法很简单：消除相连通的同色砖块。
「消灭星星」存在多个版本，不过它们的规则除了「关卡分值」有些出入外，其它的规则都是一样的。笔者介绍的 版本的游戏规则整理如下：
1.色砖分布
10 x 10 的表格
5种颜色 红、绿、蓝，黄，紫
每类色砖个数在指定区间内随机
5类色砖在 10 x 10 表格中随机分布
2.消除规则
两个或两个以上同色砖块相连通即是可被消除的砖块。
3.分值规则
消除总分值 = n * n * 5
奖励总分值 = 2000 - n * n * 20
「n」表示砖块数量。上面是「总」分值的规则，还有「单」个砖块的分值规则：
消除砖块得分值 = 10 * i + 5
剩余砖块扣分值 = 40 * i + 20
「i」表示砖块的索引值（从 0 开始）。简单地说，单个砖块「得分值」和「扣分值」是一个等差数列。
4.关卡分值
关卡分值 = 1000 + (level - 1) * 2000；「level」即当前关卡数。
5.通关条件
可消除色块不存在
累计分值 >= 当前关卡分值
上面两个条件同时成立游戏才可以通关。
2MVC 设计模式
笔者这次又是使用了 MVC 模式来写「消灭星星」。星星「砖块」的数据结构与各种状态由 Model 实现，游戏的核心在 Model 中完成；View 映射 Model 的变化并做出对应的行为，它的任务主要是展示动画；用户与游戏的交互由 Control 完成。
从逻辑规划上看，Model 很重而View 与 Control 很轻，不过，从代码量上看，View 很重而 Model 与 Control 相对很轻。
2.1 Model
10 x 10 的表格用长度为 100 的数组可完美映射游戏的星星「砖块」。
[
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P,
R, R, G, G, B, B, Y, Y, P, P
]
R - 红色，G - 绿色，B - 蓝色，Y - 黄色，P - 紫色。Model 的核心任务是以下四个：
生成砖墙
消除砖块 （生成砖块分值） 夯实砖墙
清除残砖 （生成奖励分值）
2.1.1生成砖墙
砖墙分两步生成：
色砖数量分配打散色砖
理论上，可以将 100 个格子可以均分到 5 类颜色，不过笔者玩过的「消灭星星」都不使用均分策略。通过分析几款「消灭星星」，本文转载自http://www.biyezuopin.vip/onews.asp?id=14796其实可以发现一个规律 「色砖之间的数量差在一个固定的区间内」。
如果把传统意义上的均分称作「完全均分」，那么「消灭星星」的分配是一种在均分线上下波动的「不完全均 分」。
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>H5小游戏100例: 消除星星</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />
<link href="css/popstar.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<canvas class="popstar"></canvas>
<!-- 用户界面 -->
<div class="popstar_menu" id="menu">
<div class="popstar_high_score" id="highScore"></div>
<a class="popstar_btn" href="javascript:;" id="newGame">新 游 戏</a>
<a class="popstar_btn disabled" href="javascript:;" id="resumeGame">继续游戏</a>
<a class="popstar_btn" href="https://zhuanlan.zhihu.com/snsgame?group_id=909745245186072576" target="_blank">关注我们</a>
<a class="popstar_btn" href="https://aotu.io/" target="_blank">凹凸官网</a>
</div>
<!-- 暂停时的广告 -->
<div class="popstar_ad" id="popstarAd">
<a href="//jd.com"><img src="images/ad@2x.jpg" /></a>
<div class="popstar_ad_close" id="popstarAdClose"></div>
</div>
</div>
</body>
<script type="text/javascript" src="script/lib/pixi.js"></script>
<script type="text/javascript" src="script/lib/gsap/TweenMax.js"></script>
<script type="text/javascript" src="script/Popstar.js"></script>
<script type="text/javascript">
PIXI.utils.skipHello();
// 用户界面不属于游戏部分，直接在这里实现
var record;
// 初始化用户界面
var initUI = function() {
// 获取 localStorage 信息
record = JSON.parse(localStorage.getItem("popstar-record")) || {total: 0, level: 0, highScore: 0}
highScore.innerHTML = "最高分：" + record.highScore;
resumeGame.className = record.level > 0 ? "popstar_btn" : "popstar_btn disabled";
}
initUI();
// 初始化游戏
var popstar = new Popstar(
{
view: document.querySelector(".popstar"),
// 当前总分数
total: record.total
}
);
// 新游戏
newGame.addEventListener("ontouchstart" in document ? "touchend" : "click", function() {
// 记录分数置 0
record.total = record.level = 0;
// 记录到 localStorage
localStorage.setItem("popstar-record", JSON.stringify(record));
menu.className = "popstar_menu hide";
setTimeout(function() {
popstar.enter(0);
}, 300);
});
// 继续游戏
resumeGame.addEventListener("ontouchstart" in document ? "touchend" : "click", function() {
if(record.level < 1) return;
menu.className = "popstar_menu hide";
setTimeout(function() {
popstar.enter(record.level);
}, 300);
});
// 关闭广告
popstarAdClose.addEventListener("ontouchstart" in document ? "touchend" : "click", function() {
popstar.resume();
popstarAd.style.display = "none";
});
// 用户按下暂停按钮
popstar.event.on("pause", function() {
popstar.pause();
popstarAd.style.display = "block";
});
// 用户按下恢复按钮
popstar.event.on("resume", function() {
popstar.resume();
popstarAd.style.display = "none";
});
// 通关
popstar.event.on("pass", function() {
// 记录当前的得分
record.total = popstar.total;
// 记录最高分
record.highScore = Math.max(record.highScore, record.total);
// 下一关
popstar.next();
// 记录最新关卡
record.level = popstar.level;
// 记录到 localStorage
localStorage.setItem("popstar-record", JSON.stringify(record));
});
// 游戏结束
popstar.event.on("gameover", function() {
// 把关卡信息重置为 0
record.level = 0;
// 记录最高分
record.highScore = Math.max(record.highScore, popstar.total);
// 记录到 localStorage
localStorage.setItem("popstar-record", JSON.stringify(record));
alert("游戏结束");
popstar.destroy();
menu.className = "popstar_menu";
// 重置信息
initUI();
});
</script>
</html>
