这篇文章主要为大家详细介绍了js实现web简易版的消灭星星，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
昨天看视频之后，整理思路，自己完成了简易版消灭星星
思路：
模块1：初始化
- 初始化总分数、当前分数、背景图、选择的星星分数
- 初始化星星（生成二维数组，对二维数组的每一个对象设置样式（长、宽、背景图），生成二维数组个div元素节点插入到游戏面板中）
模块2：预判
判断：
鼠标移动到某一个方块，判断上下左右是否有连接着的小方块（采用递归方法），然后将其存储到数组choose[]，移到其他方块时，choose置为空
闪烁：
将已选中的小方块设置样式（缩放）
显示选择分数：
设置初始分数和递增分数，根据选中的块数算出选中的分数
模块3：点击
消失:
点击已选中的小方块，将连着的所有小方块在二维数组的位置设置为空，清空choose数组
移动：
下移：设置一个指针，指向最下面的行。每当行+1，若遇到不为空的方块，则pointer++,若遇到该列某行为空，则将pointer的行数设为i
左移：最底部的一行若有一列为空，将右边的所有方块的列-1
判断：
每次点击完成之后判断游戏是否结束
代码部分
html
html结构很简单
Title 目标分数：2000当前分数：00块 0分
CSS
css布局也很简单，相信不用我来说
* { margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; } #pop_star { width: 500px; height: 100%; background: url("./pic/background.png-600"); 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; }
JS
/* 创建二维数组 * * * */ var table ; var suqareWidth = 50 ; //一个星星/方块边长 var boardWidth = 10 ; //横竖方块个数 var squareSet = [];//小方块的集合，二维数组 var choose = [];//有相邻的小方块，将其放到这个数组 var timer = null ; var baseScore = 5 ; var stepScore = 10 ; var totalScore = 0 ; var targetScore = 1500; var flag = true ; var tempSquare = null;//在处理鼠标动作过程中，动作被屏蔽，导致事件处理完成，有不连贯现象 function createSquare(value , row , col){ //创建小方块节点 var blocks = 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-600 blocks.num = value ; blocks.row = row ; blocks.col = col ; return blocks; } function refresh(){ for(var i = 0 ; i <squareSet.length ; i ++){ for (var j = 0 ; j 0 && 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.col 0 && 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); } } //让选中的小方块闪烁 function flicker(arr){ var num = 0 ; //设置计时器，让其一之闪烁 timer = setInterval(function(){ for (var i = 0 ; i 1){ return false ; } } } return true; } function init(){ //获取面板 table = document.getElementById('pop_star'); //创建二维数组 for(var i = 0 ; i <boardwidth ; i++){ squareset[i]=new array(); for(var j = 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，网址
以上就是js实现消灭星星(web简易版)的详细内容，更多请关注本站其它相关文章！
