Shulou(Shulou.com)06/02 Report--

This article is about how to use JavaScript to achieve minesweeper Mini Game, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Without saying much, follow the editor to have a look.

Let's take a look at our steps. Here we use the HBuilder X editor, you can use your favorite editor for editing.

1. Edit the inde.html file:

Junior, Intermediate, Advanced restart the number of remaining mines:

TIME: S

2. Enter the contents of the jin.css file:

Body {text-align: center; position: relative;}. Level {margin-top: 30px; font-size: 18px;}. Level button {padding: 3px 8px; background: rgb (67,183,189); / * border: 1px solid rgb (129,129,129); * / border: none; color: white; border-radius: 3px; outline: none; cursor:pointer;}. Level button:hover {background: rgb (23,132,138) Row {margin: 0; padding: 0; overflow: hidden; letter-spacing:-8px;}. Col {display: inline-block; background: rgba (32,226,255,0.41); border: 1px solid rgb (129,129,129); margin: 1.5px; width: 23px; height: 23px; letter-spacing: normal; position: relative;}. Col span {display: inline-block; position: relative Top: 2px; opacity: 0; font-weight: bold;/* standard arrow * / cursor:default;}. Col:hover {background: blue;}. GameBox {margin-top: 30px;}. Img-flag {position: absolute; top: 3px; left: 3.5px; width: 18px; height: 18px;}. Hide {display: none;}. Boom {background: url ('boom.svg') no-repeat 2.5px 2px Background-size: 18px 18px;}. Div-boom {font-size: 30px; position: fixed; top: 50px; left: 50%;} .info {margin-top: 30px;} .info p {display: inline-block; width: 130px; margin: 010px;} .info p span {color: rgb (67,183,189);} .num-1 {color: rgb (8,153,235) Num-2 {color: rgb (255,45,178);}. Num-3 {color: rgb (109,224,176);}. Num-4 {color: rgb (8,153,235);}. Num-5 {color: rgb (255,167,45);}. Num-6 {color: rgb (49,140,102);} .num-7 {color: rgb (168,55,237) }. Num-8 {color: rgb (15254154);}

3. Jin.js file:

/ / 1, make a map of mine var mineSweepingMap = function (r, c, num) {var map = [] / / the number of lines given, and generate a 1-dimensional array var row = function (r) {for (var I = 0; I)

< r; i++) { map[i] = new Array() } } // 给列数，生成一个 2 维数组 var column = function (col) { for (var i = 0; i < map.length; i++) { for (var j = 0; j < col; j++) { map[i][j] = 0 } } } // 给列数和行数生成空地图 var blankMap = function (r, col) { row(r) column(col) } // 给出地雷数量让后随机写入地雷 var writeInMine = function (num) { // 随机位置写入 var randomLocation = function () { var x = Math.floor(Math.random() * r) var y = Math.floor(Math.random() * c) // console.log( ':', x, y); if (map[x][y] !== 9) { map[x][y] = 9 } else { randomLocation() } } for (var i = 0; i < num; i++) { randomLocation() } } // 使用循环给雷的边上所有数 +1 , 已经是雷的除外 var plus = function (array, x, y) { if (x >

= 0 & & x

< r && y >

= 0 & & y

< c) { if (array[x][y] !== 9) { array[x][y] += 1 } } } var writeInHint = function () { for (var x = 0; x < map.length; x++) { for (var y = 0; y < map[0].length; y++) { if (map[x][y] === 9) { // 上下 6 个 for (var i = -1; i < 2; i++) { plus(map, x - 1, y + i) plus(map, x + 1, y + i) } // 左右 2 个 plus(map, x, y + 1) plus(map, x, y - 1) } } } } blankMap(r, c) writeInMine(num) writeInHint() return map}// 2，将雷写入页面var writeHtml = function (map) { // 先通过 y轴数量写入 ul，然后通过 x轴上的数量写入 li var x = document.querySelector('.gameBox') for (var i = 0; i < map.length; i++) { x[xss_clean] = x[xss_clean] + `` } var z = document.querySelectorAll('.row') for (var i = 0; i < z.length; i++) { for (var j = 0; j < map[0].length; j++) { var m = map[i][j] if (m === 0) { m = '' } z[i][xss_clean] = z[i][xss_clean] + ` ${m}

`} / / decide whether to win var changeClearMineNum = function (clearMineNum) {/ / console.log ('zmzmzmzm'); / / console.log (' zz', zz) If (clearMineNum = = ((col * row)-num)) {var all = document.querySelectorAll ('.col') var allNum = 0 var stop = setInterval (function () {var r = Math.floor (Math.random () * 256) var g = Math.floor (Math.random () * 256) var b = 210 / / var b = Math.floor (Math.random () * 256) all [allNum] .children [0] .style.opacity = `0`all [allNum] .children [1] .style.opacity ='0' all [allNum] .style.background = `rgba (${r}) ${g}, ${b}, 0.6) `allNum++ if (allNum = all.length) {clearInterval (stop) if (zz = 0) {alert ('you made it ~! Eat meat in the evening!) InitializeGame (row, col, num)} initializeGame (row, col, num)}, 20)}} / / 3, minesweeping process var clearMine = function (row, col, num) {var clearMineNum = 0 var makeWhite = function (x, y) {if (x)

< row && y < col && x >

= 0 & & y > = 0) {var el = document.querySelector (`.x-${x} `). Children [y] / / pay attention to this! = 'white' If you do not add this, you will enter the infinite loop if (el.style.background! = = 'white') {el.style.background =' white' el.children [0] .style.opacity ='1' el.children [1] .classList.add ('hide') clearMineNum++ / / console.log (clearMineNum,' clearMineNum') ChangeClearMineNum (clearMineNum) if (el.innerText =') {showNoMine (XMague y)}} / / Intelligent Minesweeping var showNoMine = function (XMague y) {/ / console.log (XMague y, 'xMague y') MakeWhite (x-1, y + 1) makeWhite (x-1, y-1) makeWhite (x-1, y) makeWhite (x + 1, y + 1) makeWhite (x + 1, y-1) makeWhite (x + 1, y) makeWhite (x, y + 1) makeWhite (x, y-1)} / / bind click events to all squares, click to display numbers Or boom var show = function () {/ / var x = document.querySelectorAll ('.col') var x = document.querySelectorAll ('.row') for (var I = 0 I

< x.length; i++) { x[i].addEventListener('click', function (event) { var el = event.target if (el.tagName != 'LI') { // 因为事件委托的原因 // 如果点击到了 span 上面，那么就会出现 bug // 所以如果点击到 span 上面，那么 el 就等于 span 的父节点 el = event.target.parentElement } // 已经被标记的不能点击 var flag = el.children[1].classList.contains('hide') if (el.tagName === 'LI' && flag) { if (el.children[0].innerText !== '9' && el.style.background !== 'white') { el.children[0].style.opacity = '1' el.style.background = 'white' clearMineNum++ changeClearMineNum(clearMineNum) // console.log(clearMineNum, 'clearMineNum'); } else if (el.children[0].innerText === '9') { // el.children[0].style.opacity = '1' zz = 1 el.classList.add('boom') alert('游戏失败') var all = document.querySelectorAll('.col') var ff = [] var allNum = 0 // 这里做了个小动画，失败的时候慢慢的显示雷的位置 for (var i = 0; i < all.length; i++) { if (all[i].children[0].innerText === '9') { // all[i].style.background = 'red' ff[allNum] = all[i] allNum++ } } allNum = 0 var time = 60 if (num >

50) {time = 10} else if (num > 10) {time = 25} var stop = setInterval (function () {f [allNum] .classList.add ('boom) ') allNum++ if (allNum = ff.length) {clearInterval (stop) / / console.log (' stop') }} Time) / / var box = document.querySelector ('.gamebox') / / box [XSS _ clean] ='/ / var level = event.target [XSS _ clean] / / var body = document.querySelector ('body') / / initializeGame (row, col) Num)} / / if the box clicked is empty (what is there?) Then if (el.children [0] .innerText ='') {/ / get the position var x = parseInt (el.parentElement.dataset.x) var y = parseInt (el.dataset.y) / / console.log (x) Y, 'data') / / the background becomes white showNoMine (x, y)} for (var I = 0; I < x.length) ITunes +) {var mineNum = num x [I] .addEventListener ('contextmenu', function (event) {event.preventDefault () Var btnNum = event.button var el = event.target if (el.tagName! = 'LI') {/ / because of the event delegate / / if you click on span, there will be bug / / so if you click on span Then el is equal to the parent node of span el = event.target.parentElement} if (el.tagName = 'LI') {var classList = el.children [1] .classList / / places that have been clicked cannot be marked with if (classList.contains ( 'hide') & & el.style.background! = =' white') {var residue = document.querySelector ('.residue') if (mineNum! = = 0) {mineNum--} residue.innerText = `${mineNum}` ClassList.remove ('hide')} else if (el.style.background! = =' white') {classList.add ('hide')})} show ()} / / 4 Clear screen Then write the new screen var stopTimevar initializeGame = function (row, col, num) {var residue = document.querySelector ('.residue') residue.innerText = `$ {num} `var time = document.querySelector ('.tick') time.innerText = `0` var I = 1 clearInterval (stopTime) stopTime = setInterval (function () {time.innerText =` ${ionization +} `}, 1000) / / zz zz = 0 / first clear the original map Then reinitialize var box = document.querySelector ('.gamebox') box [XSS _ clean] =''var body = document.querySelector (' body') body.style.minWidth = `$ {27 * col} px` var map = mineSweepingMap (row, col, num) writeHtml (map) clearMine (row, col, num)} / / 5, select the game level Bind button function var Btn = function () {var level = document.querySelectorAll ('.choice-level') for (var I = 0 I < level.length Ilevel +) {level [I] .addEventListener ('click', function (event) {var level = event.target [XSS _ clean] if (level =' primary') {row = 9 col = 9 num = 10 initializeGame (row, col) Num)} else if (level = 'intermediate') {row = 16 col = 16 num = 40 initializeGame (row, col, num)} else if (level = 'advanced') {row = 16 col = 30 num = 99 initializeGame (row, col Num)}})} var restart = document.querySelector ('.restart') restart.addEventListener ('click', function (event) {initializeGame (row, col, num)})} Btn () / / 6 The initial data / / zz is used to determine whether the mine has been hit var zz = 0var row = 16var col = 16var num = 40initializeGame (row, col, num) / / give a coordinate, turn all around into white / / according to / / bind the right mouse click event, mark it when you right click the mouse, / / change the css at this time / / when all mines are marked, or only 9 in all the array, the game is successful. / / choose what is the language of game difficulty javascript? javascript is a dynamically typed, weakly typed language, object-and event-driven, relatively secure and widely used in client-side web page development. It is also a widely used scripting language for client-side Web development. It is mainly used to add dynamic functions to HTML web pages, and now JavaScript can also be used in web servers, such as Node.js.

The above is how to use JavaScript to achieve minesweeper Mini Game. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.