AngularJS Templae
Basic JSFiddle for AngularJS 1.2.1.
Already contains the ngApp, ngController, data and method binding.
HTML
<div ng-controller="MinesweeperController">
<table class="minefield">
<tr ng-repeat="row in minefield.rows">
<td ng-repeat="spot in row.spots" ng-click="spot.isCovered = false">
<img ng-if="spot.isCovered" src="http://luis-perez.s3-us-west-2.amazonaws.com/angularjs-minesweeper-game/covered.png" />
<img ng-if="!spot.isCovered && spot.content == 'empty'" src="http://luis-perez.s3-us-west-2.amazonaws.com/angularjs-minesweeper-game/empty.png" />
<img ng-if="!spot.isCovered && spot.content == 'mine'" src="http://luis-perez.s3-us-west-2.amazonaws.com/angularjs-minesweeper-game/mine.png" />
</td>
</tr>
</table>
</div>
CSS
.minefield {
line-height:0;
border-spacing:0;
}
.minefield td {
padding:0
}
JavaScript
function createMinefield() {
var minefield = {};
minefield.rows = [];
for (var i = 0; i < 9; i++) {
var row = {};
row.spots = [];
for (var j = 0; j < 9; j++) {
var spot = {};
spot.isCovered = false; // Set to false to view mines.
spot.content = "empty";
row.spots.push(spot);
}
minefield.rows.push(row);
}
placeManyRandomMines(minefield);
return minefield;
}
function getSpot(minefield, row, column) {
return minefield.rows[row].spots[column];
}
function placeRandomMine(minefield) {
// Randomly choose a spot.
// If the spot already has a mine, then loop. Otherwise, break out.
var spot, column, row;
while (true) {
row = Math.round(Math.random() * 8);
column = Math.round(Math.random() * 8);
spot = getSpot(minefield, row, column);
if (spot.content == "empty") {
break;
}
}
spot.content = "mine";
}
function placeManyRandomMines(minefield) {
for (var i = 0; i < 10; i++) {
placeRandomMine(minefield);
}
}
function MinesweeperController($scope) {
$scope.minefield = createMinefield();
}