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

china0396 · 发表于 4 小时前

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

100行代码实现的JS扫雷小游戏插图
有基础会网页的应该都知道咋操作，可以忽略说明了。

小白说明：本地新建一个空白.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>

复制代码

账号		自动登录	找回密码
密码			立即注册

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

相关帖子