我最近了解了IIFE,并且我试图将它们纳入扫雷游戏中。我知道Module模式以及它如何返回对象。我在我的addMines函数中使用它来返回一个数组。我想用我的distanceToMine功能做类似的事情。我的目标是返回一个显示每个矿井距离的对象 - 我可以通过其他功能访问的对象。我遇到的问题(我认为)与使用Jquery的.each函数有关。我无法访问我在.each函数中使用的任何代码。
我想到的一个可能的解决方案可能是将.each替换为for循环,但后来我很难访问我需要访问的数据属性(var thisCell)。在第130行,我是console.log()我想要返回的对象。
在第130行返回名为obj的对象的最佳方法是什么,以便我可以在函数外部访问它?是否仍然可以使用.each函数并访问其中的代码?如果是这样,怎么样?
$(document).ready(function(){
makeGrid();
//addMines();
detectBombs();
distanceToMine();
})
var makeGrid = (function () {
return function () {
var row = 9;
for (var i=0;i<row;i++){
$(".divTableBody").append("<div class='divTableRow'></div>") }
for (i=0;i<row;i++){
$(".divTableRow").append("<div class='divTableCell'></div>") }
$(".divTableCell").each( function(i) {
$(this).attr('data', (i+1))
// $(this).append(i+1)
});
};
})();
var addMines = (function () {
var mineArray = [];
for (var i = 1; i < 82;i++) {
mineArray.push(i)
}
return {
shuffle: function (array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
},
get: function (){
addMines.shuffle(mineArray);
mineArray = mineArray.splice(1,10)
return mineArray
}
};
})();
var mineArray = addMines.get()
var detectBombs = (function () {
return function () {
// var mineArray = addMines.get()
console.log(mineArray.sort())
$(".divTableCell").on("click", function(){
//console.log($(this).attr("data"))
for (var i=0;i<mineArray.length;i++) {
if ( $(this).attr("data") == mineArray[i] ) {
for (var j = 0;j<82;j++) {
$('*[data="' + mineArray[j] + '"]').html('<i class="fa fa-bomb" aria-hidden="true"></i>')
.css("background-color", "white" )
$('*[data="' + j + '"]').css("background-color", "white" )
}
}
}
})
};
})();
var distanceToMine = (function () {
return function () {
//The following code to find matching array values was taken from this answer:
//https://stackoverflow.com/questions/12433604/how-can-i-find-matching-values-in-two-arrays
Array.prototype.diff = function(arr2) {
var ret = [];
this.sort();
arr2.sort();
for(var i = 0; i < this.length; i += 1) {
if(arr2.indexOf( this[i] ) > -1){
ret.push( this[i] );
}
}
return ret;
};
var arr = [];
$(".divTableCell").each( function(i) {
var thisCell = parseInt($(this).attr("data"));
var up = (thisCell - 9);
var right = (thisCell + 1);
var down = (thisCell + 9);
var left = (thisCell - 1);
var diagonalRightUp = (thisCell - 8);
var diagonalRightDown = (thisCell + 10);
var diagonalLeftUp = (thisCell - 10);
var diagonalLeftDown = (thisCell + 8);
var direction = [up,right,down,left,diagonalRightUp,diagonalRightDown,diagonalLeftUp,diagonalLeftDown];
var adjacentNumbers = direction.filter(function(num){
return num > 0 && num <= 81
})
var mineDistances = mineArray.diff(adjacentNumbers)
arr.push(mineDistances.length)
});
//https://stackoverflow.com/questions/4215737/convert-array-to-object
var obj = arr.reduce(function(acc, cur, i) {
acc[i] = cur;
return acc;
}, {});
console.log(obj)
};
})();
&#13;
.divTable{
display: table;
width: 50%;
padding: 50px;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 20px 20px;
vertical-align: top;
box-shadow: 1px 1px 1px;
background-color: grey;
border-radius: 5px;
}
.divTableBody {
display: table-row-group;
}
.open {
background-color: white;
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<title>MineSweeper</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://use.fontawesome.com/eeb147990f.js"></script>
</head>
<body>
<div class="container">
<center>
<h1>Minesweeper</h1>
<div id="container">
<div class="divTable">
<div class="divTableBody">
</div>
</div>
</div>
</center>
</div>
</body>
</html>
&#13;