基于HTML5的消灭星星网页小游戏设计

目录
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>

在这里插入图片描述

相关阅读:
【晨读算法】为什么经常看到使用朴素贝叶斯公式的时候把分母忽略了？
Transformers.js v2.6 现已发布
 前端学成在线项目详细解析二
 [从零开始学习FPGA编程-51]：高阶篇 - 基于IP核的FPGA开发- 什么是FPGA IP核(软核、固核、硬核)与学习方法
 计算机毕业设计基于thinphp 的校园论坛交流网站(源码+系统+mysql数据库+Lw文档）
消息中间件解析 | 如何正确理解软件应用系统中关于系统通信的那些事？
openvino cpp使用
 PhalAPI学习笔记拓展篇 ———ADM模式中NotORM实现简单CURD
单元测试、集成测试、系统测试到底有什么不同？
ArGIS Engine专题（14）之GP模型根据导入范围与地图服务相交实现叠置分析
原文地址：https://blog.csdn.net/newlw/article/details/127085120