您當前位置：首頁 > web前端 > 特效 > 又一款JavaScript掃雷帶右鍵標注功能

又一款JavaScript掃雷帶右鍵標注功能

來源：程序員人生發布時間：2014-03-21 02:26:37 閱讀次數：6606次

　　前幾天剛剛分享一款網頁掃雷小游戲，有的同學反映說沒有右鍵標注功能，今天在某技術博客閑逛，發現又一牛人開發的JS掃雷，與之不同的，這款掃雷強大了很多（不僅是有了右鍵標注，并且引入了jQuery框架），大家一起來瞧瞧吧。

　　演示效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"/><title>也分享自己做的JS掃雷小游戲</title><script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript">var mineArray, //地雷數組lastNum, //剩余雷數countNum, //未被揭開的方塊數inGame = 0, //游戲狀態，0為結束，1為進行中，2為初始化完畢但未開始startTime; //開始時間//以下操作1表示揭開一個方塊，操作2表示標記一個小旗，操作3表示標記一個問號，操作4表示若某個方塊周圍的地雷全都標記完，則將其周圍剩下的方塊挖開$(function(){$('#main').mouseup(function(e) {var clicked = $(e.target),id = clicked.attr('id'),cX = parseInt(id.substring(1, id.indexOf('-'))), //所點擊方格的X坐標cY = parseInt(id.substring(id.indexOf('-') + 1)); //所點擊方格的Y坐標if(inGame == 1) {if(e.which == 1) {if(clicked.hasClass('hidden') && !clicked.hasClass('flag')) {openBlock(cX,cY); //左鍵點擊未揭開且未插旗方塊即執行操作1} else if(!clicked.hasClass('hidden')) {openNearBlock(cX,cY); //由于同時點擊左右鍵實現起來比較麻煩，所以改成用點擊左鍵實現操作4}} else if(e.which == 3 && clicked.hasClass('hidden')) { //右鍵點擊操作2，如果允許使用問號標記，則可執行操作3if(clicked.hasClass('flag')) {clicked.removeClass('flag');if($('#check').attr('checked')) clicked.addClass('check');lastNum ++;countNum ++;} else if(clicked.hasClass('check')) {clicked.removeClass('check');} else {clicked.addClass('flag');lastNum --;countNum --;}$('#lastnum').text(lastNum);}if(lastNum == countNum) endGame(1); //因為最后剩下的方塊均為雷時應直接結束游戲，因此設置為剩余雷數和未被揭開的方塊數相等的時候結束游戲} else if(inGame == 2) {if(e.which == 1) { //初始化完畢后只允許點擊左鍵開始游戲openBlock(cX,cY);inGame = 1;var now = new Date();startTime = now.getTime();timer();}}});$('#main').bind('contextmenu', function(){ return false; }); //阻止默認右擊事件});//初始化function init(x, y, mine) {countNum = x * y;inGame = 2;lastNum = mine;mineArray = new Array(y + 2);$.each(mineArray, function(key) {mineArray[key] = new Array(x + 2);});for(var i = 1; i <= y; i ++) {for(var j = 1; j <= x; j ++) {mineArray[i][j] = 0;}}while(mine > 0) { //隨機布雷，-1為有雷var i = Math.ceil(Math.random() * y);var j = Math.ceil(Math.random() * x);if(mineArray[i][j] != -1) {mineArray[i][j] = -1;mine --;}}for(var i = 1; i <= y; i ++) { //遍歷地雷數組，統計每個格子四周地雷的數量for(var j = 1; j <= x; j ++) {if(mineArray[i][j] != -1) {if(i > 1 && j > 1 && mineArray[i - 1][j - 1] == -1) mineArray[i][j] ++;if(i > 1 && mineArray[i - 1][j] == -1) mineArray[i][j] ++;if(i > 1 && j < x && mineArray[i - 1][j + 1] == -1) mineArray[i][j] ++;if(j < x && mineArray[i][j + 1] == -1) mineArray[i][j] ++;if(i < y && j < x && mineArray[i + 1][j + 1] == -1) mineArray[i][j] ++;if(i < y && mineArray[i + 1][j] == -1) mineArray[i][j] ++;if(i < y && j > 1 && mineArray[i + 1][j - 1] == -1) mineArray[i][j] ++;if(j > 1 && mineArray[i][j - 1] == -1) mineArray[i][j] ++;}}}var block = '';for(var i = 1, row = mineArray.length - 1; i < row; i ++) {for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {block += '<div id="b' + i + '-' + j + '" style="left:' + (j - 1) * 20 + 'px;top:' + (i - 1) * 20 + 'px;" class="hidden"></div>';}}$('#main').html(block).width(x * 20 + 1).height(y * 20 + 1).show(); //繪圖$('#warning').html('');$('#submenu').show();$('#lastnum').text(lastNum);}//揭開方塊function openBlock(x, y) {var current = $('#b' + x + '-' + y);if(mineArray[x][y] == -1) {if(inGame == 1) { //觸雷時如游戲進行中，則失敗結束游戲current.addClass('cbomb');endGame();} else if(inGame == 2) { //如游戲初始化后還未開始，則重新初始化地雷陣，再揭開此方塊，以保證第一次點擊不觸雷init(mineArray[0].length - 2, mineArray.length - 2, lastNum);openBlock(x, y);} else { //游戲結束時需揭開全部方塊，標記地雷位置if(!current.hasClass('flag')) current.addClass('bomb');}} else if(mineArray[x][y] > 0) {if(current.hasClass('flag')) { //若在無雷的方塊上標記了小旗，如果周圍的廣場執行操作4時波及到此方塊，則觸發失敗結束游戲current.addClass('wrong');if(inGame) endGame();} else {current.html(mineArray[x][y]).addClass('num' + mineArray[x][y]).removeClass('hidden'); //顯示周邊的地雷數量if(current.hasClass('check')) current.removeClass('check');if(inGame) countNum --;}} else {if(current.hasClass('flag')) { //同上current.addClass('wrong');if(inGame) endGame();} else {current.removeClass('hidden');if(current.hasClass('check')) current.removeClass('check');if(inGame) { //點擊到周邊無雷的方塊時，自動揭開周圍方塊countNum --;var row = mineArray.length - 2, col = mineArray[0].length - 2;if(x > 1 && y > 1 && $('#b' + (x - 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x - 1, y - 1);if(x > 1 && $('#b' + (x - 1) + '-' + y).hasClass('hidden')) openBlock(x - 1, y);if(x > 1 && y < col && $('#b' + (x - 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x - 1, y + 1);if(y < col && $('#b' + x + '-' + (y + 1)).hasClass('hidden')) openBlock(x, y + 1);if(x < row && y < col && $('#b' + (x + 1) + '-' + (y + 1)).hasClass('hidden')) openBlock(x + 1, y + 1);if(x < row && $('#b' + (x + 1) + '-' + y).hasClass('hidden')) openBlock(x + 1, y);if(x < row && y > 1 && $('#b' + (x + 1) + '-' + (y - 1)).hasClass('hidden')) openBlock(x + 1, y - 1);if(y > 1 && $('#b' + x + '-' + (y - 1)).hasClass('hidden')) openBlock(x, y - 1);}}}}//揭開格子鄰近確認無雷的方塊function openNearBlock(x, y) {var flagNum = 0, hiddenNum = 0;for(i = x - 1; i < x + 2; i ++) {for(j = y - 1; j < y + 2; j ++) {if(mineArray[i][j] != undefined) {if($('#b' + i + '-' + j).hasClass('flag')) flagNum ++; //統計方塊周圍的旗幟數和未揭開的方塊數if($('#b' + i + '-' + j).hasClass('hidden')) hiddenNum ++;}}}if(flagNum == mineArray[x][y] && hiddenNum > flagNum) { //旗幟數和雷數相等且有未揭開方塊且未插旗的方塊時，則揭開它for(i = x - 1; i < x + 2; i ++) {for(j = y - 1; j < y + 2; j ++) {if(mineArray[i][j] >= 0 && $('#b' + i + '-' + j).hasClass('hidden')) openBlock(i, j);}}}}//計時function timer(){if(inGame == 1) { //只在游戲進行中計時var now = new Date(),ms = now.getTime();$('#time').text(Math.ceil((ms - startTime) / 1000));if(inGame == 1) setTimeout(function() { timer(); }, 500);} else if(inGame == 2) {$('#time').text('0');}}//結束游戲function endGame(isWin) {inGame = 0;for(var i = 1, row = mineArray.length - 1; i < row; i ++) {for(var j = 1, col = mineArray[0].length - 1; j < col; j ++) {if(isWin) {if($('#b' + i + '-' + j).hasClass('hidden') && !$('#b' + i + '-' + j).hasClass('flag')) $('#b' + i + '-' + j).addClass('flag');lastNum = 0;$('#lastnum').text(lastNum);} else {openBlock(i, j);}}}$('#warning').text(isWin ? 'You Win!' : 'You Lose!');}</script><style>body{background:#fff;font-size:14px;}#submenu{display:none;}#warning{color:#ff0000;}#main{background:#ddd;border:1px solid #888;display:none;position:relative;}#main div{border:1px solid #888;font-weight:bold;height:19px;height:21px9;line-height:18px;cursor:default;position:absolute;text-align:center;width:19px;width:21px9;}.hidden{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) 0 0;}.flag{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) -19px 0;}.check{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) -38px 0;}.bomb{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) -57px 0;}.cbomb{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) -57px 0 #ff0000;}.wrong{background:url(/uploads/allimg/1209/mine_wfuyu.com.gif) -76px 0;}.num1{color:#0000ff;}.num2{color:#008000;}.num3{color:#ff0000;}.num4{color:#000080;}.num5{color:#800000;}.num6{color:#008080;}.num7{color:#000000;}.num8{color:#808080;}</style><div id="menu"><a href="javascript:;" onclick="init(10,10,10);">初級</a><a href="javascript:;" onclick="init(16,16,40);">中級</a><a href="javascript:;" onclick="init(30,16,99);">高級</a><input type="checkbox" id="check" /><label for="check">是否使用標記(?)</label></div><div id="submenu">剩余雷數：<span id="lastnum"></span>時間：<span id="time"></span>秒<span id="warning"></span></div><div id="main"></div><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 站長要專注做長遠的事情理性看待網絡炒作

下一篇 積累成功經驗運營網站要有目標和方向

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

又一款JavaScript掃雷 帶右鍵標注功能

又一款JavaScript掃雷帶右鍵標注功能