楼主学网页设计不久,这是第一个稍微比较复杂的JS事件小游戏,我知道在算法上肯定会有许多冗余的地方,楼主正在努力奋斗修改中,望各位大神加以指正,第一次发博文,代码又没有优化就不多啰嗦了,代码里有一些注释,待年后修改优化好后再附上详细注释,谢谢!
DOM结构:
<body>
<div class="section">
<div class="w960">
<table id="table"><tbody></tbody></table>
<div class="content">
Mine: <span></span><br /><br /><br /><br />
Row:<input type="text" /><br /><br /><br />
Col:<input type="text" /><br /><br /><br />
Num:<input type="text" />
</div>
</div>
</div>
<div class="reload"><p><strong>Reset</strong></p></div>
</body>
CSS样式:
<style>
body{margin:0px;}
.reload{width:200px;background-color:#0087cf;margin:auto;padding:1px 0;}
.reload p{text-align:center;}
td{width:20px;height:20px;border:1px solid #000;text-align:center;cursor:default;}
.w960{width:960px;margin:25px auto;height:500px;position:relative;}
table{border-collapse:collapse;margin-left:80px;}
.content{position:absolute;left:600px;top:120px;}
.section:after{clear:both;content:"";}
input{text-align:center;}
.mine{background:url(a.png) 50% 50%/100% 100% no-repeat;}
.star{background:url(b.png) 50% 50%/100% 100% no-repeat;}
.on{background-color:;}
</style>
JS代码:
<script>
$(function () {
//阻止右击默认事件
document.oncontextmenu = function () {
return false;
}
//js生成20X20扫雷地图,雷数随机约为20%
var txt = "";
var row = 20, col = 20;
for (var i = 0; i < col; i++) {
txt += "<tr>";
for (var j = 0; j < row; j++) {
//0-9之间的随机数
var num = Math.floor(Math.random() * 10);
if (num < 2) {
txt += "<td class='on item_val'>" + "</td>";
}
else {
txt += "<td class='off item_val'>" + "</td>";
}
}
txt += "</tr>";
}
$("tbody").wrapInner(txt);
$("span").text($("td.on").length);
//鼠标点击事件
var off_mouse = function (event) {
if (event.which == 3 && !(parseInt($(this).text()) >= 0)) {
$(this).toggleClass("star");
}
}
$(document).on("mousedown", "td.off", off_mouse);
var off_click = function () {
if (!(parseInt($(this).text()) >= 0)) {
var count = 0;
//索引index
var eq_row = $(this).parent("tr").children().index($(this));
var eq_col = $("tr").index($(this).parent("tr"));
console.log("点击了第" + (eq_col + 1) + "行");
console.log("点击了第" + (eq_row + 1) + "列");
//左
if (eq_row > 0 && $(this).prev().hasClass("on")) {
count += 1;
}
//右
if (eq_row < col - 1 && $(this).next().hasClass("on")) {
count += 1;
}
//上
if (eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row).hasClass("on")) {
count += 1;
}
//下
if (eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row).hasClass("on")) {
count += 1;
}
//左上
if (eq_row > 0 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row - 1).hasClass("on")) {
count += 1;
}
//右上
if (eq_row < col - 1 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row + 1).hasClass("on")) {
count += 1;
}
//左下
if (eq_row > 0 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row - 1).hasClass("on")) {
count += 1;
}
//右下
if (eq_row < col - 1 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row + 1).hasClass("on")) {
count += 1;
}
//如果没雷则去除之前可能做的标记
$(this).removeClass("star");
$(this).removeClass("off"); //用于计数判断
$(this).removeClass("item_val")
$(this).addClass("item"); //显现数值的用于双击
$(this).text(count);
//如果为0
if (count == 0) {
if (eq_row > 0) {
$(this).prev().trigger("click");
}
if (eq_row < col - 1) {
$(this).next().trigger("click");
}
if (eq_col > 0) {
$(this).parent("tr").prev().children().eq(eq_row).trigger("click");
}
if (eq_col < row - 1) {
$(this).parent("tr").next().children().eq(eq_row).trigger("click");
}
if (eq_row > 0 && eq_col > 0) {
$(this).parent("tr").prev().children().eq(eq_row - 1).trigger("click");
}
if (eq_row < col - 1 && eq_col > 0) {
$(this).parent("tr").prev().children().eq(eq_row + 1).trigger("click");
}
if (eq_row > 0 && eq_col < row - 1) {
$(this).parent("tr").next().children().eq(eq_row - 1).trigger("click");
}
if (eq_row < col - 1 && eq_col < row - 1) {
$(this).parent("tr").next().children().eq(eq_row + 1).trigger("click");
}
}
$("input:text").eq(0).val(eq_col + 1);
$("input:text").eq(1).val(eq_row + 1);
$("input:text").eq(2).val($("td.off").length);
//console.log(row * col - $("td.on").length);
//判别胜利
if ($("td.off").length == 0) {
$("td.on.star").css("background-color", "green");
$("td.on").removeClass("star");
$("td.on").addClass("mine");
alert("You win!");
$(document).off("mousedown", "td.on", on_mouse);
$(document).off("click", "td.on", on_click);
$(document).off("dblclick", "td.item", item_dbl);
$(document).off("mousedown", "td.off", off_mouse);
$(document).off("click", "td.off", off_click);
}
}
}
$(document).on("click", "td.off", off_click);
var item_dbl = function () {
//索引问号的数目index
var count1 = 0;
var eq_row_1 = $(this).parent("tr").children().index($(this));
var eq_col_1 = $("tr").index($(this).parent("tr"));
//左
if (eq_row_1 > 0 && $(this).prev().hasClass("star")) {
count1 += 1;
}
//右
if (eq_row_1 < col - 1 && $(this).next().hasClass("star")) {
count1 += 1;
}
//上
if (eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1).hasClass("star")) {
count1 += 1;
}
//下
if (eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1).hasClass("star")) {
count1 += 1;
}
//左上
if (eq_row_1 > 0 && eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1 - 1).hasClass("star")) {
count1 += 1;
}
//右上
if (eq_row_1 < col - 1 && eq_col_1 > 0 && $(this).parent("tr").prev().children().eq(eq_row_1 + 1).hasClass("star")) {
count1 += 1;
}
//左下
if (eq_row_1 > 0 && eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1 - 1).hasClass("star")) {
count1 += 1;
}
//右下
if (eq_row_1 < col - 1 && eq_col_1 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_1 + 1).hasClass("star")) {
count1 += 1;
}
console.log("c1:" + count1);
//索引雷的数目index
var count2 = 0;
var eq_row_2 = $(this).parent("tr").children().index($(this));
var eq_col_2 = $("tr").index($(this).parent("tr"));
//左
if (eq_row_2 > 0 && $(this).prev().hasClass("on")) {
count2 += 1;
}
//右
if (eq_row_2 < col - 1 && $(this).next().hasClass("on")) {
count2 += 1;
}
//上
if (eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2).hasClass("on")) {
count2 += 1;
}
//下
if (eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2).hasClass("on")) {
count2 += 1;
}
//左上
if (eq_row_2 > 0 && eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2 - 1).hasClass("on")) {
count2 += 1;
}
//右上
if (eq_row_2 < col - 1 && eq_col_2 > 0 && $(this).parent("tr").prev().children().eq(eq_row_2 + 1).hasClass("on")) {
count2 += 1;
}
//左下
if (eq_row_2 > 0 && eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2 - 1).hasClass("on")) {
count2 += 1;
}
//右下
if (eq_row_2 < col - 1 && eq_col_2 < row - 1 && $(this).parent("tr").next().children().eq(eq_row_2 + 1).hasClass("on")) {
count2 += 1;
}
console.log("c2:" + count2);
if (count1 == count2) {
//索引index
var eq_row = $(this).parent("tr").children().index($(this));
var eq_col = $("tr").index($(this).parent("tr"));
//左
if (eq_row > 0 && $(this).prev().not(".star").hasClass("item_val")) {
$(this).prev().trigger("click");
}
//右
if (eq_row < col - 1 && $(this).next().not(".star").hasClass("item_val")) {
$(this).next().trigger("click");
}
//上
if (eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row).not(".star").hasClass("item_val")) {
$(this).parent("tr").prev().children().eq(eq_row).trigger("click");
}
//下
if (eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row).not(".star").hasClass("item_val")) {
$(this).parent("tr").next().children().eq(eq_row).trigger("click");
}
//左上
if (eq_row > 0 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row - 1).not(".star").hasClass("item_val")) {
$(this).parent("tr").prev().children().eq(eq_row - 1).trigger("click");
}
//右上
if (eq_row < col - 1 && eq_col > 0 && $(this).parent("tr").prev().children().eq(eq_row + 1).not(".star").hasClass("item_val")) {
$(this).parent("tr").prev().children().eq(eq_row + 1).trigger("click");
}
//左下
if (eq_row > 0 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row - 1).not(".star").hasClass("item_val")) {
$(this).parent("tr").next().children().eq(eq_row - 1).trigger("click");
}
//右下
if (eq_row < col - 1 && eq_col < row - 1 && $(this).parent("tr").next().children().eq(eq_row + 1).not(".star").hasClass("item_val")) {
$(this).parent("tr").next().children().eq(eq_row + 1).trigger("click");
}
}
}
$(document).on("dblclick", "td.item", item_dbl)
var on_mouse = function (event) {
if (event.which == 3) {
$(this).toggleClass("star");
$(this).toggleClass("item_val");
};
}
$(document).on("mousedown", "td.on", on_mouse);
var on_click = function () {
if (!(parseInt($(this).text()) >= 0)) {
//alert(t);
//t++;
$("td.on").addClass("mine");
$(this).css("background-color", "red");
$("td.on.star").css("background-color", "red");
setTimeout(function () {
alert("You lost the game!");
$(document).off("mousedown", "td.on", on_mouse);
$(document).off("click", "td.on", on_click);
$(document).off("dblclick", "td.item", item_dbl);
$(document).off("mousedown", "td.off", off_mouse);
$(document).off("click", "td.off", off_click);
}, 666);
}
}
$(document).on("click","td.on",on_click);
})
$(function () {
$(document).on("click", "div.reload", function () {
window.location.reload(true);
})
})
</script>