首页 建站模板下载 JQuery插件下载 转载文章 HTML CSS Javascript Java Python
新用户注册入口 老用户登录入口
取 消 登录 注册
Golang MySQL Mongo Redis Kafka SpringBoot Linux Docker VUE ReactJS
前端技术
HTML CSS Javascript
前端框架和UI库
VUE ReactJS AngularJS JQuery NodeJS JSON Element-UI Bootstrap Material UI
服务端和客户端
Java Python PHP Golang Scala Kotlin Groovy Ruby Lua .net c# c++
后端WEB和工程框架
SpringBoot SpringCloud Struts2 MyBatis Hibernate Tornado Beego Go-Spring Go Gin Go Iris Dubbo HessianRPC Maven Gradle
数据库
MySQL Oracle Mongo
中间件与web容器
Redis MemCache Etcd Cassandra Kafka RabbitMQ RocketMQ ActiveMQ Nacos Consul Tomcat Nginx Netty
大数据技术
Hive Impala ClickHouse DorisDB Greenplum PostgreSQL HBase Kylin Hadoop Apache Pig ZooKeeper SeaTunnel Sqoop Datax Flink Spark Mahout
数据搜索与日志
ElasticSearch Apache Lucene Apache Solr Kibana Logstash
数据可视化与OLAP
Apache Atlas Superset Saiku Tesseract
系统与容器
Linux Shell Docker Kubernetes
首页 / 转载文章

[转载]消消乐测试

文章作者：转载 • 更新时间：2023-06-08 15:26:34 • 阅读数量：515
文章标签：游戏桌面方块二维数组鼠标交互背景图片绝对定位
本文摘要：这篇文章详细介绍了如何使用HTML、CSS和JavaScript构建一款消除类小游戏的基础界面及动态交互效果。通过JavaScript初始化游戏桌面，利用二维数组`squareSet`存储方块信息，并采用`createSquare`函数创建并定位各色小方块至游戏画布上。在鼠标交互阶段，实现了选中方块的闪烁特效，通过调用`mouseOver`函数触发连通图算法`checkLinked`以查找相同颜色的相邻方块，并借助定时器实现选定方块集合的连续闪烁。同时引入了基础分数、累加分数等计分系统概念，但未详述得分计算与更新逻辑。整个过程涉及页面重绘（refresh）、绝对定位、背景图片以及文档加载完成（window.onload）等关键技术点。
转载文章

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_56471396/article/details/128681321。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

资料出处

资料来源于博客园一位博主的资料，连接如下：

https://www.cnblogs.com/chrischen98/p/10659336.html

第一阶段：静态画面

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="index.css"><script src="index.js"></script>
</head>
<body>
<div id="pop_star"><div id="targetScore">Target Score : 2000</div><div id="nowScore">Current Score : 0</div><div id="selectScore">0 blocks 0 scores</div>
</div>
</body>
</html>

css

/* 常用页面初始化 */
*{margin:0;padding:0;
}
html,body{height: 100%;width: 100%;
}#pop_star{height: 100%;width: 500px;margin: 0 auto;background: url("./pic/background.png");position: relative; /*父元素，为了使之后的子元素都相对于他进行定位，此处设为relative*/color:white;background-size: cover; /*使背景图片保持比例覆盖整个背景区域*/
}
/* 以下三个元素为现实面板，其样式相同 */
#targetScore{width: 100%;height: 50px;position: relative;line-height: 50px;text-align: center;font-size: 20px;background-size: cover;
}#nowScore{width: 100%;height: 50px;position: relative;line-height: 50px;text-align: center;font-size: 20px;background-size: cover;
}#selectScore{width: 100%;height: 50px;position: relative;line-height: 50px;text-align: center;font-size: 20px;background-size: cover;opacity:0;/*不透明度*/
}

js

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function refresh(){ //重绘画板，每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.left = squareSet[i][j].col * squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row * squareWidth + "px";}}
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面for(var i = 0 ; i < boardWidth; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

效果

在这里插入图片描述

第二阶段：鼠标选中后，闪烁

只有JavaScript需要修改

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
var baseScore = 5; //第一块的分数
var stepScore = 10; //每多一块的累加分数
var totalScore = 0; //当前总分
var targetScore = 1500; //目标分var choose = []; //选中的连通小方块
var timer = null; //闪烁定时器
var flag = true; //锁，防止点击事件中响应其他点击或移入时间
var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].col*squareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].row*squareWidth+"px";}}
}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";}}
}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 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);}// check upif( square.row < boardWidth - 1 &&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);}// check downif( square.row > 0 &&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 < arr.length ; i ++){arr[i].style.border = "3px solid #BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间
}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

效果2.1

在这里插入图片描述

加入这段代码，便会计算闪烁方块得分

function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);
}

完整代码为：

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
var baseScore = 5; //第一块的分数
var stepScore = 10; //每多一块的累加分数
var totalScore = 0; //当前总分
var targetScore = 1500; //目标分var choose = []; //选中的连通小方块
var timer = null; //闪烁定时器
var flag = true; //锁，防止点击事件中响应其他点击或移入时间
var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].col*squareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].row*squareWidth+"px";}}
}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";}}
}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 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);}// check upif( square.row < boardWidth - 1 &&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);}// check downif( square.row > 0 &&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 < arr.length ; i ++){arr[i].style.border = "3px solid #BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间
}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);
}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

效果2.2

在这里插入图片描述

第三阶段：消灭星星（只消灭一次）

只消除选中的星星，但是不会掉下来。
在function init(){}里面添加以下代码：

      // 鼠标点击事件square.removed = function(){//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i * 100);})(i);}}

效果
在这里插入图片描述

使得星星移动（原作者这里出现错误）

function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加}}}

完整代码如下：

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
var baseScore = 5; //第一块的分数
var stepScore = 10; //每多一块的累加分数
var totalScore = 0; //当前总分
var targetScore = 1500; //目标分var choose = []; //选中的连通小方块
var timer = null; //闪烁定时器
var flag = true; //锁，防止点击事件中响应其他点击或移入时间
var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].col*squareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].row*squareWidth+"px";}}
}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";}}
}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 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);}// check upif( square.row < boardWidth - 1 &&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);}// check downif( square.row > 0 &&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 < arr.length ; i ++){arr[i].style.border = "3px solid #BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间
}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);
}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();
}function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加}}}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.removed = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i * 100);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length * 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

效果（下降成功，但是有点小bug只有部分下降了）

在这里插入图片描述

解决方案：只需要在function refresh(){}的双循环里面增加以下代码：
if(squareSet[i][j] == null) continue;
完整代码如下：

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
var baseScore = 5; //第一块的分数
var stepScore = 10; //每多一块的累加分数
var totalScore = 0; //当前总分
var targetScore = 1500; //目标分var choose = []; //选中的连通小方块
var timer = null; //闪烁定时器
var flag = true; //锁，防止点击事件中响应其他点击或移入时间
var tempSquare = null; //临时方块function refresh(){for (var i = 0; i < squareSet.length; i++) {for (var j = 0; j < squareSet[i].length; j++) {if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].style.background="url(pic/"+squareSet[i][j].num+".png)"squareSet[i][j].style.left=squareSet[i][j].col*squareWidth+"px";squareSet[i][j].style.bottom=squareSet[i][j].row*squareWidth+"px";}}
}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.position = "absolute"; //相对于背景绝对定位temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";}}
}function checkLinked(square , arr){ // 递归连通图算法arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 0 && //未到边界squareSet[square.row][square.col - 1].num == square.num && //颜色相同arr.indexOf(squareSet[square.row][square.col - 1]) == -1) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 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);}// check upif( square.row < boardWidth - 1 &&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);}// check downif( square.row > 0 &&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 < arr.length ; i ++){arr[i].style.border = "3px solid #BFEFFF";//有个框arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";//一闪一闪}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);//闪烁的时间
}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);
}function mouseOver(obj){ //鼠标移入区域响应// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);// 闪烁flicker(choose);// 显示分数selectScore();
}function move(){//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加}}}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ //必须注意循环结束条件的判断if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.removed = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i * 100);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数},choose.length * 100);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

第四阶段：消灭全部星星，返回结果

最终完整版代码如下：

var table; //游戏桌面
var squareWidth = 50; //方块宽高
var boardWidth = 10; //行列数
var squareSet = []; //方块信息集合（二维数组）每个元素保存该方块的全部信息
var baseScore = 5; //第一块的分数
var stepScore = 10; //每多一块的累加分数
var totalScore = 0; //当前总分
var targetScore = 1500; //目标分var choose = []; //选中的连通小方块
var timer = null; //闪烁定时器
var flag = true; //锁，防止点击事件中响应其他点击或移入时间
var tempSquare = null; //临时方块function refresh(){ //重绘画板，每次鼠标点击后刷新for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; // 点击后数组中可能有空值需要跳过squareSet[i][j].row = i; //更新当前的行列数squareSet[i][j].col = j;squareSet[i][j].style.backgroundImage = "url(./pic/" + squareSet[i][j].num + ".png)"squareSet[i][j].style.backgroundSize = "cover"; //占满范围squareSet[i][j].style.transform = "scale(0.95)"; //美观效果让不同星星之间留出空隙（缩小至0.95倍大小）squareSet[i][j].style.left = squareSet[i][j].col * squareWidth + "px"; // 别忘了加"px"squareSet[i][j].style.bottom = squareSet[i][j].row * squareWidth + "px";squareSet[i][j].style.transition = "left 0.3s, bottom 0.3s";}}
}function createSquare(value,row,col){ //创建小方块，传入参数为颜色、行、列，初始化时使用。var temp = document.createElement('div'); //创建div dom对象temp.style.height = squareWidth + "px";temp.style.width = squareWidth + "px";temp.style.display = "inline-block"; //需要让对象元素能排列一排temp.style.position = "absolute"; //相对于背景绝对定位temp.style.boxSizing = "border-box"; //重要：不会使增加的边框溢出覆盖到旁边的元素temp.style.borderRadius = "12px";temp.num = value;temp.col = col;temp.row = row;return temp; //返回这个创建出来的对象
}function goBack(){ //还原样式if(timer != null){ //清空计时器clearInterval(timer);}for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue;squareSet[i][j].style.border = "0px solid white";squareSet[i][j].style.transform = "scale(0.95)";}}
}function checkLinked(square , arr){ // 递归连通图算法if(square == null) return; // 递归边界arr.push(square); // 将当前方块放入选中数组中// check leftif( square.col > 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) { //不在choose中，避免循环判断checkLinked(squareSet[square.row][square.col - 1] , arr);}// check rightif( square.col < boardWidth - 1 &&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);}// check upif( square.row < boardWidth - 1 &&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);}// check downif( square.row > 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 < arr.length ; i ++){arr[i].style.border = "3px solid #BFEFFF";arr[i].style.transform = "scale(" + (0.9 + (0.05 * Math.pow(-1 , num))) + ")";}num ++; // 注意这里所采用的数学技巧，仍然使用transform:scale(val)来进行缩放。},300);
}function selectScore(){ //可以显示当前选中小方块的得分var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}if(score == 0) return;document.getElementById('selectScore').innerHTML = choose.length + " blocks " + score + " points";document.getElementById('selectScore').style.opacity = 1;document.getElementById('selectScore').style.transition = null;// 设置时间间隔1秒后显示消失的过渡动画setTimeout(function(){document.getElementById('selectScore').style.opacity = 0;document.getElementById('selectScore').style.transition = "opacity 1s";},1000);
}function mouseOver(obj){ //鼠标移入区域响应// 加锁，点击事件过程中不允许其他点击事件与移入事件if(!flag){tempSquare = obj;return;}// 还原所有样式goBack();// 检查相邻choose = [];checkLinked(obj , choose);if(choose.length <= 1){choose = [];return;}// 闪烁flicker(choose);// 显示分数selectScore();
}function move(){ //下落移动控制//纵向下落，采用快慢指针算法for(var i = 0 ; i < boardWidth ; i ++){var pointer = 0; //慢指针for(var j = 0 ; j < boardWidth ; j ++){if(squareSet[j][i] != null){ //按行遍历if(pointer != j){ //快慢指针不同步说明中间有空元素squareSet[pointer][i] = squareSet[j][i]; //慢指针设成快指针元素squareSet[j][i].row = pointer;squareSet[j][i] = null; //快指针处置空}pointer ++; //该行非空时慢指针增加}}}// 横向移动（当出现一列为空时）for(var i = 0 ; i < squareSet[0].length ;){ // 注意循环终止条件的判断！！！因为数组长度会更新if(squareSet[0][i] == null){ //逻辑：只需判断最低层为空，该行则全为空for(var j = 0 ; j < boardWidth ; j ++){squareSet[j].splice(i , 1); //splice删除数组squareSet[j]中从i开始的1个元素}continue;//注意移动后i不应改变了}i ++;}refresh();
}function isFinish(){ //判断游戏结束flag = true; //重要：需要先解锁，保证后续鼠标事件可以被响应for(var i = 0 ; i < squareSet.length ; i ++){for(var j = 0 ; j < squareSet[i].length ; j ++){if(squareSet[i][j] == null) continue; //遍历每一元素判断连通var temp = [];checkLinked(squareSet[i][j] , temp);if(temp.length > 1) return false; //若有某一元素仍有多块连通，则游戏未结束}}return flag;
}function init(){ // JS调用入口table = document.getElementById('pop_star'); // 获取到最外层的父元素作为桌面document.getElementById('targetScore').innerHTML = "Target Score : " + targetScore; //显示目标分数用innerHTML// 循环初始化星星区域for(var i = 0 ; i < boardWidth ; i ++){squareSet[i] = new Array(); //二维数组的创建，对每一个元素new Array()创建新数组for(var j = 0 ; j < boardWidth ; j ++){var square = createSquare(Math.floor(Math.random() * 5) , i , j);// 鼠标移入事件square.onmouseover = function(){mouseOver(this);}// 鼠标点击事件square.removed = function(){//对锁进行控制if(!flag || choose.length == null){return;}flag = false;tempSquare = null;//更新分数var score = 0;for(var i = 0 ; i < choose.length ; i ++){score += (baseScore + i * stepScore);}totalScore += score;document.getElementById('nowScore').innerHTML = "Current Score : " + totalScore;//为移除增加一个延迟动画，为了防止闭包，这里采用立即执行函数for(var i = 0 ; i < choose.length ; i ++){(function(i){setTimeout(function(){squareSet[choose[i].row][choose[i].col] = null; //为状态数组置空table.removeChild(choose[i]); //将其从桌面上移除} , i * 50);})(i);}//需要等星星消除完毕后再移动，故需增加一个延迟setTimeout(function(){move(); //调用移动函数setTimeout(function(){var judge = isFinish();if(judge){  //游戏达到结束条件if(totalScore > targetScore){alert('Congratulations! You win!');}else{alert('Mission Failed!');}}else{flag = true;choose = [];mouseOver(tempSquare); //处理可能存在的冲突}},300 + choose.length * 75); //需要一个判断延迟},choose.length * 50);}squareSet[i][j] = square; //必须将新创建的方块放回到数组中table.appendChild(square); //需要将创建的新元素添加到桌面上}}refresh(); //每次页面内容发生变化需要重绘页面
}window.onload = function(){init();
}   // window.onload 保证了在页面全部加载完毕后再执行JS代码

效果
在这里插入图片描述

本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_56471396/article/details/128681321。

该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。

作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

相关阅读
文章标题：[转载][洛谷P1082]同余方程

更新时间：2023-02-18
[转载][洛谷P1082]同余方程
文章标题：[转载]webpack优化之HappyPack实战

更新时间：2023-08-07
[转载]webpack优化之HappyPack实战
文章标题：[转载]oracle 同时更新多表,在Oracle数据库中同时更新两张表的简单方法

更新时间：2023-09-10
[转载]oracle 同时更新多表,在Oracle数据库中同时更新两张表的简单方法
文章标题：[转载][Unity] 包括场景互动与射击要素的俯视角闯关游戏Demo

更新时间：2024-03-11
[转载][Unity] 包括场景互动与射击要素的俯视角闯关游戏Demo
文章标题：[转载]程序员也分三六九等？等级差异，一个看不起一个！

更新时间：2024-05-10
[转载]程序员也分三六九等？等级差异，一个看不起一个！
文章标题：[转载]海贼王 动漫 全集目录 分章节 精彩打斗剧集

更新时间：2024-01-12
[转载]海贼王 动漫 全集目录 分章节 精彩打斗剧集
名词解释
作为当前文章的名词解释，仅对当前文章有效。
二维数组：在编程中，特别是在JavaScript中，二维数组是一种多维数据结构，用于存储表格形式的数据。在本文的上下文中，二维数组`squareSet`被用来存储消除类游戏中的方块信息，每个元素是一个子数组，代表一行方块，子数组中的每个元素则表示一个具体方块的信息，如颜色、行列位置等。通过使用二维数组，开发者能够方便地根据行列索引访问和操作每一个方块。
连通图算法：在计算机科学中，连通图算法是指处理图论问题的一种方法，通常用于确定图中的节点（或对象）是否通过边（或关系）彼此相连形成一个连通分量。在这篇文章中，作者应用了一个递归实现的连通图算法——`checkLinked`函数，当玩家鼠标移入某个方块时，该算法会遍历与其颜色相同的相邻方块，检查并收集所有可以消除的连通方块，以便进行后续的计分和动画效果展示。
定时器（Timer）：定时器是浏览器提供的JavaScript特性之一，允许开发人员设置一段代码在特定时间间隔后执行。在这篇文章描述的游戏开发过程中，定时器被用来实现选中方块的闪烁特效。通过设置一个定时器（例如`timer`变量），每经过一定的时间间隔（如300毫秒），就改变选中方块的样式属性，使其产生连续的视觉变化，从而达到闪烁的效果。
绝对定位（Absolute Positioning）：在CSS布局中，绝对定位是一种定位模式，它允许开发人员为元素指定精确的坐标值来决定其在页面上的确切位置，而不是遵循正常的文档流。文章中创建的小方块采用的就是绝对定位方式，确保它们可以根据行列位置准确地放置于游戏画布上，无论其他元素如何变化，这些方块的位置始终保持不变。
延伸阅读
作为当前文章的延伸阅读，仅对当前文章有效。
在深入理解了博客园博主分享的消除类游戏静态画面构建与动态效果实现之后，我们可进一步探讨当前HTML5游戏开发领域的最新技术和趋势。随着Web技术的快速发展，Canvas和WebGL等现代API使得网页游戏的性能表现与视觉体验得到显著提升。
近期，Mozilla Hacks发布了一篇题为《利用WebAssembly和WebGPU打造高性能网页游戏》的文章，详细介绍了如何借助WebAssembly将C++等编译成可在浏览器中高效运行的代码，从而大幅提升游戏性能。同时，WebGPU作为下一代浏览器图形接口，为开发者提供了低级别的硬件访问权限，可以创建更复杂的3D图形和实时渲染效果，对于消除类游戏这类对响应速度有较高要求的游戏来说具有重大意义。
此外，游戏设计中的AI算法也是值得关注的方向。例如，运用深度学习和强化学习技术优化消除类游戏的智能提示系统，能有效提高玩家体验并延长游戏生命周期。一篇发表在“自然”杂志子刊上的论文就研究了AI在连连看等消除类游戏中的应用，展示了通过机器学习预测最佳消除路径的可能性。
总的来说，在继续深入实践HTML、CSS、JavaScript基础开发的同时，紧跟Web技术前沿进展，结合先进的编程语言、图形处理技术和AI算法，将有助于开发者打造出更为丰富、流畅且富有挑战性的消除类游戏产品，不断满足日益增长的用户体验需求。
知识学习
实践的时候请根据实际情况谨慎操作。
随机学习一条linux命令：
scp local_file user@remote_host:destination_path - 安全复制文件到远程主机。
推荐内容
推荐本栏目内的其它文章，看看还有哪些文章让你感兴趣。
转载文章
[转载][洛谷P1082]同余方程
2023-02-18
转载文章
[转载]webpack优化之HappyPack实战
2023-08-07
转载文章
[转载]oracle 同时更新多表,在Oracle数据库中同时更新两张表的简单方法
2023-09-10
转载文章
[转载]海贼王 动漫 全集目录 分章节 精彩打斗剧集
2024-01-12
转载文章
[转载]Proxy 、Relect、响应式
2023-01-11
转载文章
[转载]WinForm-ListBox控件美化
2023-10-22
转载文章
[转载]FLASH右键菜单的应用
2023-01-13
转载文章
[转载]MySQL: 分页查询公式
2023-10-29
转载文章
[转载]详解Class类文件的结构（上）
2024-01-09
转载文章
[转载]【设计原则】依赖倒置原则 (面向接口编程)
2023-08-26
转载文章
[转载]小白鼠的逆袭
2023-01-02
转载文章
[转载]第六计 / Explosive City (2004)
2023-05-10
快速导航
这里展示了本站支持的所有栏目，方便快速切换。
首页 建站模板下载 JQuery插件下载 转载文章 HTML CSS Javascript Java Python PHP Golang Scala Kotlin Groovy Ruby Lua .net c# c++ SpringBoot SpringCloud Struts2 Tornado Beego Go-Spring Go Gin Go Iris MyBatis Hibernate MySQL Oracle Mongo VUE ReactJS AngularJS JQuery NodeJS JSON Element-UI Bootstrap Material UI Redis MemCache Etcd Cassandra Kafka RabbitMQ RocketMQ ActiveMQ Hive Impala ClickHouse DorisDB Greenplum PostgreSQL HBase Kylin Hadoop Apache Pig ElasticSearch Lucene Apache Solr Kibana Logstash SeaTunnel Sqoop Datax Flink Spark Atlas Superset Saiku Mahout Tesseract ZooKeeper Nacos Consul Dubbo HessianRPC Tomcat Nginx Netty Linux Shell Docker Kubernetes Maven Gradle
历史内容
快速导航到对应月份的历史文章列表。
全部文章 转载文章 2025年05月 2025年04月 2025年03月 2025年02月 2025年01月 2024年12月 2024年11月 2024年10月 2024年09月 2024年08月 2024年07月 2024年06月 2024年05月 2024年04月 2024年03月 2024年02月 2024年01月 2023年12月 2023年11月 2023年10月 2023年09月 2023年08月 2023年07月 2023年06月 2023年05月 2023年04月 2023年03月 2023年02月 2023年01月
随便看看
拉到页底了吧，随便看看还有哪些文章你可能感兴趣。
[JQuery插件下载]纯js实用T恤衫花纹图案预览特效 01-26 [JQuery插件下载]基于Bootstrap仿Github样式下拉列表框插件 08-08 [JQuery插件下载]jQuery电子邮件地址填写自动完成插件 04-30 [Superset]Superset 数据源连接配置：精细化自定义SQLAlchemy URI实现数据分析与可视化，含SSL加密连接实例 03-19 [JQuery插件下载]jquery可任意拖动排序的导航图片效果 02-23 [建站模板下载]侧边栏个人图文简历HTML模板 12-09 [Beego]Beego框架升级中的Bee工具版本兼容性问题与迁移策略：结构变更、功能接口变动及社区解决方案 12-07 [Kibana]Kibana无法启动：针对服务器内部错误的Elasticsearch连接、配置文件、端口冲突与资源排查解决（注：由于字数限制，未能完全包含所有关键词，但包含了核心问题描述及几个关键排查点） 11-01 [ClickHouse]ClickHouse外部表使用中文件权限与不存在问题的解决方案：错误提示、查询操作与文件路径管理实务 09-29 本次刷新还10个文章未展示，点击 更多查看。
[Apache Atlas]Apache Atlas UI无法正常加载与样式丢失问题排查及解决方案：关注网络连接、浏览器缓存与开发者工具应用 09-25 [Greenplum]Greenplum数据库中数据插入操作详解：单行多行插入与gpfdist实现大批量导入 08-02 [转载文章][转载]html5 footer header,html-5 --html5教程article、footer、header、nav、section使用 07-16 [转载文章][转载][GCC for C]编译选项---IDE掩盖下的天空 06-29 [建站模板下载]简洁大方珠宝钻石收藏网站模板下载 06-20 [建站模板下载]黑色高端精致汽车4s店美容html5模板下载 06-01 [建站模板下载]蓝色互联网项目融资管理平台网站模板 05-16 [建站模板下载]响应式游戏开发类企业前端cms模板下载 05-02 [Beego]Beego框架动态路由实现：重定向与命令行参数驱动的路由设计实践 04-05 [.net].NET 中字典操作避免 KeyNotFoundException：TryGetValue、ContainsKey 与 GetOrAdd 实践详解 04-04 [转载文章][转载]2021/4/23爬虫第五次课（爬虫网络请求模块下下） 03-01
时光飞逝
"流光容易把人抛，红了樱桃，绿了芭蕉。"
  客服QQ：424399461 工作时间：8:30-22:00 鲁ICP备2023030764号-4 中国互联网举报中心 本站的站点地图