149 lines
5.4 KiB
HTML
149 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
<style type="text/css">
|
|
td {
|
|
border: 1px solid darkgray;
|
|
padding: 2px;
|
|
width: 25px;
|
|
height: 25px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
font-weight: bolder;
|
|
text-shadow: 1px 0 #888888;
|
|
background-color: gray;
|
|
}
|
|
|
|
td.x3 {
|
|
color: red;
|
|
}
|
|
|
|
td.x2 {
|
|
color: green;
|
|
}
|
|
|
|
td.x1 {
|
|
color: blue;
|
|
}
|
|
|
|
table {
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
Minesweeper
|
|
|
|
<table id="matrix"></table>
|
|
|
|
<script type="text/javascript">
|
|
var matrixModel;
|
|
var matrixView = document.getElementById('matrix');
|
|
var totalNumberOfBombs = 37;
|
|
var size = 16;
|
|
init(size);
|
|
placeBombs();
|
|
calculateNearByBombs();
|
|
showMatrix();
|
|
|
|
function showMatrix() {
|
|
matrixView.innerHTML = '';
|
|
for (var rowCounter = 0; rowCounter < matrixModel.rows.length; rowCounter++) {
|
|
var viewRow = matrixView.insertRow();
|
|
var modelRow = matrixModel.rows[rowCounter];
|
|
for (var cellCounter = 0; cellCounter < modelRow.cells.length; cellCounter++) {
|
|
var viewCell = viewRow.insertCell();
|
|
var modelCell = modelRow.cells[cellCounter];
|
|
if (modelCell.isOpen) {
|
|
viewCell.style.backgroundColor = 'lightcyan';
|
|
if (modelCell.isBomb) {
|
|
viewCell.innerHTML = '💣';
|
|
} else if (modelCell.bombsNearBy > 0) {
|
|
viewCell.innerHTML = modelCell.bombsNearBy;
|
|
viewCell.classList.add('x' + modelCell.bombsNearBy);
|
|
}
|
|
} else {
|
|
viewCell.addEventListener("click", handleClick, false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function placeBombs() {
|
|
for (var bombCount = 0; bombCount < totalNumberOfBombs; bombCount++) {
|
|
var rowIndex = Math.floor(Math.random() * size);
|
|
var columnIndex = Math.floor(Math.random() * size);
|
|
var modelCell = matrixModel.rows[rowIndex].cells[columnIndex];
|
|
modelCell.isBomb = true;
|
|
}
|
|
}
|
|
|
|
function calculateNearByBombs() {
|
|
for (var rowCounter = 0; rowCounter < matrixModel.rows.length; rowCounter++) {
|
|
var modelRow = matrixModel.rows[rowCounter];
|
|
for (var cellCounter = 0; cellCounter < modelRow.cells.length; cellCounter++) {
|
|
var modelCell = modelRow.cells[cellCounter];
|
|
modelCell.bombsNearBy =
|
|
countBomb(rowCounter - 1, cellCounter - 1)
|
|
+ countBomb(rowCounter - 1, cellCounter)
|
|
+ countBomb(rowCounter - 1, cellCounter + 1)
|
|
+ countBomb(rowCounter, cellCounter - 1)
|
|
+ countBomb(rowCounter, cellCounter + 1)
|
|
+ countBomb(rowCounter + 1, cellCounter - 1)
|
|
+ countBomb(rowCounter + 1, cellCounter)
|
|
+ countBomb(rowCounter + 1, cellCounter + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
function countBomb(row, column) {
|
|
if (row < 0 || row >= size || column < 0 || column >= size) return 0;
|
|
return matrixModel.rows[row].cells[column].isBomb;
|
|
}
|
|
|
|
|
|
function init(size) {
|
|
matrixModel = {};
|
|
matrixModel.rows = [];
|
|
|
|
for (var rowCounter = 0; rowCounter < size; rowCounter++) {
|
|
var newRow = {};
|
|
newRow.cells = [];
|
|
for (var cellCounter = 0; cellCounter < size; cellCounter++) {
|
|
var newCell = {};
|
|
newCell.isBomb = false;
|
|
newCell.isOpen = false;
|
|
newCell.bombsNearBy = 0;
|
|
newRow.cells.push(newCell);
|
|
}
|
|
matrixModel.rows.push(newRow);
|
|
}
|
|
}
|
|
|
|
function handleClick(aMouseEvent) {
|
|
var rowIndex = aMouseEvent.srcElement.parentElement.sectionRowIndex;
|
|
var columnIndex = aMouseEvent.srcElement.cellIndex;
|
|
var modelCell = matrixModel.rows[rowIndex].cells[columnIndex];
|
|
openBlankCells(rowIndex, columnIndex);
|
|
modelCell.isOpen = true;
|
|
showMatrix();
|
|
}
|
|
|
|
function openBlankCells(rowIndex, columnIndex) {
|
|
if (rowIndex < 0 || rowIndex >= size || columnIndex < 0 || columnIndex >= size) return;
|
|
var modelCell = matrixModel.rows[rowIndex].cells[columnIndex];
|
|
if (!modelCell.isBomb && !modelCell.isOpen && modelCell.bombsNearBy === 0) {
|
|
modelCell.isOpen = true;
|
|
openBlankCells(rowIndex - 1, columnIndex);
|
|
openBlankCells(rowIndex, columnIndex - 1);
|
|
openBlankCells(rowIndex, columnIndex + 1);
|
|
openBlankCells(rowIndex + 1, columnIndex);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |