实训实在太过乏味无聊，还好电脑上有小游戏，可以玩下扫雷，蜘蛛纸牌。
突然好怀念高中时家里的那个win7台式机，时常断网时玩扫雷，植物大战僵尸等....
无奈，昨天想玩扫雷，燃鹅，win10系统下并没有自带扫雷游戏了，然后网上找了下
都是什么鬼，网上找的扫雷游戏画质太差，然后都不知道怎么点右键插旗子。
AV画质大概是如下：
哦，旁边有说明，但是操作还是很不方便。
然后昨天晚上就在构思怎么写一个扫雷的游戏，想了下，... oh ,so easy
今天一大早起来，然后动手写了起来，一上午时间基本功能都实现了
大概效果图如下：
ps:图片盗取QQ表情的
难点可能就是，随机生成地雷的位置，然后怎么判断点开一个它周围有几颗雷，边界位置的计算
点到雷后引爆所有的雷，游戏结束，鼠标右键事件，三种状态的切换等，再就是一些CSS样式。。。
html代码部分：
<body>
<div>
<br />
<h2>扫雷游戏</h2>
<br />
横向：<input type="number" name="name" value="30" disabled /> 格
纵向：<input type="number" name="name" value="16" disabled /> 格
摆放：<input type="number" name="name" value="99" disabled /> 颗雷
<input type="button" id="btnStart" name="name" value="按F5开始游戏" />
<br /><br />
<table></table>
<br />
<fieldset>
<legend>记录情况</legend>
用时：<input type="text" disabled name="name" id="time" value="" />
剩余：<input type="text" disabled name="name" id="time" value="" />
<img src="./img/5.png" alt="Alternate Text" />
<br /><br />
</fieldset>
<!--<fieldset id="clickLenard">
<legend>鼠标事件监听</legend>
</fieldset>-->
</div>
</body>
js代码部分：
<script type="text/javascript">
var x = 30, y = 16, zd = 99, xy = x * y;
var M = {};
var falg = false, start = true;
$(function () {
myclock();
var k = 1, t = zd, bool, count = 0;
var table = '<table border="1">';
for (var i = 0; i < y; i++) {
table += "<tr>"
for (var j = 0; j < x; j++) {
var num = Math.random() * xy;
num = parseInt(num, 10);
if (num > t) {
bool = k;//普通
xy--;
} else {
bool = -k;//雷
t--;
count++;
}
table += "<td id='" + (bool) + "'></td>";
k++;
};
table += "</tr>"
};
table += "</table>";
$("table").append(table);
$("td").addClass("load");
/*给所有方块注册鼠标进入事件，将背景变成黄色*/
$("td").mousemove(function () {
if ($(this).attr("class") == "load") {
$(this).addClass("move");
}
});
/*给所有方块注册鼠标移出事件，去除鼠标进入时的样式*/
$("td").mouseout(function () {
$(this).removeClass("move");
});
$("td").mousedown(function (e) {
if (falg == true) {
M.dialog13 = jqueryAlert({
'icon': './img/warning.png',
'content': '踩到雷了，游戏结束！',
'closeTime': 2000,
});
return false;
};
if (start == false) {
M.dialog13 = jqueryAlert({
'icon': './img/error.png',
'content': '请先点开始游戏！',
'closeTime': 2000,
});
return false;
}
console.log(e.which);
//右键为3
if (3 == e.which) {
var t = this.id;/*获取单击块的id*/
//右键的三种状态切换
if ($(this).attr("class").indexOf("qizi") >= 0) {
$(this).removeClass("qizi");
$(this).addClass("click");
}
else if ($(this).attr("class").indexOf("load") >= 0) {
$(this).removeClass("load");
$(this).addClass("qizi");
}
else if ($(this).attr("class").indexOf("click") >= 0) {
$(this).removeClass("click");
$(this).addClass("load");
}
} else if (1 == e.which) {//左键为1
/*获取单击块的id*/
var t = this.id;
//当t>0时不为雷，计算周围有几个雷，显示数字
if (t > 0) {
if ($(this).attr("class").indexOf("qizi") < 0) {
$(this).removeClass("load");
$(this).removeClass("move");
//计算周围有几个雷
var sum = checkCount(t);
$(this).text(sum);
}
} else {
if ($(this).attr("class").indexOf("qizi") < 0) {
//当t<0时,表示点到了炸弹，引爆所有的炸弹
$(this).removeClass("load");
$(this).addClass("zhadang");
falg = true;
M.dialog13 = jqueryAlert({
'icon': './img/warning.png',
'content': '踩到雷了，游戏结束！',
'closeTime': 2000,
});
//引爆.....所有炸弹
bobobo();
start = false;
myclock = null;
}
}
}
});
//阻止浏览器默认右键点击事件
$("table").bind("contextmenu", function () {
return false;
});
开始游戏，
$("#btnStart").click(function () {
location.reload();
})
});
//计算周围有几颗雷
function checkCount(id) {
//$("#clickLenard").append('<p>鼠标左键点击了：' + id + '</p>');
var arr = [-x - 1, -x, -x + 1, -1, 1, x - 1, x, x + 1];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
var temp = (parseInt(id) + arr[i]);
if (temp <= 0) continue;
if (temp > x * y) continue;
if (id % x == 1 && (i == 0 || i == 3 || i == 5)) continue;
if (id % x == 0 && (i == 2 || i == 4 || i == 7)) continue;
var a = $("#" + temp).length > 0 ? 0 : 1;
sum += a;
//$("#clickLenard").append('<p>周围：' + temp + "-->>" + a + "" + '</p>');
}
return sum;
}
//显示所有的地雷
function bobobo() {
for (var i = 1; i <= x * y;) {
var id = "#-" + i;
$(id).addClass("zhadang");
i++
}
}
/*计时开始*/
var times;
function myclock() {
var t = $("#time").val();
t = t.substring(0, t.length - 2);
t = 1 + Number(t) + 'ms';
$("#time").attr('value', t);
times = setTimeout("myclock()", 100);
}
</script>
CSS样式部分：
<style type="text/css">
body {
background-color: #272822;
color: #E6E6E6;
text-align: center;
}
table {
min-height: 25px;
line-height: 25px;
text-align: center;
border-color: #E6880A;
border-collapse: collapse;
border-width: 2px;
}
td {
cursor: pointer;
border-width: 1px;
width: 26px;
height: 26px;
}
.load {
background-image: url("./img/3.png");
}
div {
width: 820px;
margin: auto;
}
/*鼠标进入样式*/
.move {
background-image: url("./img/6.png");
}
/*鼠标单击左键-【不是雷】样式*/
.click {
background-image: url("./img/1.png");
}
/*鼠标单击右键-【插旗】样式*/
.qizi {
background-image: url("./img/5.png");
}
/*鼠标单击左键-【点炸弹了】样式*/
.zhadang {
background-image: url("./img/4.png");
}
input[type="number"] {
width: 45px;
}
</style>
游戏链接地址：http://www.bfsdfs.com/saolei/index.html
