网站内容页设计,网站建设实验分析,甘肃网站建设选哪家,营销网站建设的公司有哪些HTML5JavaScript实现连连看游戏之二 以前一篇#xff0c;见 https://blog.csdn.net/cnds123/article/details/144220548 连连看游戏连接规则#xff1a;
只能连接相同图案#xff08;或图标、字符#xff09;的方块。
连线路径必须是由直线段组成的#xff0c;最多可以有…HTML5JavaScript实现连连看游戏之二 以前一篇见 https://blog.csdn.net/cnds123/article/details/144220548 连连看游戏连接规则
只能连接相同图案或图标、字符的方块。
连线路径必须是由直线段组成的最多可以有两个拐角。
连线路径必须是空的不能穿过其他方块。
当两个相同图案的方块被有效连接时它们会从游戏板上消失。当所有方块都被消除时玩家获胜。 现在再发布一个可以自定义 行列数、可用图片数实际是使用Font Awesome图标库以便跨平台兼容通过CDN加载图标库
同一局游戏中所有图标使用相同颜色不同局颜色会变化。
游戏就可以在行数和列数乘积为偶数时才允许开始如果行数和列数的乘积为奇数则不允许游戏开始并且可以通过弹出提示信息来告知用户。
点击开始按钮后立即生成布局并开始计时。
运行界面 下面代码若要在手机上玩可以在 meta charsetUTF-8 之后添加一行 meta nameviewport contentwidthdevice-width, initial-scale1.0 源码如下
!DOCTYPE html
html langzh
headmeta charsetUTF-8title连连看游戏跨平台版/title!-- 引入Font Awesome图标库 --link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.cssstylebody {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;background-color: #f0f0f0;}#controls {margin: 20px 0;text-align: center;}input, button {margin: 0 10px;padding: 5px;}button {background-color: #4CAF50;color: white;border: none;cursor: pointer;transition: background-color 0.3s;}button:hover {background-color: #45a049;}#timebar {height: 30px;width: 600px;background-color: #ddd;margin-bottom: 20px;position: relative;}#timebar-inner {height: 100%;width: 100%;background-color: green;transition: width 1s linear;}#timeleft {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-weight: bold;z-index: 1;}#container {background-color: white;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);display: flex;justify-content: center;align-items: center;}table {border-collapse: collapse;}td {border: 1px solid #ddd;text-align: center;vertical-align: middle;cursor: pointer;transition: background-color 0.3s;width: 40px;height: 40px;font-family: Font Awesome 5 Free;font-weight: 900;}td:hover {background-color: #f5f5f5;}td i {font-size: 24px;}/style
/head
bodydiv idcontrols行数input idsetrow typenumber value9 min2 max20列数input idsetcol typenumber value16 min2 max40图片数input idsetpic typenumber value12 min1 max26时间input idsettime typenumber value120 min10 max1200秒button onclickSetupGame();设置/buttonbutton onclickStartGame(); idstartButton开始/button/divdiv idtimebardiv idtimebar-inner/divdiv idtimeleft/div/divdiv idcontainer/divscript// 图标配置扩展更多图标请访问https://fontawesome.com/iconsconst icons [fa-heart, fa-star, fa-circle, fa-square,fa-check, fa-times, fa-bell, fa-flag,fa-cloud, fa-sun, fa-moon, fa-leaf,fa-gem, fa-car, fa-tree, fa-coffee,fa-bolt, fa-rocket, fa-key, fa-bug,fa-cat, fa-dog, fa-fish, fa-horse];// 图标配置仅定义类型const iconClasses [fa-heart, fa-star, fa-circle, fa-square,fa-check, fa-times, fa-bell, fa-flag,fa-cloud, fa-sun, fa-moon, fa-leaf];let currentColor ; // 全局当前颜色let RowMax 11;let ColMax 18;let PicMax 12;let TimeMax 120;let st;let TmpStr ;let TmpObj null;let TmpTime 0;let TmpInt 0;let gameMatrix;let gameStarted false;let P new Array(4);for(let i0; i4; i) P[i] {x:0, y:0};function SetupGame(){clearInterval(st);// 参数校验const rowVal Math.min(20, Math.max(2, parseInt(document.getElementById(setrow).value)));const colVal Math.min(40, Math.max(2, parseInt(document.getElementById(setcol).value)));RowMax rowVal 2;ColMax colVal 2;// 检查行数与列数的乘积是否为偶数if ((rowVal * colVal) % 2 ! 0) {alert(行数和列数的乘积必须为偶数请调整行数或列数。);return; // 终止函数执行}PicMax Math.min(icons.length, Math.max(1, parseInt(document.getElementById(setpic).value)));TimeMax Math.min(1200, Math.max(10, parseInt(document.getElementById(settime).value)));generateNewGame();document.getElementById(timeleft).innerHTML 点击开始按钮开始游戏;document.getElementById(timebar-inner).style.width 100%;document.getElementById(timebar-inner).style.backgroundColor #4CAF50;document.getElementById(startButton).disabled false;gameStarted false;}function getRandomColor() {return hsl(${Math.random() * 360}, 70%, 60%); // 随机HSL颜色}function generateNewGame() {gameMatrix Array(RowMax).fill().map(() Array(ColMax).fill(0));// 生成全局统一颜色currentColor hsl(${Math.random()*360}, 70%, 60%); // 随机HSL颜色// 生成配对逻辑仅存储图标类型索引const totalCells (RowMax-2)*(ColMax-2);const pairs [];for(let i0; itotalCells/2; i){const type i % PicMax; // 确保成对生成pairs.push(type, type);}// 洗牌算法for(let i pairs.length -1; i 0; i--){const j Math.floor(Math.random() * (i1));[pairs[i], pairs[j]] [pairs[j], pairs[i]];}// 构建表格所有图标使用相同颜色TmpStr table;let pairIndex 0;for(let i0; iRowMax; i){TmpStr tr;for(let j0; jColMax; j){TmpStr td onclickCheckP(this,${i},${j});;if(i 0 || j 0 || i RowMax-1 || j ColMax-1){gameMatrix[i][j] null; // 边界保持为空} else {const type pairs[pairIndex];gameMatrix[i][j] type; // 存储类型索引// 所有图标使用同一颜色TmpStr i classfas ${iconClasses[type]} stylecolor:${currentColor}/i;}TmpStr /td;}TmpStr /tr;}TmpStr /table;document.getElementById(container).innerHTML TmpStr;TmpInt totalCells/2;}// 开始游戏function StartGame(){gameStarted true; // 标记游戏已开始TmpTime TimeMax; // 重置时间document.getElementById(timeleft).innerHTML TmpTime; // 显示剩余时间document.getElementById(timebar-inner).style.width 100%;document.getElementById(timebar-inner).style.backgroundColor green;st setInterval(ShowTime, 1000); // 开始倒计时// 禁用开始按钮document.getElementById(startButton).disabled true;}// X方向连线。有起点无终点function LineX(x, y, xt){for(let ix; i!xt; (xxt? i: i--) ){if(gameMatrix[i][y]){return false;}}return true;}// Y方向连线。有起点无终点function LineY(x, y, yt){for(let iy; i!yt; (yyt? i: i--) ){if(gameMatrix[x][i]){return false;}} return true;}// 2个点被3条线连接function LinkP(P1,P2){// P1在P2下方交换P1、P2if(P1.xP2.x){[P1, P2] [P2, P1];}// P1下方1点x1先横向再纵向是否可连接。因为起点P1不为空所以检测其下方一点if( LineX((P1.x1), P1.y, P2.x) LineY(P2.x, P1.y, P2.y) ) return true;// P1先向上侧连接再检测该点再横向再纵向是否可连接P2。for(let j(P1.y-1); j0; j--){if(gameMatrix[P1.x][j]) break;if( LineX((P1.x1), j, P2.x) LineY(P2.x, j, P2.y) ) return true;}// P1先向下侧连接再检测该点再横向再纵向是否可连接P2。for(let j(P1.y1); jColMax; j){if(gameMatrix[P1.x][j]) break;if( LineX((P1.x1), j, P2.x) LineY(P2.x, j, P2.y) ) return true;}// P1在P2左侧交换P1、P2if(P1.yP2.y){[P1, P2] [P2, P1];}if( LineY(P1.x, (P1.y1), P2.y) LineX(P1.x, P2.y, P2.x) ) return true;for(let j(P1.x-1); j0; j--){if(gameMatrix[j][P1.y]) break;if( LineY(j, (P1.y1), P2.y) LineX(j, P2.y, P2.x) ) return true;}for(let j(P1.x1); jRowMax; j){if(gameMatrix[j][P1.y]) break;if( LineY(j, (P1.y1), P2.y) LineX(j, P2.y, P2.x) ) return true;}return false;}// 单击检测该点仅需比较类型function CheckP(o,x,y){if (!gameStarted) return;if(gameMatrix[x][y] ! null){ if(nullTmpObj){ TmpObj o;TmpObj.style.border 2px solid blue;P[0].x x;P[0].y y;}else if(o!TmpObj){TmpObj.style.border ;P[1].x x;P[1].y y;// 仅比较类型索引if(gameMatrix[P[0].x][P[0].y] gameMatrix[P[1].x][P[1].y]){if(LinkP(P[0],P[1])){gameMatrix[P[0].x][P[0].y] null;gameMatrix[P[1].x][P[1].y] null;TmpObj.innerHTML ;o.innerHTML ;TmpTime;TmpInt--;if(!TmpInt){clearInterval(st);document.getElementById(timeleft).innerHTML ;document.getElementById(timebar-inner).style.backgroundColor white;alert(恭喜完成);document.getElementById(startButton).disabled false;gameStarted false;}}}TmpObj null;}} else {if(TmpObj) TmpObj.style.border ;TmpObj null;}}function ShowTime(){TmpTime--; // 时间减1// 更新时间显示document.getElementById(timeleft).innerHTML TmpTime;let percentage Math.floor(100*TmpTime/TimeMax);document.getElementById(timebar-inner).style.width percentage %;if(percentage 25){document.getElementById(timebar-inner).style.backgroundColor red;}else if(percentage 50){document.getElementById(timebar-inner).style.backgroundColor yellow;}if(!TmpTime){ // 剩余时间为0clearInterval(st); // 清除倒计时document.getElementById(timeleft).innerHTML ;document.getElementById(timebar-inner).style.backgroundColor white;alert(时间到游戏结束);// 启用开始按钮document.getElementById(startButton).disabled false;gameStarted false; // 重置游戏状态}}// 页面加载完成后显示初始提示信息window.onload function() {document.getElementById(timeleft).innerHTML 请设置游戏参数并点击设置按钮;document.getElementById(timebar-inner).style.backgroundColor #ddd;document.getElementById(startButton).disabled true;}/script
/body
/html
