I've recently learned about IIFEs, and I'm trying to incorporate them in a Minesweeper game. I'm aware of the Module pattern and how it can return objects. I use it in my addMines function to return an array. I'd like to do something similar with my distanceToMine function. My goal is to return an object that shows the distance to each mine--something that I can access with other functions. The problem I've run into is (I think) related to using Jquery's .each function. I can't access any of the code that I use inside of the .each function.
One possible solution I thought of was maybe replacing .each for a for loop, but then I have difficulty accessing the data attributes that I need to access (var thisCell). On line 130 I console.log() the object that I'd like to return.
What's the best way of going about returning the object on line 130 named obj so that I can access it outside of the function? Is it still possible to use the .each function and access the code within it? If so, how?
$(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)
};
})();
.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;
}
<!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>