0 写在前面
4月第一周，我并没有被善待~~上个周末才进行了一次冯如杯四审答辩，这周3马上又跟了一次五审答辩…
从上个周五就开始准备四审，答完之后以为可以松口气了，谁料五审来的如此突然。而且更令人烦恼的是，负责我自己那个项目的指导学姐，让我反复修改答辩的PPT和讲稿。说实话，我认为项目的成功，关键还在于完成的质量，和核心科技含量，而不是在展示上徒增一些花里胡哨却无关紧要的噱头。好在北航的老师水平还是高超的，给了我不少宝贵的修改建议，还亲自帮我修改了PPT，这点我是非常感动的。既然我们无论如何努力，都无法让所有人都能满意，那么，我们就不妨舍弃掉那些不专业的人所给出不专业的建议就好了，聪明的人，内心自要对形势有着清晰的判断。
扯远了，为自己这一周没怎么写东西找点借口。
好在终于迎来了几天假期，可以好好规划一下自己的生活，学点自己喜欢的知识。
昨晚看到一个很好玩的游戏--开心消消乐。实现的逻辑非常的清晰简洁，采用纯原生JS打造，我就非常想自己也实现一个。通过自己编写这样一个好玩的小游戏，主要巩固练习了以下几个方面的知识点：
- 鼠标事件的响应
- 连通图算法
感兴趣的朋友可以点击博客右上角进入我的github。
也可以点击这里下载源代码进行试玩。
1 需求分析
1-1 初始化
在初始化阶段，我们需要初始化以下内容：
- 初始化背景
- 初始化星星小方块
- 初始化分数等显示面板
1-2 鼠标移入事件
完成初始化后，当如表移入星星区域时，需要利用连通图算法判断当前鼠标位置处的星星连通情况：
- 取消原有动画效果
- 判断连通情况
- 连通区域星星闪烁
- 计算分数并显示
1-3 鼠标点击事件
当用户点击可消星星时，需要响应该点击事件：
- 连通的星星被消除
- 下落或左移以补充空缺
- 分数累加
1-4 游戏结束的判断
- 当无连通的星星时，游戏结束
- 当分数超过了目标分数，显示闯关成功
2 实现过程
2-1 初始化
2-1-1 初始化背景
这里就是一些简单的html与css写法。
练习一个属性 background-size:
background-size:cover; 会按照图片原有比例去覆盖区域，超出部分可能被裁掉，因此不一定能看到完整图像，这里我们采用的是cover。
而background-size:100%; 则会将图片撑满整个区域，图像完整性得以保持，但是图像比例可能发生改变。
【html代码】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Get Those Stars!</title> 8 <link rel="stylesheet" href="index.css"> 9 <script src="index.js"></script> 10 </head> 11 <body> 12 <div id="pop_star"> 13 <div id="targetScore">Target Score : 2000</div> 14 <div id="nowScore">Current Score : 0</div> 15 <div id="selectScore">0 blocks 0 scores</div> 16 </div> 17 </body> 18 </html>
【css代码】
1 *{
2 margin:0;
3 padding:0;
4 }
5 html,body{
6 height: 100%;
7 width: 100%;
8 }
9 /* 以上为常用页面初始化 */
10 #pop_star{
11 height: 100%;
12 width: 500px;
13 margin: 0 auto;
14 background: url("./pic/background.png");
15 position: relative; /*父元素，为了使之后的子元素都相对于他进行定位，此处设为relative*/
16 color:white;
17 background-size: cover; /*使背景图片保持比例覆盖整个背景区域*/
18 }
19 /* 以下三个元素为现实面板，其样式相同 */
20 #targetScore{
21 width: 100%;
22 height: 50px;
23 position: relative;
24 line-height: 50px;
25 text-align: center;
26 font-size: 20px;
27 background-size: cover;
28 }
29
30 #nowScore{
31 width: 100%;
32 height: 50px;
33 position: relative;
34 line-height: 50px;
35 text-align: center;
36 font-size: 20px;
37 background-size: cover;
38 }
39
40 #selectScore{
41 width: 100%;
42 height: 50px;
43 position: relative;
44 line-height: 50px;
45 text-align: center;
46 font-size: 20px;
47 background-size: cover;
48 opacity:0;
49 }
2-1-2 初始化星星
在初始化部分，我采用JS来编写样式。
这里练习了一个比较有技巧的样式：boxSizing:border-box;
boxSizing:border-box;实现了将border限制在元素区域内，不会溢出覆盖到周围其他元素。
【初始化部分代码】
1 var table; //游戏桌面
2 var squareWidth = 50; //方块宽高
3 var boardWidth = 10; //行列数
4 var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
5 var baseScore = 5; //第一块的分数
6 var stepScore = 10; //每多一块的累加分数
7 var totalScore = 0; //当前总分
8 var targetScore = 1500; //目标分
9
10 function refresh(){ //重绘画板，每次鼠标点击后刷新
11 for(var i = 0 ; i < squareSet.length ; i ++){
12 for(var j = 0 ; j < squareSet[i].length ; j ++){
13 if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过
14 squareSet[i][j].row = i; //更新当前的行列数
15 squareSet[i][j].col = j;
16 squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"
17 squareSet[i][j].style.backgroundSize = "cover"; //占满范围
18 squareSet[i][j].style.transform = "scale(0.95)"; //美观效果让不同星星之间留出空隙（缩小至0.95倍大小）
19 squareSet[i][j].style.left = squareSet[i][j].col * squareWidth + "px"; // 别忘了加"px"
20 squareSet[i][j].style.bottom = squareSet[i][j].row * squareWidth + "px";
21 }
22 }
23 }
24
25 function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。
26 var temp = document.createElement(‘div‘); //创建div dom对象
27 temp.style.height = squareWidth + "px";
28 temp.style.width = squareWidth + "px";
29 temp.style.display = "inline-block"; //需要让对象元素能排列一排
30 temp.style.position = "absolute"; //相对于背景绝对定位
31 temp.style.boxSizing = "border-box"; //重要：不会使增加的边框溢出覆盖到旁边的元素
32 temp.style.borderRadius = "12px";
33 temp.num = value;
34 temp.col = col;
35 temp.row = row;
36 return temp; //返回这个创建出来的对象
37 }
38
39 function init(){ // JS调用入口
40 table = document.getElementById(‘pop_star‘); // 获取到最外层的父元素作为桌面
41 document.getElementById(‘targetScore‘).innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML
42 // 循环初始化星星区域
43 for(var i = 0 ; i < boardWidth ; i ++){
44 squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组
45 for(var j = 0 ; j < boardWidth ; j ++){
46 var square = createSquare(Math.floor(Math.random() * 5) , i , j);
47
48 squareSet[i][j] = square; //必须将新创建的方块放回到数组中
49 table.appendChild(square); //需要将创建的新元素添加到桌面上
50 }
51
52 }
53 refresh(); //每次页面内容发生变化需要重绘页面
54 }
55
56 window.onload = function(){
57 init();
58 } // window.onload 保证了在页面全部加载完毕后再执行JS代码
2-1-3 效果
2-2 鼠标移入事件
2-2-1 实现细节
首先，在init函数中双层循环的内层产生完小方块后，即可添加移入和点击两个事件的调用函数了。
1 square.onmouseover = function(){
2 mouseOver(this);
3 }
随后，按照思路，逐层编写函数。
先写出mouseOver函数的整体逻辑框架，发现需要：还原样式、判断相邻、闪烁和显示分数四个部分。于是紧接着按序编写这四个部分的函数。
重点是在这里，我练习了连通图的判定算法，这里采用了递归实现。
此外在闪烁方法中，运用一个数学技巧，即scale(0.9+-0.05)的方式实现了大小交替变换的闪烁效果。
另外练习了定时器setInterval(function(){},time);
以及setTimeout(function(){},time);两个方法的用法，注意体会。
1 var choose = []; //选中的连通小方块
2 var timer = null; //闪烁定时器
3 var flag = true; //锁，防止点击事件中响应其他点击或移入时间
4 var tempSquare = null; //临时方块
5
6 function goBack(){ //还原样式
7 if(timer != null){ //清空计时器
8 clearInterval(timer);
9 }
10 for(var i = 0 ; i < squareSet.length ; i ++){
11 for(var j = 0 ; j < squareSet[i].length ; j ++){
12 if(squareSet[i][j] == null) continue;
13 squareSet[i][j].style.border = "0px solid white";
14 squareSet[i][j].style.transform = "scale(0.95)";
15 }
16 }
17 }
18
19 function checkLinked(square , arr){ // 递归连通图算法
20 if(square == null) return; // 递归边界
21 arr.push(square); // 将当前方块放入选中数组中
22 // check left
23 if( square.col > 0 && //未到边界
24 squareSet[square.row][square.col - 1] && //左侧有块
25 squareSet[square.row][square.col - 1].num == square.num && //颜色相同
26 arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断
27 checkLinked(squareSet[square.row][square.col - 1] , arr);
28 }
29 // check right
30 if( square.col < boardWidth - 1 &&
31 squareSet[square.row][square.col + 1] &&
32 squareSet[square.row][square.col + 1].num == square.num &&
33 arr.indexOf(squareSet[square.row][square.col + 1]) == -1) {
34 checkLinked(squareSet[square.row][square.col + 1] , arr);
35 }
36 // check up
37 if( square.row < boardWidth - 1 &&
38 squareSet[square.row + 1][square.col] &&
39 squareSet[square.row + 1][square.col].num == square.num &&
40 arr.indexOf(squareSet[square.row + 1][square.col]) == -1) {
41 checkLinked(squareSet[square.row + 1][square.col] , arr);
42 }
43 // check down
44 if( square.row > 0 &&
45 squareSet[square.row - 1][square.col] &&
46 squareSet[square.row - 1][square.col].num == square.num &&
47 arr.indexOf(squareSet[square.row - 1][square.col]) == -1) {
48 checkLinked(squareSet[square.row - 1][square.col] , arr);
49 }
50 }
51
52 function flicker(arr){ // 选中连通的小方块可以闪烁
53 var num = 0;
54 timer = setInterval(function(){
55 for(var i = 0 ; i < arr.length ; i ++){
56 arr[i].style.border = "3px solid #BFEFFF";
57 arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";
58 }
59 num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。
60 },300);
61 }
62
63 function selectScore(){ //可以显示当前选中小方块的得分
64 var score = 0;
65 for(var i = 0 ; i < choose.length ; i ++){
66 score += (baseScore + i * stepScore);
67 }
68 if(score == 0) return;
69 document.getElementById(‘selectScore‘).innerHTML = choose.length + " blocks " + score + " points";
70 document.getElementById(‘selectScore‘).style.opacity = 1;
71 document.getElementById(‘selectScore‘).style.transition = null;
72 // 设置时间间隔1秒后显示消失的过渡动画
73 setTimeout(function(){
74 document.getElementById(‘selectScore‘).style.opacity = 0;
75 document.getElementById(‘selectScore‘).style.transition = "opacity 1s";
76 },1000);
77 }
78
79 function mouseOver(obj){
80 // 加锁，点击事件过程中不允许其他点击事件与移入事件
81 if(!flag){
82 tempSquare = obj;
83 return;
84 }
85 // 还原所有样式
86 goBack();
87 // 检查相邻
88 choose = [];
89 checkLinked(obj , choose);
90 if(choose.length <= 1){
91 choose = [];
92 return;
93 }
94 // 闪烁
95 flicker(choose);
96 // 显示分数
97 selectScore();
98 }
2-2-2 效果
2-3 鼠标点击事件
2-3-1 实现细节
点击响应时，需要先对锁进行判断与控制。
若已锁，则直接返回，否则，可以继续完成更新分数、完成星星消除、消除后的移动以及游戏结束的判断。
为了给星星消除增加一个延迟动画，这里采用循环设置定时器，但由于产生闭包，导致定时器不能按间隔变化，只能取到循环最终的值。
因此为了消除闭包，需要采用立即执行函数。
控制代码如下：
1 // 鼠标点击事件
2 square.onclick = function(){
3 //对锁进行控制
4 if(!flag || choose.length == null){
5 return;
6 }
7 flag = false;
8 tempSquare = null;
9 //更新分数
10 var score = 0;
11 for(var i = 0 ; i < choose.length ; i ++){
12 score += (baseScore + i * stepScore);
13 }
14 totalScore += score;
15 document.getElementById(‘nowScore‘).innerHTML = "Current Score : " + totalScore;
16 //为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数
17 for(var i = 0 ; i < choose.length ; i ++){
18 (function(i){
19 setTimeout(function(){
20 squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空
21 table.removeChild(choose[i]); //将其从桌面上移除
22 } , i * 100);
23 })(i);
24 }
25 //需要等星星消除完毕后再移动，故需增加一个延迟
26 setTimeout(function(){
27 move(); //调用移动函数
28 },choose.length * 100);
29 }
为了对星星的下落移动进行控制，这里采用快慢指针算法。
横向移动在循环遍历时采用了一个技巧：
只判断最底层是否有元素为null即可。
此外这里练习了splice的用法：
Array.splice(index,num);表示在数组Array中，删除从index开始的num个元素。
一定要注意横向移动循环结束条件的判断！因为删除元素后数组长度是变化的。
最后，别忘了重绘桌面调用refresh();
1 function move(){
2 //纵向下落，采用快慢指针算法
3 for(var i = 0 ; i < boardWidth ; i ++){
4 var pointer = 0; //慢指针
5 for(var j = 0 ; j < boardWidth ; j ++){
6 if(squareSet[j][i] != null){ //按行遍历
7 if(pointer != j){ //快慢指针不同步说明中间有空元素
8 squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素
9 squareSet[j][i] = null; //快指针处置空
10 }
11 pointer ++; //该行非空时慢指针增加
12 }
13 }
14 }
15 // 横向移动（当出现一列为空时）
16 for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断
17 if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空
18 for(var j = 0 ; j < boardWidth ; j ++){
19 squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素
20 }
21 continue;//注意移动后i不应改变了
22 }
23 i ++;
24 }
25 refresh();
26 }
2-3-2 效果
2-4 游戏结束的判断
2-4-1 实现细节
结束时调用结束判断函数，若结束，则返回胜负判断结果，否则对锁和连通数组重置，并处理潜在冲突。
1 //需要等星星消除完毕后再移动，故需增加一个延迟
2 setTimeout(function(){
3 move(); //调用移动函数
4 setTimeout(function(){
5 var judge = isFinish();
6 if(judge){ //游戏达到结束条件
7 if(totalScore > targetScore){
8 alert(‘Congratulations! You win!‘);
9 }
10 else{
11 alert(‘Mission Failed!‘);
12 }
13 }
14 else{
15 flag = true;
16 choose = [];
17 mouseOver(tempSquare); //处理可能存在的冲突
18 }
19 },300 + choose.length * 75); //需要一个判断延迟
20 },choose.length * 50);
判断结束函数，重要：必须解除锁
以便后续鼠标事件可以被响应。
1 function isFinish(){ //判断游戏结束
2 flag = true; //重要：需要先解锁，保证后续鼠标事件可以被响应
3 for(var i = 0 ; i < squareSet.length ; i ++){
4 for(var j = 0 ; j < squareSet[i].length ; j ++){
5 if(squareSet[i][j] == null) continue; //遍历每一元素判断连通
6 var temp = [];
7 checkLinked(squareSet[i][j] , temp);
8 if(temp.length > 1) return false;
9 }
10 }
11 return flag;
12 }
2-4-2 效果
3 后记
完成这个开心消消乐用掉了一天的时间，其中遇到了许多困难，但是经过一步步调试，最后还是成功完成了阿尔法版。
在这里面练习到了许多js和css3的基础知识，巩固知识点的同时，完成了一个小游戏，还是颇有成就感的。
在贝塔版中，我计划美化一下显示面板，增加一个难度系数选择按钮，增加一个重新开始功能以及增加闯关机制。
此外，在贝塔版中，我还准备重构部分代码，优化算法和代码逻辑，替换掉一些硬编码，删除部分死代码。
总之，做自己真正热爱的事情，才会收获到加倍的快乐！
原文地址：https://www.cnblogs.com/chrischen98/p/10659336.html
时间： 2024-11-08 20:35:40