HTML5+JavaScript實現連連看游戲之二

HTML5+JavaScript實現連連看游戲之二

以前一篇，見 https://blog.csdn.net/cnds123/article/details/144220548

連連看游戲連接規則：

只能連接相同圖案（或圖標、字符）的方塊。

連線路徑必須是由直線段組成的，最多可以有兩個拐角。

連線路徑必須是空的，不能穿過其他方塊。

當兩個相同圖案的方塊被有效連接時，它們會從游戲板上消失。當所有方塊都被消除時，玩家獲勝。

現在再發布一個，可以自定義 行列數、可用圖片數（實際是使用Font Awesome圖標庫以便跨平臺兼容，通過CDN加載圖標庫）

同一局游戲中所有圖標使用相同顏色，不同局顏色會變化。

游戲就可以在行數和列數乘積為偶數時才允許開始，如果行數和列數的乘積為奇數，則不允許游戲開始，并且可以通過彈出提示信息來告知用戶。

點擊"開始"按鈕后立即生成布局并開始計時。

運行界面

下面代碼若要在手機上玩，可以在? <meta charset="UTF-8"> 之后添加一行

??? <meta name="viewport" content="width=device-width, initial-scale=1.0">

源碼如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>連連看游戲（跨平臺版）</title><!-- 引入Font Awesome圖標庫 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"><style>body {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>
<body><div id="controls">行數<input id="setrow" type="number" value="9" min="2" max="20">列數<input id="setcol" type="number" value="16" min="2" max="40">圖片數<input id="setpic" type="number" value="12" min="1" max="26">時間<input id="settime" type="number" value="120" min="10" max="1200">秒<button onclick="SetupGame();">設置</button><button onclick="StartGame();" id="startButton">開始</button></div><div id="timebar"><div id="timebar-inner"></div><div id="timeleft"></div></div><div id="container"></div><script>// 圖標配置（擴展更多圖標請訪問：https://fontawesome.com/icons）const 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 i=0; i<4; 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 i=0; i<totalCells/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() * (i+1));[pairs[i], pairs[j]] = [pairs[j], pairs[i]];}// 構建表格（所有圖標使用相同顏色）TmpStr = "<table>";let pairIndex = 0;for(let i=0; i<RowMax; i++){TmpStr += "<tr>";for(let j=0; j<ColMax; j++){TmpStr += `<td onclick="CheckP(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 class="fas ${iconClasses[type]}" style="color:${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 i=x; i!=xt; (x<xt? i++: i--) ){if(gameMatrix[i][y]){return false;}}return true;}// Y方向連線。（有起點，無終點）function LineY(x, y, yt){for(let i=y; i!=yt; (y<yt? i++: i--) ){if(gameMatrix[x][i]){return false;}}    return true;}// 2個點被3條線連接function LinkP(P1,P2){// P1在P2下方，交換P1、P2if(P1.x>P2.x){[P1, P2] = [P2, P1];}// P1下方1點（x+1）先橫向再縱向是否可連接。（因為起點P1不為空，所以檢測其下方一點）if( LineX((P1.x+1), P1.y, P2.x) && LineY(P2.x, P1.y, P2.y) ) return true;// P1先向上側連接，再檢測該點再橫向再縱向是否可連接P2。for(let j=(P1.y-1); j>=0; j--){if(gameMatrix[P1.x][j]) break;if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;}// P1先向下側連接，再檢測該點再橫向再縱向是否可連接P2。for(let j=(P1.y+1); j<ColMax; j++){if(gameMatrix[P1.x][j]) break;if( LineX((P1.x+1), j, P2.x) && LineY(P2.x, j, P2.y) ) return true;}// P1在P2左側，交換P1、P2if(P1.y>P2.y){[P1, P2] = [P2, P1];}if( LineY(P1.x, (P1.y+1), P2.y) && LineX(P1.x, P2.y, P2.x) ) return true;for(let j=(P1.x-1); j>=0; j--){if(gameMatrix[j][P1.y]) break;if( LineY(j, (P1.y+1), P2.y) && LineX(j, P2.y, P2.x) ) return true;}for(let j=(P1.x+1); j<RowMax; j++){if(gameMatrix[j][P1.y]) break;if( LineY(j, (P1.y+1), 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(null==TmpObj){ 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>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/903837.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/903837.shtml
英文地址，請注明出處：http://en.pswp.cn/news/903837.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

《深入淺出Git：從版本控制原理到高效協作實戰》?

《深入淺出Git：從版本控制原理到高效協作實戰》?

Git的原理和使用 1、Git初識與安裝2、Git基本操作2.1、創建Git本地倉庫2.2、配置Git2.3、認識工作區、暫存區、版本庫2.4、修改文件2.5、版本回退2.6、撤銷修改2.7、刪除文件 3、Git分支管理3.1、理解分支3.2、創建、切換、合并分支3.3、刪除分支3.4、合并沖突3.5、合并模式3.6…
閱讀更多...
數據分析_問題/優化

數據分析_問題/優化

1 報表開發 1.1 數據問題 (1) 數據易錯 問題描述 ①數據整合困難:數據來源多樣、格式差異大,整合時處理不當易丟錯數據. ②計算邏輯復雜:開發人員對復雜計算邏輯的理解產生偏差,會導致計算結果不準. 解決方案 ①建立數據標準,統一修正字段命名、數據類型、日期格式等 ②加強…
閱讀更多...
“深入剖析ThreadLocal原理：從多線程數據隔離到內存泄漏防范“

“深入剖析ThreadLocal原理：從多線程數據隔離到內存泄漏防范“

1.在沒有ThreadLocal遇到的問題&#xff1a; 在多線程編程領域&#xff0c;多個線程同時訪問同一個變量時&#xff0c;數據一致性成為關鍵挑戰。為防止修改數據時出現覆蓋問題&#xff0c;傳統解決方案是采用加鎖機制&#xff0c;讓線程排隊依次訪問共享變量。然而&#xff0c…
閱讀更多...
讀懂 Vue3 路由：從入門到實戰

讀懂 Vue3 路由：從入門到實戰

在構建現代化單頁應用&#xff08;SPA&#xff09;時&#xff0c;Vue3 憑借其簡潔高效的特性成為眾多開發者的首選。 而 Vue3 路由&#xff08;Vue Router&#xff09;則是 Vue3 生態中不可或缺的一部分&#xff0c;它就像是單頁應用的 “導航地圖”&#xff0c;幫助用戶在不同…
閱讀更多...
Mac M1安裝 Docker Desktop 后啟動沒反應

Mac M1安裝 Docker Desktop 后啟動沒反應

Mac M1安裝 Docker Desktop 后啟動沒反應 如果在 Mac M1 上安裝 Docker&#xff0c;那最好的選擇是安裝 Docker Desktop但是今天重新安裝 Docker Desktop 后&#xff0c;發現點擊圖標啟動怎么也沒反應&#xff0c;經過排查后發現換個版本安裝就好了&#xff0c;可能是最新的版…
閱讀更多...
快速上手c語言

快速上手c語言

快速上手c語言 快速上手c語言關于學c語言的一些信息雜談第一個C語言程序通過命令行運行c程序Dev-c5.11Visual Studio系列產品 數據類型變量、常量定義變量的方法變量的命名變量的分類變量的使用變量的作用域和生命周期常量 操作符簡單介紹語句選擇語句循環語句 數組數組定義數組…
閱讀更多...
Nginx核心功能及正則表達

Nginx核心功能及正則表達

目錄 一&#xff1a;正向代理 1&#xff1a;編譯安裝nginx &#xff08;1&#xff09;安裝支持軟件 &#xff08;2&#xff09;創建運行用戶、組和日志目錄 &#xff08;3&#xff09;編譯安裝nginx &#xff08;4&#xff09;添加nginx系統服務 2&#xff1a;配置正向代…
閱讀更多...
npm命令介紹（Node Package Manager）（Node包管理器）

npm命令介紹（Node Package Manager）（Node包管理器）

文章目錄 npm命令全解析簡介基礎命令安裝npm&#xff08;npm -v檢插版本&#xff09;初始化項目&#xff08;npm init&#xff09;安裝依賴包&#xff08;npm install xxx、npm i xxx&#xff09;卸載依賴包&#xff08;npm uninstall xxx 或 npm uni xxx、npm remove xxx&…
閱讀更多...
【Linux】Linux基礎概念

【Linux】Linux基礎概念

一些比較重要的使用Linux的前情提要。 部分經驗來源于網絡&#xff0c;若有侵權請聯系我刪除&#xff0c;主要是做筆記的時候忘記寫來源了&#xff0c;做完筆記很久才寫博客。 專欄目錄&#xff1a;記錄自己的嵌入式學習之路-CSDN博客 目錄 1 Shell命令參數 2 系統變量…
閱讀更多...
阿里開源Qwen3：大語言模型的新突破

阿里開源Qwen3：大語言模型的新突破

一、模型概覽&#xff1a;豐富的模型家族 Qwen3 系列包含了 2 款混合專家&#xff08;MoE&#xff09;模型與 6 款密集&#xff08;Dense&#xff09;模型&#xff0c;參數量覆蓋范圍極廣&#xff0c;從 0.6B 一直延伸至 235B 。其中&#xff0c;旗艦模型 Qwen3 - 235B - A22B…
閱讀更多...
數字智慧方案5856丨智慧環保綜合解決方案（50頁PPT）（文末有下載方式）

數字智慧方案5856丨智慧環保綜合解決方案（50頁PPT）（文末有下載方式）

資料解讀&#xff1a;智慧環保綜合解決方案 詳細資料請看本解讀文章的最后內容。 隨著城市化進程的加速和環境問題的日益嚴峻&#xff0c;智慧環保成為提升城市環境管理水平的重要手段。本文將對智慧環保綜合解決方案進行詳細解讀&#xff0c;探討其在實際應用中的需求、解決…
閱讀更多...
基于ssm的網盤管理系統(全套)

基于ssm的網盤管理系統(全套)

一、系統架構 前端&#xff1a;vue | element-ui 后端&#xff1a;spring | springmvc | mybatis 環境&#xff1a;jdk1.8 | mysql | maven | tomcat | nodejs 二、代碼及數據庫 三、功能介紹 01. 注冊 02. 登錄 03. 管理員-首頁 04. 管理員-個人中心 …
閱讀更多...
PostgreSQL 的 VACUUM 與 VACUUM FULL 詳解

PostgreSQL 的 VACUUM 與 VACUUM FULL 詳解

PostgreSQL 的 VACUUM 與 VACUUM FULL 詳解 一、基本概念對比 特性VACUUMVACUUM FULL定義常規維護操作&#xff0c;清理死元組激進重組操作&#xff0c;完全重寫表數據鎖級別不阻塞讀寫(共享鎖)排他鎖(阻塞所有操作)空間回收只標記空間為可用&#xff0c;不返還OS空間返還操作…
閱讀更多...
復刻低成本機械臂 SO-ARM100 舵機配置篇（WSL）

復刻低成本機械臂 SO-ARM100 舵機配置篇（WSL）

視頻講解&#xff1a; 復刻低成本機械臂 SO-ARM100 舵機配置篇&#xff08;WSL&#xff09; 飛特舵機 組裝之前需要配置舵機的ID&#xff0c;如下的網址為舵機的資料&#xff0c;實際上用不到&#xff0c;但可以mark在這里 Software-深圳飛特模型有限公司 User Guide里面可以…
閱讀更多...
Tailwind CSS實戰技巧：從核心類到高效開發

Tailwind CSS實戰技巧：從核心類到高效開發

使用 Kooboo平臺 訓練實戰技巧&#xff0c;無需配置安裝&#xff0c;直接引入CDN就可以在線練習了&#xff01;具體操作流程&#xff1a;進入Kooboo后&#xff0c;選擇創建空白站點 -> 站點開發 -> 控制面板 -> 頁面 ->新建普通頁面 -> 編寫代碼 一、核心布局類…
閱讀更多...
【LINUX操作系統】線程操作

【LINUX操作系統】線程操作

了解了線程的基本原理之后&#xff0c;我們來學習線程在C語言官方庫中的寫法與用法。 1. 常見pthread接口及其背后邏輯 1.1 pthread_create 與線程有關的函數構成了?個完整的系列&#xff0c;絕?多數函數的名字都是以“pthread_”打頭的 ? 要使?這些函數庫&#xff0c;…
閱讀更多...
【AI面試準備】Azure DevOps沙箱實驗全流程詳解

【AI面試準備】Azure DevOps沙箱實驗全流程詳解

介紹動手實驗&#xff1a;通過 Azure DevOps 沙箱環境實操&#xff0c;體驗從代碼提交到測試篩選的全流程。如何快速掌握&#xff0c;以及在實際工作中如何運用。 通過 Azure DevOps 沙箱環境進行動手實驗&#xff0c;是快速掌握 DevOps 全流程&#xff08;從代碼提交到測試篩選…
閱讀更多...
VulnHub-DC-2靶機

VulnHub-DC-2靶機

主機發現 sudo arp-scan -l 以sudo管理員權限掃描本地活動ip地址 Interface: eth0, type: EN10MB, MAC: 08:00:27:22:46:4f, IPv4: 192.168.252.230 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.252.6 4c:5f:70:74:3c:3b …
閱讀更多...
藏語英語中文機器翻譯入門實踐

藏語英語中文機器翻譯入門實踐

&#x1f3af; 項目目標&#xff1a; 輸入藏文句子&#xff0c;自動翻譯成英文和中文&#xff08;或輸入中文&#xff0c;翻譯為英文和藏文&#xff09;。 &#x1f50d; 技術與原理簡介 機器翻譯&#xff08;Machine Translation, MT&#xff09;是人工智能中自然語言處理&a…
閱讀更多...
【阿里云大模型高級工程師ACP習題集】2.9 大模型應用生產實踐(上篇)

【阿里云大模型高級工程師ACP習題集】2.9 大模型應用生產實踐(上篇)

練習題 【單選題】在自然語言處理的法務咨詢場景中，以下哪種模型選擇最為合適？ A. 通用大語言模型 B. 經過數學領域微調的模型 C. 面向法律領域訓練的模型 D. 視覺模型 【多選題】以下哪些屬于模型非功能性需求？（ ） A. 模型對不同語言的支持能力 B. 模型的響應速度要求 C.…
閱讀更多...
最新文章

Copyright @ 2022~2023