100行代码实现的JS扫雷小游戏

使用简单的三段100行代码来实现以前好玩的扫雷小游戏。效果图如下：

有基础会网页的应该都知道咋操作，可以忽略说明了。

小白说明：本地新建一个空白.txt文件，将下面完整代码全部复制到里面保存，然后更改后缀名为.html网页格式的文件，然后双击打开即可实现扫雷小游戏。

完整代码：


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style type="text/css">
    body {
        background: black;
        color: #DDDDDD;
        font-family: courier new;
        text-align: center;
        margin: 0;
    }
    H1 {
        text-align: center;
        font-size: 14pt;
        font-weight: normal;
    }
    #grid {
        margin-left: auto;
        margin-right: auto;
    }
    #grid TR TD {
        border: 1px solid white;
        background: #999999;
        width: 16px;
        height: 16px;
        text-align: center;
    }
    #grid TR TD.clicked {
        background: #333333;
    }
    #grid TR TD.mine {
        background: #FF0000;
    }
    BUTTON {
        margin: 12px;
    }
  </style>
</head>
<body>
  <H1>扫雷（Minesweeper）</H1>
  <table id=grid>
  </table>
  <BUTTON onclick="generateGrid();">重置（Reset）</BUTTON>
  
  <script type="text/javascript">
    var grid = document.getElementById("grid");
    var testMode = false; //Turn this variable to true to see where the mines are
    var gameLevel = 1;
    var colNumber = 10;
    var rowNumber = 10;
    generateGrid();
    
    function generateGrid() {
        //generate row*col grid
        grid.innerHTML = "";
        for (var i = 0; i < rowNumber; i++) {
            row = grid.insertRow(i);
            for (var j = 0; j < colNumber; j++) {
                cell = row.insertCell(j);
                cell.onclick = function() {
                    clickCell(this);
                };
                var mine = document.createAttribute("data-mine");
                mine.value = "false";
                cell.setAttributeNode(mine);
            }
        }
        addMines();
    }
    
    function addMines() {
        //Add mines randomly
        for (var i = 0; i < gameLevel * 10; i++) {
            var row = Math.floor(Math.random() * rowNumber);
            var col = Math.floor(Math.random() * colNumber);
            var cell = grid.rows[row].cells[col];
            cell.setAttribute("data-mine", "true");
            if (testMode) cell.innerHTML = "X";
        }
    }
    
    function revealMines() {
        //Highlight all mines in red
        for (var i = 0; i < rowNumber; i++) {
            for (var j = 0; j < colNumber; j++) {
                var cell = grid.rows[i].cells[j];
                if (cell.getAttribute("data-mine") == "true") cell.className = "mine";
            }
        }
    }
    
    function checkLevelCompletion() {
        var levelComplete = true;
        for (var i = 0; i < rowNumber; i++) {
            for (var j = 0; j < colNumber; j++) {
                if ((grid.rows[i].cells[j].getAttribute("data-mine") == "false") && (grid.rows[i].cells[j].innerHTML == "")) levelComplete = false;
            }
        }
        if (levelComplete) {
            alert("You Win!");
            revealMines();
    
            // you can add level up codes here after...      
        }
    }
    
    function clickCell(cell) {
        //Check if the end-user clicked on a mine
        if (cell.getAttribute("data-mine") == "true") {
            revealMines();
            alert("Game Over");
        } else {
            cell.className = "clicked";
            //Count and display the number of adjacent mines
            var mineCount = 0;
            var cellRow = cell.parentNode.rowIndex;
            var cellCol = cell.cellIndex;
            //alert(cellRow + " " + cellCol);
            for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
                for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
                    if (grid.rows[i].cells[j].getAttribute("data-mine") == "true") mineCount++;
                }
            }
            cell.innerHTML = mineCount;
            if (mineCount == 0) {
                //Reveal all adjacent cells as they do not have a mine
                for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
                    for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
                        //Recursive Call
                        if (grid.rows[i].cells[j].innerHTML == "") clickCell(grid.rows[i].cells[j]);
                    }
                }
            }
            checkLevelCompletion();
        }
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style type="text/css">
    body {
        background: black;
        color: #DDDDDD;
        font-family: courier new;
        text-align: center;
        margin: 0;
    }
    H1 {
        text-align: center;
        font-size: 14pt;
        font-weight: normal;
    }
    #grid {
        margin-left: auto;
        margin-right: auto;
    }
    #grid TR TD {
        border: 1px solid white;
        background: #999999;
        width: 16px;
        height: 16px;
        text-align: center;
    }
    #grid TR TD.clicked {
        background: #333333;
    }
    #grid TR TD.mine {
        background: #FF0000;
    }
    BUTTON {
        margin: 12px;
    }
  </style>
</head>
<body>
  <H1>扫雷（Minesweeper）</H1>
  <table id=grid>
  </table>
  <BUTTON onclick="generateGrid();">重置（Reset）</BUTTON>
  
  <script type="text/javascript">
    var grid = document.getElementById("grid");
    var testMode = false; //Turn this variable to true to see where the mines are
    var gameLevel = 1;
    var colNumber = 10;
    var rowNumber = 10;
    generateGrid();
    
    function generateGrid() {
        //generate row*col grid
        grid.innerHTML = "";
        for (var i = 0; i < rowNumber; i++) {
            row = grid.insertRow(i);
            for (var j = 0; j < colNumber; j++) {
                cell = row.insertCell(j);
                cell.onclick = function() {
                    clickCell(this);
                };
                var mine = document.createAttribute("data-mine");
                mine.value = "false";
                cell.setAttributeNode(mine);
            }
        }
        addMines();
    }
    
    function addMines() {
        //Add mines randomly
        for (var i = 0; i < gameLevel * 10; i++) {
            var row = Math.floor(Math.random() * rowNumber);
            var col = Math.floor(Math.random() * colNumber);
            var cell = grid.rows[row].cells[col];
            cell.setAttribute("data-mine", "true");
            if (testMode) cell.innerHTML = "X";
        }
    }
    
    function revealMines() {
        //Highlight all mines in red
        for (var i = 0; i < rowNumber; i++) {
            for (var j = 0; j < colNumber; j++) {
                var cell = grid.rows[i].cells[j];
                if (cell.getAttribute("data-mine") == "true") cell.className = "mine";
            }
        }
    }
    
    function checkLevelCompletion() {
        var levelComplete = true;
        for (var i = 0; i < rowNumber; i++) {
            for (var j = 0; j < colNumber; j++) {
                if ((grid.rows[i].cells[j].getAttribute("data-mine") == "false") && (grid.rows[i].cells[j].innerHTML == "")) levelComplete = false;
            }
        }
        if (levelComplete) {
            alert("You Win!");
            revealMines();
    
            // you can add level up codes here after...      
        }
    }
    
    function clickCell(cell) {
        //Check if the end-user clicked on a mine
        if (cell.getAttribute("data-mine") == "true") {
            revealMines();
            alert("Game Over");
        } else {
            cell.className = "clicked";
            //Count and display the number of adjacent mines
            var mineCount = 0;
            var cellRow = cell.parentNode.rowIndex;
            var cellCol = cell.cellIndex;
            //alert(cellRow + " " + cellCol);
            for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
                for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
                    if (grid.rows[i].cells[j].getAttribute("data-mine") == "true") mineCount++;
                }
            }
            cell.innerHTML = mineCount;
            if (mineCount == 0) {
                //Reveal all adjacent cells as they do not have a mine
                for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
                    for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
                        //Recursive Call
                        if (grid.rows[i].cells[j].innerHTML == "") clickCell(grid.rows[i].cells[j]);
                    }
                }
            }
            checkLevelCompletion();
        }
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		body {
		    background: black;
		    color: #DDDDDD;
		    font-family: courier new;
		    text-align: center;
		    margin: 0;
		}
		H1 {
		    text-align: center;
		    font-size: 14pt;
		    font-weight: normal;
		}
		#grid {
		    margin-left: auto;
		    margin-right: auto;
		}
		#grid TR TD {
		    border: 1px solid white;
		    background: #999999;
		    width: 16px;
		    height: 16px;
		    text-align: center;
		}
		#grid TR TD.clicked {
		    background: #333333;
		}
		#grid TR TD.mine {
		    background: #FF0000;
		}
		BUTTON {
		    margin: 12px;
		}
	</style>
</head>
<body>
	<H1>扫雷（Minesweeper）</H1>
	<table id=grid>
	</table>
	<BUTTON onclick="generateGrid();">重置（Reset）</BUTTON>
	
	<script type="text/javascript">
		var grid = document.getElementById("grid");
		var testMode = false; //Turn this variable to true to see where the mines are
		var gameLevel = 1;
		var colNumber = 10;
		var rowNumber = 10;
		generateGrid();
		
		function generateGrid() {
		    //generate row*col grid
		    grid.innerHTML = "";
		    for (var i = 0; i < rowNumber; i++) {
		        row = grid.insertRow(i);
		        for (var j = 0; j < colNumber; j++) {
		            cell = row.insertCell(j);
		            cell.onclick = function() {
		                clickCell(this);
		            };
		            var mine = document.createAttribute("data-mine");
		            mine.value = "false";
		            cell.setAttributeNode(mine);
		        }
		    }
		    addMines();
		}
		
		function addMines() {
		    //Add mines randomly
		    for (var i = 0; i < gameLevel * 10; i++) {
		        var row = Math.floor(Math.random() * rowNumber);
		        var col = Math.floor(Math.random() * colNumber);
		        var cell = grid.rows[row].cells[col];
		        cell.setAttribute("data-mine", "true");
		        if (testMode) cell.innerHTML = "X";
		    }
		}
		
		function revealMines() {
		    //Highlight all mines in red
		    for (var i = 0; i < rowNumber; i++) {
		        for (var j = 0; j < colNumber; j++) {
		            var cell = grid.rows[i].cells[j];
		            if (cell.getAttribute("data-mine") == "true") cell.className = "mine";
		        }
		    }
		}
		
		function checkLevelCompletion() {
		    var levelComplete = true;
		    for (var i = 0; i < rowNumber; i++) {
		        for (var j = 0; j < colNumber; j++) {
		            if ((grid.rows[i].cells[j].getAttribute("data-mine") == "false") && (grid.rows[i].cells[j].innerHTML == "")) levelComplete = false;
		        }
		    }
		    if (levelComplete) {
		        alert("You Win!");
		        revealMines();
		
		        // you can add level up codes here after...      
		    }
		}
		
		function clickCell(cell) {
		    //Check if the end-user clicked on a mine
		    if (cell.getAttribute("data-mine") == "true") {
		        revealMines();
		        alert("Game Over");
		    } else {
		        cell.className = "clicked";
		        //Count and display the number of adjacent mines
		        var mineCount = 0;
		        var cellRow = cell.parentNode.rowIndex;
		        var cellCol = cell.cellIndex;
		        //alert(cellRow + " " + cellCol);
		        for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
		            for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
		                if (grid.rows[i].cells[j].getAttribute("data-mine") == "true") mineCount++;
		            }
		        }
		        cell.innerHTML = mineCount;
		        if (mineCount == 0) {
		            //Reveal all adjacent cells as they do not have a mine
		            for (var i = Math.max(cellRow - 1, 0); i <= Math.min(cellRow + 1, rowNumber - 1); i++) {
		                for (var j = Math.max(cellCol - 1, 0); j <= Math.min(cellCol + 1, colNumber - 1); j++) {
		                    //Recursive Call
		                    if (grid.rows[i].cells[j].innerHTML == "") clickCell(grid.rows[i].cells[j]);
		                }
		            }
		        }
		        checkLevelCompletion();
		    }
		}
	</script>
</body>
</html>

版权声明本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END