微客导航 » 文章资讯 » js实现消灭星星(web简易版)

js实现消灭星星(web简易版)

2023-07-28 05:28:12 189

昨天看视频之后，整理思路，自己完成了简易版消灭星星

思路：

模块1：初始化

初始化总分数、当前分数、背景图、选择的星星分数
初始化星星（生成二维数组，对二维数组的每一个对象设置样式（长、宽、背景图），生成二维数组个div元素节点插入到游戏面板中）

模块2：预判

判断：

鼠标移动到某一个方块，判断上下左右是否有连接着的小方块（采用递归方法），然后将其存储到数组choose[]，移到其他方块时，choose置为空

闪烁：

将已选中的小方块设置样式（缩放）

显示选择分数：

设置初始分数和递增分数，根据选中的块数算出选中的分数

模块3：点击

消失:

点击已选中的小方块，将连着的所有小方块在二维数组的位置设置为空，清空choose数组

移动：

下移：设置一个指针，指向最下面的行。每当行+1，若遇到不为空的方块，则pointer++,若遇到该列某行为空，则将pointer的行数设为i

左移：最底部的一行若有一列为空，将右边的所有方块的列-1

判断：

每次点击完成之后判断游戏是否结束

代码部分

html

html结构很简单





Title





目标分数：2000

当前分数：0

0块0分

CSS

css布局也很简单，相信不用我来说

*{
margin:0px;
padding:0px;
}

html,body{
height:100%;
width:100%;
}

#pop_star{
width:500px;
height:100%;
background:url("./pic/background.png");
margin-left:auto;
margin-right:auto;
position:relative;
background-size:cover;
font-size:0px;
}

#target_score{
width:100%;
height:50px;
line-height:50px;
text-align:center;
color:white;
font-size:20px;
position:relative;
}

#now_score{
width:100%;
height:50px;
line-height:50px;
text-align:center;
color:white;
font-size:20px;
position:relative;
}

#select_score{
width:100%;
height:50px;
line-height:50px;
text-align:center;
color:white;
font-size:20px;
position:relative;
opacity:0;
}

/*
创建二维数组
*
*
**/
vartable;
varsuqareWidth=50;//一个星星/方块边长
varboardWidth=10;//横竖方块个数
varsquareSet=[];//小方块的集合，二维数组
varchoose=[];//有相邻的小方块，将其放到这个数组
vartimer=null;
varbaseScore=5;
varstepScore=10;
vartotalScore=0;
vartargetScore=1500;
varflag=true;
vartempSquare=null;//在处理鼠标动作过程中，动作被屏蔽，导致事件处理完成，有不连贯现象
functioncreateSquare(value,row,col){
//创建小方块节点
varblocks=document.createElement('div');
//设置样式
blocks.style.width=suqareWidth+'px';
blocks.style.height=suqareWidth+'px';
blocks.style.display='inline-block';
blocks.style.boxSizing='border-box';
blocks.style.position='absolute';
blocks.style.borderRadius="12px";
//小方块的行和列，小方块的num.jpg
blocks.num=value;
blocks.row=row;
blocks.col=col;
returnblocks;
}
functionrefresh(){
for(vari=0;i0&&squareSet[square.row][square.col-1]
&&squareSet[square.row][square.col-1].num==square.num
&&arr.indexOf(squareSet[square.row][square.col-1])==-1){
checkLinked(squareSet[square.row][square.col-1],arr);
}
//向右
if(square.col0&&squareSet[square.row-1][square.col]
&&squareSet[square.row-1][square.col].num==square.num
&&arr.indexOf(squareSet[square.row-1][square.col])==-1){
checkLinked(squareSet[square.row-1][square.col],arr);
}
}
//让选中的小方块闪烁
functionflicker(arr){
varnum=0;
//设置计时器，让其一之闪烁
timer=setInterval(function(){
for(vari=0;i1){
returnfalse;
}
}
}
returntrue;
}
functioninit(){
//获取面板
table=document.getElementById('pop_star');
//创建二维数组
for(vari=0;i=targetScore){
alert('闯关成功');
}else{
alert('闯关失败');
}
}else{//还可以继续
choose=[];
flag=true;
mouseOver(tempSquare);
}
},300+choose.length*150);
},choose.length*100);
}
//将小方块放进二维数组
squareSet[i][j]=square;
//将创建好的小方块插入到面板中
table.appendChild(square);
}
}
//显示小星星，刷新整个面板

refresh();
}
//页面加载完成之后，初始化所有操作
window.onload=function(){
init();
}

其实这里还有优化的就是闯关部分，大致的思路就是，游戏每过一关增加目标分数，当游戏结束时，闯关失败，目标分数恢复初始值。

大家有什么不懂，可以在评论区评论。

jq进阶版的源码详情见我github，网址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现消灭星星(web简易版)

热门推荐

随机推荐