Posts
<html>
<head>
<title>Bomb Sweeper</title>
<style type="text/css">
body
{
background-color: #95B7DF;
}
#tableContainer td
{
width: 20px;
height: 20px;
text-align: center;
vertical-align: middle;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var BombSweeper = {
result: true,
bombMap: false,
colSize: 0,
rowSize: 0,
locateBomb: function(rowSize, colSize, bombCount) {
var bombArr = new Array(colSize * rowSize);
var count = 0;
var index;
while (count < bombCount) {
index = Math.floor(Math.random() * bombArr.length);
if (!bombArr[index]) {
count++;
bombArr[index] = true;
}
}
this.colSize = colSize;
this.rowSize = rowSize;
this.bombMap = bombArr;
},
getSurroundedIndex: function(x, y) {
var indexArr = [];
for (var i = x - 1; i <= x + 1; i++) {
if (i >= 0 && i < this.colSize) {
for (var j = y - 1; j <= y + 1; j++) {
if (j >= 0 && j < this.rowSize) {
indexArr.push(i * this.colSize + j);
}
}
}
}
return indexArr;
},
getSurroundedBombCount: function(arr) {
var count = 0;
for (var i in arr) {
if (this.bombMap[arr[i]]) count++;
}
return count;
},
getTips: function(x, y) {
var _x = parseInt(x, 10);
var _y = parseInt(y, 10);
if (this.bombMap[_x * this.colSize + _y]) {
return -1;
} else {
return this.getSurroundedBombCount(this.getSurroundedIndex(_x, _y));
}
},
isBomb: function(x, y) {
var _x = parseInt(x, 10);
var _y = parseInt(y, 10);
return this.bombMap[_x * this.colSize + _y] == true;
}
};
$(document).ready(function() {
$("#generateTable").bind("click", function() {
var colSize = parseInt($("#colSize").val(), 10);
var rowSize = parseInt($("#rowSize").val(), 10);
var bombCount = parseInt($("#bombCount").val(), 10);
if (isNaN(colSize) || isNaN(rowSize)) {
$("#tableContainer").text("Not availible size.");
} else {
BombSweeper.locateBomb(colSize, rowSize, bombCount);
// rewrite value
$("#colSize").val(colSize);
$("#rowSize").val(rowSize);
$("#col").text(colSize);
$("#row").text(rowSize);
$("#bomb").text(0);
$("#bombEmbed").text(bombCount);
// create bomb table
$("#tableContainer").html("");
$("<table/>").attr({
border: 0,
align: "center"
}).appendTo("#tableContainer");
for (var i = 0; i < rowSize; i++) {
var currentRow = $("<tr/>").appendTo("#tableContainer table");
for (var j = 0; j < colSize; j++) {
var currentCell = $("<td/>").css({
//textAlign: "center",
//verticalAlign: "middle",
//fontSize: "12pt",
border: "2px outset black",
//width: "20px",
//height: "20px",
backgroundColor: "gray"
}).attr({ x: i, y: j })
.html(" ")
//.html(BombSweeper.bombMap[i * colSize + j] ? "X" : " ")
.click(function(e) {
if (e.ctrlKey && $(this).attr("x") && $(this).attr("y")) {
if ($(this).attr("marked") == "true") {
$(this).removeAttr("marked")
.css({
color: "black",
fontWeight: "normal"
})
.html(" ");
$("#bomb").text(parseInt($("#bomb").text(), 10) - 1);
} else {
if (parseInt($("#bomb").text(), 10) < parseInt($("#bombEmbed").text(), 10)) {
$(this).css({
color: "blue",
fontWeight: "bold"
})
.attr("marked", true)
.text("P");
$("#bomb").text(parseInt($("#bomb").text(), 10) + 1);
if (parseInt($("#bomb").text(), 10) == parseInt($("#bombEmbed").text(), 10)) {
var marked = $("#tableContainer td[marked]");
for (var i = 0; i < marked.length; i++) {
if (!BombSweeper.isBomb($(marked.get(i)).attr("x"), $(marked.get(i)).attr("y"))) return;
}
// unbind all click event
$("#tableContainer td").unbind("click");
// finish game
if (confirm("Congratulations!\nYou finish this game.\nWould you like to play again?")) {
$("#generateTable").click();
}
}
}
}
} else {
if (!$(this).attr("marked") && $(this).attr("x") && $(this).attr("y")) {
var x = parseInt($(this).attr("x"), 10);
var y = parseInt($(this).attr("y"), 10);
var tips = BombSweeper.getTips(x, y);
if (tips == -1) {
$(this).css({
border: "2px inset black",
backgroundColor: "transparent",
color: "red"
})
.text("X")
.removeAttr("x")
.removeAttr("y");
// unbind all click event
$("#tableContainer td").unbind("click");
if (confirm("Sorry, you lose this game.\nWould you like to play again?")) {
$("#generateTable").click();
}
} else {
$(this).css({
border: "2px inset black",
backgroundColor: "white"
})
.html(tips == 0 ? " " : tips)
.removeAttr("x")
.removeAttr("y");
// extended action
if (tips == 0) {
$("#tableContainer td[x][y][marked!='true']")
.filter(function(index) {
return ($(this).attr("x") == x - 1 || $(this).attr("x") == x || $(this).attr("x") == x + 1)
&& ($(this).attr("y") == y - 1 || $(this).attr("y") == y || $(this).attr("y") == y + 1);
})
.each(function(index) {
$(this).click();
});
}
}
}
}
})
.appendTo(currentRow);
}
}
}
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<input id="colSize" type="text" size="5" value="10" />
x
<input id="rowSize" type="text" size="5" value="10" />
@
<input id="bombCount" type="text" size="5" value="30" />
<input id="generateTable" type="button" value="New Game" />
</div>
<div style="text-align: center;">
Size of grid : <span id="col">0</span>/ <span id="row">0</span>
<br />
Marked bombs : <span id="bomb">0</span> / <span id="bombEmbed">0</span>
</div>
<div id="tableContainer">
</div>
<div style="text-align: center; font-size: 9pt;">
(To mark bomb, press ctrl key and click.)</div>
</body>
</html>
