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

本是古典何须时尚 2024-04-06 13:55 77阅读 0赞

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

![在这里插入图片描述][74b042efc8e648a181c38348a1123ef8.png_pic_center]  
![在这里插入图片描述][13f5db1bfc514d5e9ec52c1f630c1321.png_pic_center]  
![在这里插入图片描述][11be83ff21354cf285853ddeb1ec0a2b.png_pic_center]  
![在这里插入图片描述][bcf793f045db4719824d322becee07d4.png_pic_center]  
![在这里插入图片描述][499fc80bcee04d66ad808635b1f67e49.png_pic_center]  
![在这里插入图片描述][b9fd8bc6d5f2404a9120eefd350ca425.png_pic_center]  
![在这里插入图片描述][0aa05c99684548699ac014612386a039.png_pic_center]  
![在这里插入图片描述][2cbd8da7017546cbaae23d85762947a5.png_pic_center]  
![在这里插入图片描述][793d6ff2cc2f4da18884dd6a96dda39c.png_pic_center]

[74b042efc8e648a181c38348a1123ef8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b6b8b86c8fbd4bf783b73aa17bbe3d79.png
[13f5db1bfc514d5e9ec52c1f630c1321.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c1d5c02bf9794a7caaa350677cb995cf.png
[11be83ff21354cf285853ddeb1ec0a2b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d07c5ddc795c48b4bd6bce04ca6b23f1.png
[bcf793f045db4719824d322becee07d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6a71a9e66ffd47b0ab6007a1312234e2.png
[499fc80bcee04d66ad808635b1f67e49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6ca73a4472f0493c93d716f076344882.png
[b9fd8bc6d5f2404a9120eefd350ca425.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1f7eb0404cb04b3e835d52e50b7d821c.png
[0aa05c99684548699ac014612386a039.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2ed6ec99acbf4e078701fd7910f1a633.png
[2cbd8da7017546cbaae23d85762947a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/152907d8ba21444a964bdcf7e75d92da.png
[793d6ff2cc2f4da18884dd6a96dda39c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e3822c0b0d8d45db80ad27b94e3e01f9.png