The examples in this article share the specific code of JS to implement minesweeping games for your reference. The specific content is as follows
Game features:
1. There are four difficulties
2. Can customize the difficulty
1. HTML-related code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minesweeping</title> <script src="js/"></script> <link rel="stylesheet" href="./css/" > </head> <!-- Requirements Analysis： 1.Game area： 9*9Areas of 2.Grids can be opened with markers Left button to open，Show numbers，The number of mines in the surrounding grid，Right-click to mark 3.Landmines Landmines随机分布 4.踩到Landmines时，game over 所有的Landmines显示出来 5.Chain opening large blank square 6.剩余Landmines数与计时器 7.Game Victory Conditions 所有的方格除了Landmines都被打开了，The game wins Information contained in a square： coordinate x y 是否是一个Landmines 周围的Landmines数 = 9 二维数组中存储的是周围的Landmines数 --> <body> <div class="level"> <button type="button" name="button" class="choice-level">Customize</button> <button type="button" name="button" class="choice-level">primary</button> <button type="button" name="button" class="choice-level">intermediate</button> <button type="button" name="button" class="choice-level">advanced</button> <button type="button" name="button" class="choice-level">Devil-level</button> <button type="button" name="button" class="restart">restart</button> </div> <div class="gameBox"></div> <div class="info"> <p>Remaining thunder number： <span class="residue"></span> </p> <p> TIME： <span class="tick"></span>S </p> </div> </body> </html>
2. CSS style
*{
margin: 0;
padding: 0;
}
.gameBox{
margin-top: 30px;
}
body{
font-size: 0;
}
ul{
list-style: none;
text-align: center;
overflow: hidden;
}
.col{
display: inline-block;
width: 22px;
height: 22px;
line-height: 22px;
background-color: rgba(32, 226, 255, 0.4);
border: 1px solid rgb(129, 129, 129);
font-size: 16px;
margin: 1.5px;
vertical-align: top;
position: relative;
}
.col:hover{
background-color: #0af;
}
.col span{
cursor: default;
}
.hide{
display: none;
}
.boom{
background: url("../img/") no-repeat 2.5px 2px;
background-size: 18px 18px;
}
.num-1{
color: rgb(8, 153, 235);
}
.num-2{
color: rgb(255, 45, 178);
}
.num-3{
color:#16a085;
}
.num-4{
color: #8e44ad;
}
.num-5{
color: rgb(255, 167, 45);
}
.num-6{
color: rgb(8, 126, 176);
}
.num-7{
color: #e67e22;
}
.num-8{
color: #c0392b;
}
.img-flag{
width: 18px;
height: 18px;
position: absolute;
top: 3px;
left: 3px;
}
.level{
margin-top: 30px;
font-size: 20px;
text-align: center;
}
.level button{
padding: 5px 8px;
background-color: rgb(67, 183, 189);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
color: #fff;
}
.level button:hover{
background-color: rgb(23, 132, 138);
}
.info{
margin-top: 30px;
font-size: 16px;
text-align: center;
}
.info p{
display: inline-block;
width: 130px;
margin: 0 auto;
}
.info p span{
color: rgb(67, 183, 189);
}
3. js code
= function() {
var row = 4;
var col = 4;
var num = 1;
//Judge that you cannot win after stepping on the mine var gg = false;
// Generate a map function mineMap(r, c, num) {
// Define the row var map = [];
//Give the number of rows and generate a two-dimensional array for (var i = 0; i < r; i++) {
map[i] = new Array()
}
// Assignment for (var i = 0; i < ; i++) {
for (var j = 0; j < c; j++) {
// //The number of mines around map[i][j] = 0;
}
}
var plus = function(array, x, y) {
if (x >= 0 && x < r && y >= 0 && y < c) {
if (array[x][y] !== 9) {
array[x][y]++
}
}
}
for (var i = 0; i < num; i++) {
var x = (() * r)
var y = (() * c)
if (map[x][y] != 9) {
map[x][y] = 9
//6 upper and lower +1 for (var j = -1; j < 2; j++) {
//On three plus(map, x - 1, y + j)
//The next three plus(map, x + 1, y + j)
}
//Left and left and right +1 plus(map, x, y - 1)
plus(map, x, y + 1)
} else {
//Re-random num++
}
}
return map;
}
//Write ul through the number of x-axis, and then talk about the properties of y-axis to li function writeHtml(map) {
// Get the box var gameBox = (".gameBox");
// Declare an empty string to store the generated ul and li var gridHTML = "";
for (var i = 0; i < ; i++) {
gridHTML += '<ul class = "row" data-x="' + i + '">';
//Generate li for (var j = 0; j < map[0].length; j++) {
var m = map[i][j]
if (m == 0) {
m = "";
}
gridHTML += "<li class='col' data-y=" + j + ">" +
"<span class='hide num-" + m + "'>" + m + "</span>" +
"<img src='img/' class='img-flag hide'>" +
"</li>"
}
gridHTML += '</ul>'
= gridHTML;
}
}
//To bind the square event, click the number mine and right-click to mark function show() {
// Get line ul var rows = (".row");
// traverse all uls for (var i = 0; i < ; i++) {
var element = rows[i];
// Add click event = function(event) {
// The current click element var el = ;
// Determine whether it is li if ( != "LI") {
return;
}
//todo determines whether it is opened and marked if ( == "white" || ![1].("hide")) {
return;
}
// Get the span tag content var mineNum = [0].innerHTML;
if (mineNum !== "9" && !== "white") {
// Open the blank chain if (mineNum == "") {
var x = parseInt();
var y = parseInt();
showNoMine(x, y);
}
// The background of li turns white; span display = "white";
[0]. = "inline";
// Determine the number of openings clearMineNum++;
// Victory function judgeVictory()
} else if (mineNum == "9") {
// Clear the victory timer clearInterval(stopTime);
// add class name ("boom");
alert("You're so fucking!")
gg = true;
// Show all mines and get all li var all = (".col");
// Place all mines var ff = [];
var allnum = 0;
// traverse all li for (var i = 0; i < ; i++) {
if (all[i].children[0].innerHTML == "9") {
// Thunder assigned to array ff[allnum] = all[i];
allnum++;
}
}
// Set a timer to turn on thunder one by one allnum = 0;
var stop = setInterval(function() {
ff[allnum].("boom")
allnum++;
//Judge end conditions if (allnum == ) {
// Clear the timer clearInterval(stop);
}
}, 30)
}
}
// Right-click to mark the mine = function(event) {
// Block the right-click menu ();
// Get the current click node var el = ;
// Determine whether it is if ( == "LI") {
el = ;
}
if ( != "LI") {
return;
}
// Get img var classList = [1].classList;
// The remaining thunder number var residue = (".residue");
var mineNum = parseInt();
// If there is no flag and it is not clicked, you can insert the flag if (("hide") && != "white") {
// Remove Hidden ("hide");
// Get the number of thunder mineNum--;
} else if ( != "white") {
("hide");
//Judge the number of thunder if (mineNum < num) {
mineNum++;
}
}
// The remaining thunder number = mineNum;
}
}
}
function judgeVictory() {
//Game Victory if (clearMineNum === (row * col - num)) {
//Make a small animation var all = (".col");
var allNum = 0;
var stop = setInterval(function() {
var r = (() * 256)
var g = (() * 256)
var b = (() * 256)
all[allNum]. = "rgba(" + r + "," + g + "," + b + ",0.6)";
//Hide both the flag and the span all[allNum].children[0]. = "none"
all[allNum].children[1]. = "none"
allNum++
if (allNum === ) {
clearInterval(stop)
if (!gg) {
alert("Good luck, eat chicken tonight")
init(row, col, num)
}
}
}, 20)
}
}
//Open spaces automatically function showNoMine(x, y) {
for (var i = -1; i <= 1; i++) {
if (x + i >= 0 && x + i < row) {
// Get the current line var rowElement = (".row")[x + i];
for (var j = -1; j <= 1; j++) {
if (y + j >= 0 && y + j < col) {
//Get the current cell var el = [y + j]
//The automatic opening must be an unopened square if ( != "white") {
= "white"
[0]. = "inline"
//Number of open squares +1 clearMineNum++
//Judge whether the game is successful or not judgeVictory(clearMineNum)
if ([0].innerText === "") {
showNoMine(x + i, y + j)
}
}
}
}
}
// if (x + i >= 0 && x + i < row) {
// // Get the current line // var rowElement = (".row")[x + i];
// for (var j = -1; j <= 1; j++ && y + j < col) {
// // Get the current cell // var el = [y + j];
// if ( !== "white") {
// = "white";
// [0]. = "inline";
// // Add 1 to open the number of sets // clearMineNum++;
// // Determine whether the game is successful // judgeVictory(clearMineNum);
// // Determine whether the surrounding spacer is empty when opened // if ([0].innerHTML === "") {
// showNoMine(x + i, y + j)
// }
// }
// }
// }
}
}
//Initialization method var stopTime;
function init(row, col, num) {
//Data initialization clearMineNum = 0
gg = false;
//Clear the original map and generate a new map var box = (".gameBox")
= "";
var map = mineMap(row, col, num);
// Create a new map writeHtml(map);
show()
//Write the thunder number into html var residue = (".residue")
= num
// Get the timing var tick = (".tick");
var i = 0;
// Initialization = i;
// Clear the timing clearInterval(stopTime);
// Time timer stopTime = setInterval(function() {
= ++i
}, 1000)
}
// Reset var restart = (".restart");
= function(event) {
//Stop bubbles ()
init(row, col, num)
}
// Customize var level = (".level")
= function(event) {
var el = ;
switch () {
case "primary":
row = 9;
col = 9;
num = 10;
init(row, col, num)
break;
case "intermediate":
row = 16;
col = 16;
num = 40;
init(row, col, num)
break;
case "advanced":
row = 16;
col = 30;
num = 479;
init(row, col, num)
break;
case "Devil":
row = 40;
col = 50;
num = 300;
init(row, col, num)
break;
case "Customize":
row = prompt("Please enter the number of columns!");
col = prompt("Please enter the number of lines!");
num = prompt("Please enter the number of thunder you want, (please choose carefully)");
init(row, col, num);
break;
default:
row = 9;
col = 9;
num = 10;
init(row, col, num)
break;
}
}
init(row, col, num)
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.