這兩天在惡補前端的相關知識，看到JQuery的動畫部分時，突然心血來潮想做一個掃雷的網頁版，于是花了差不多一天的時間完成了一個初始版本，權當對這幾天學習成果的一個回顧，若某處功能有更好實現方式歡迎留言一起討論。

========== 原創作品，未經本人允許，請勿轉載，謝謝！ ==========

==========? ? 作者：Yokeqi? ? 出處：博客園? ? 原文鏈接? ?==========

先看看最后實現的效果：如何內嵌一個頁面？

?一、知識點介紹

1. Html + CSS + JQuery庫

• 要創建界面UI，所以需要用到各類Html標簽還有CSS的布局美化。
• 要實現各類邏輯功能，所以需要用到JQuery的選擇器、事件等知識。

2. 掃雷游戲的玩法

• 翻開某個格子，如果是雷，那么就會Boom，游戲結束。
• 如果是空白，則代表以這個格子為中心的九宮格范圍內沒有雷。
• 如果是數字，則根據數字代表這個格子為中心的九宮格范圍內存在多少顆雷。
• 正確標記出所有的雷，并翻開多余的格子，則游戲勝利。

二、關鍵代碼說明

1. 創建數據地圖，接下來只需要根據數據地圖創建對應UI就可以了。

function createMap() {//初始化為0for (var i = 0; i < num; i++) {map[i] = new Array();mark[i] = new Array();for (var j = 0; j < num; j++) {map[i][j] = 0;mark[i][j] = 0;}}var count = 0;// 生成雷while (count < boomNum) {var row = Math.floor(Math.random() * (num - 1));var col = Math.floor(Math.random() * (num - 1));if (isMine(row, col)) {// 這個位置已經有雷,重新生成位置continue;}count++;map[row][col] = 100;// 周圍的雷數標記+1searchAround(row, col, function (posX, posY) {map[posX][posY]++;});//for (var i = 0; i < at.length; i++) {// var posX = row + at[i][0];// var posY = col + at[i][1];// // 不要超出地圖范圍// if (posX < 0 || posY < 0 || posX > map.length || posY > map[0].length)// continue;// map[posX][posY]++;//} } } View Code

2. 創建界面UI

function createUI() {// 生成界面for (var i = 0; i < num; i++) {for (var j = 0; j < num; j++) {var l = offsetX + i * boxSize;var t = offsetY + j * boxSize;// 創建容器Boxvar box = $("<div></div>").addClass("box").css({ "left": l + "px", "top": t + "px" }).attr({ "row": i, "col": j });// 創建遮罩層var cover = $("<div></div>").addClass("cover").width(boxSize - 1).height(boxSize - 1);// 遮罩層，這樣就直接看不到底下是不是雷// 創建實際內容var content = $("<div></div>").addClass("content").width(boxSize - 1).height(boxSize - 1).hide();// 內容，可能是空白，可能是個提示數字，也可能就是個雷if (map[i][j] >= 100) {// 如果是雷，則把格子數據替換成一張Gif圖。var boom = $("<img></img>").attr("src", "./imgs/boom.gif").width(40).height(40);content.css("margin", "0px").html(boom);} else if (map[i][j] > 0) {content.text(map[i][j]);}box.append(cover).append(content);$("#panel").append(box);}}; } View Code

3. 注冊幾個核心事件

function registerEvents() {$(".box").hover(function () {var row = $(this).attr("row");var col = $(this).attr("col");if (mark[row][col] == 0)$(this).children(".cover").css("backgroundColor", "lightgray");});$(".box").mouseleave(function () {var row = $(this).attr("row");var col = $(this).attr("col");if (mark[row][col] == 0)$(this).children(".cover").css("backgroundColor", "black");});$(".box").dblclick(function () {// 挖格子，看運氣是不是雷sweeper($(this));});$(".box").click(function () {var row = $(this).attr("row");var col = $(this).attr("col");mark[row][col] = mark[row][col] == 1 ? 0 : 1; // 旗子標記var color = mark[row][col] == 1 ? "red" : "black";$(this).children(".cover").css("backgroundColor", color);valid(); // 驗證是否成功通關。 }); } View Code

4. 挖格子功能

function isMine(row, col) {return map[row][col] >= 100; }function sweeper(box) {var row = box.attr("row");var col = box.attr("col");if (isMine(row, col)) {$(".cover").fadeOut("slow").siblings(".content").fadeIn("slow");box.delay(1).queue(function () {$("#msg").text("Boom!!!游戲結束.").show("slow");});return;}// 如果遇到空白，則自動挖開以此為中心的九宮格，并且遞歸搜索。 autoSweeper(row, col);valid(); } View Code

5. 增加了一個簡單的深搜，挖到空白格子則自動挖出以此為中心的九宮格，并且遇到同樣空白格子會繼續挖。

function autoSweeper(row, col) {var cover = $(".box[row=" + row + "][col=" + col + "]").children(".cover");if (cover.is(":hidden"))return;cover.hide("fast").siblings(".content").show("fast", function () {if (map[row][col] != 0)return;// 如果挖到空白格子，則自動挖四周 searchAround(row, col, autoSweeper);}); }function searchAround(row, col, action) {for (var i = 0; i < at.length; i++) {var posX = parseInt(row) + at[i][0];var posY = parseInt(col) + at[i][1];// 不要超出地圖范圍if (posX < 0 || posY < 0 || posX >= map.length || posY >= map[0].length)continue;action(posX, posY);} } View Code

6. 簡單驗證下是否達成通關條件

function valid() {var count = boomNum;for (var i = 0; i < num; i++) {for (var j = 0; j < num; j++) {if (mark[i][j] == 1 && map[i][j] >= 100) {count--;}}}if (count == 0) {$(".cover").fadeOut("fast").siblings(".content").fadeIn("fast");$(".cover").delay(1).queue(function () {$("#msg").text("恭喜你！成功過關.").show("slow");});} } View Code

三、參考資料

• Html教程
• CSS教程
• JQuery教程

轉載于:https://www.cnblogs.com/yokeqi/p/11025879.html

總結

以上是生活随笔為你收集整理的扫雷小游戏-纯网页版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。