HTML5掃雷在前端開發中是一個非常有挑戰性的項目,因為它需要處理的不僅是布局和樣式,還涉及到邏輯和算法。以下是HTML5掃雷的代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5掃雷</title> <style> /* 樣式 */ </style> </head> <body> <table> <tbody> <!-- 格子 --> </tbody> </table> <script> // 數據 // 1表示地雷,0表示空格 var data = [ [0, 0, 0, 1, 0, 0, 0, 1], [0, 0, 0, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 1, 1, 1], [0, 0, 0, 0, 0, 0, 0, 0], [1, 1, 1, 1, 0, 0, 0, 0], [1, 1, 1, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0] ]; // 循環格子 var tds = document.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { tds[i].onclick = function() { // 獲取坐標 var x = parseInt(this.getAttribute("data-x")); var y = parseInt(this.getAttribute("data-y")); // 如果是地雷,結束游戲 if (data[x][y] === 1) { alert("游戲結束!"); location.reload(); return; } // 統計周圍地雷個數 var count = 0; for (var j = -1; j <= 1; j++) { for (var k = -1; k <= 1; k++) { if (x + j >= 0 && x + j < data.length && y + k >= 0 && y + k < data[0].length) { if (data[x + j][y + k] === 1) { count++; } } } } // 標記數字 this.innerHTML = count; } } </script> </body> </html>
以上代碼包含了HTML5掃雷的關鍵點:能夠根據數據自動生成格子、點擊格子判斷是不是地雷、統計周圍地雷個數以及標記數字。這是一個簡單版的HTML5掃雷,開發者可以根據自己的需要和能力進行改進。
上一篇mysql5注冊碼