简介
耗时大半天写完
只是非常简单的实现 一些功能没有添加
遇到的不会知识点
写后记录 没有顺序 真正比这多 因为浏览器的js jQuery手册就灭关过
- 方法参数中传递方法
- 判断二维数组是否存在一个数组
- class的删除和添加
addClass()removeClass() - 鼠标右击事件
.contextmenu()需要关闭默认e.preventDefault() .forEach()跳出循环.还是不会…
遇到的问题
因为是写完了总结 无顺序 而且有的想不到了
- 点击到雷后显示所有雷,每次总少显示一个雷 原因:未知 按逻辑原本也是可以的 但是改了现在的写法可以
- 点击到空白时候显示周围的格子,进入点击事件进入死循环 原因:加入无效列表位置放的不对
judge()方法中有两个f()忘写arrjudge()方法一开始是直接写在生成数字里面的,但是当写到空白格显示时也需要几乎相等的边缘判断,所以进行了封装,当时还不会方法参数中传方法- 好几次因为判断写的不生效,导致判断内的的代码无效,如 有个判断
二维数组.includes(数组)无效 又封装了一个isExist()方法 - jquery 的选择器中使用变量传值,依旧没学会.使用了比较麻烦的方法. 如:点击到空白时需要得到周围八个
.atom的元素对象 - 鼠标右击事件判断class时 少写了
atom
代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>扫雷</title>
<script src="js/jquery-3.6.0.js"></script>
</head>
<style>
.background {
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 10px;
width: 225px;
height: 225px;
border: 6px solid #c2c2c2;
/*background-color: #828282;*/
}
.row {
height: 25px;
}
.atom {
float: left;
width: 25px;
height: 25px;
}
.blank {
background: url("data:img/gif;base64,R0lGODlhGQAZAKIAAM7OzsbGxr6+vra2trKysqampoKCggAAACH5BAAHAP8ALAAAAAAZABkAAANHaLrc3mWQSau9xAwQuv9gGBhEIJxoqq4CabLw6sY0Otf0jcP6Lpc+HjD4exFTvWNrqDwlj09iNDj1VXdXXLa2zTGb3VgYlgAAOw==");
}
.landmine {
background: url("data:img/gif;base64,R0lGODlhGQAZAJEAAP///76+voKCggAAACH5BAAHAP8ALAAAAAAZABkAAAJglI+py70Bo5wUmhrHwPFyzVlCCIYeBGqqik5nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OBSQ4yv6/aQAADs=");
}
.eLandmine {
background: url("data:img/gif;base64,R0lGODlhGQAZAJEAAP///4CAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJgjI+py70Co5wUmhrHwPFyzVlBCIYeBGqqik6nkK4s7I6TjFOvCvR42bGhND3AbyPZEX2/GuwILV2iUZGEOgtesUhthuu8VcNbqE74fOZoSTQFiHm9u3G3OCSQ4yv6/aQAADs=");
}
.barrier {
background: url("data:img/gif;base64,R0lGODlhGQAZAJEAAP///8DAwICAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJKhI+pFrH/GpwnCFGb3nxfzHQi92XjWYbnmAIrepkvGauzV7s3Deq71vrhekJgrtgIIpVFptD5g+6kN+osZflot9xPsgvufsPkSwEAOw==");
}
.flag {
background: url(data:img/gif;base64,R0lGODlhGQAZAKIAAP///8DAwICAgP8AAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAANsCLrcriG8OSO9KwiRo//gt3FQaIJjZw7DmZYh25ovEMtzWH+47G6qno8GhAWEOVTRBur9SMxbUrQ8BQiEpyqE1RpBXSLUGtZVI9i0Wu3ZodfwbMR9ja/bZ6s3qjeTNCOBgoMjc4SHhIaIixsJADs=);
}
.num1 {
background: url("data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAA/wAAACH5BAAHAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuLIRC9lFiSAbZOWqqybZVCcWoC8fpeu5gj/uJfBUWMXebvYpAJdJGoQFsTc8yQh1OpJ3otesEH8XbLzlSAAA7");
}
.num2 {
background: url(data:img/gif;base64,R0lGODlhGQAZALMAAMDAwKu5q6i4qKW3pZy0nJaylpCwkIquioCAgACAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAReEMlJq704X8C7/yAnhSQ5lmh3cknrvi64wvT7zXV9I50N+ipeihXzrFACoEhYMtB2pSSsIGN6CrRBIHQEEGjb0pEmGOJch+Gyl3samW13kB0vztViKx665+r7a4AfEQA7);
}
.num3 {
background: url(data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgP8AAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiOFIfiZbSmabT16le0EWyRdeg+OZTGzL5JECBsFI86m4AGIfpzEB9RVLPVuWtqFnjVZeJgmdjzbBMRk8KADs=);
}
.num4 {
background: url(data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgAAAmQAAgCH5BAAHAP8ALAAAAAAZABkAAAJdjI+py70Ao5wUmorxzTzuOgjAQJLUN5FiaU5oVK7sGVAxxA50Gor47KrBVJLc7hfilY6jnHMp+TynwYjgisXmfB4hx1jtgKPezLjbaULJ6bOlnK684mG6HG5H5ykFADs=);
}
.num5 {
background: url(data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgIAAAAAAACH5BAQUAP8ALAAAAAAZABkAAAJOjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2oodDKmzx9bybeWgW6L9gDZcjLgz3oo9HhPw6TxPyGRTVxUIs1ohjxL9SsLia3nsO0MKADs=);
}
.num6 {
background: url(data:img/gif;base64,R0lGODlhGQAZAJEAAMDAwICAgACAgAAAACH5BAQUAP8ALAAAAAAZABkAAAJTjI+py70Ao5wUmorxzTxuKITiKFIfiZbTmaJmEI3dCoPqbNWAjOdxS3r9gDyPjhiUsEKVos/GpDgBS0Hz9twhsdTjNmqUfIU9ja5MQ1c+6nBbUgAAOw==);
}
.num7 {
background: url(data:img/gif;base64,R0lGODlhGQAZAJEAAL6+voKCggAAAAAAACH5BAAHAP8ALAAAAAAZABkAAAJMjI+py70Ao5wUmorxzTxuIITiSE4fiY5mEKXu2rUiHIOz9HElznY771NRcpQfrWI8TpJK2S1DtD2hPWeoRhTGojVgV1P9NsWWMBlSAAA7);
}
.num8 {
background: url(data:img/gif;base64,R0lGODlhGQAZAIAAAMDAwICAgCH5BAQUAP8ALAAAAAAZABkAAAJKjI+py70Ao5wUmorxzTxu63xeMIYi8JnHlK4UwpLgOctjaUuwnqtvb/rxQsJaZXcz/k4tGsqVfPp4OCK1yih2OM7t1avJgWNjTAEAOw==);
}
</style>
<body>
<div class="background">
</div>
<script>
//记录点击后的数组 左击后的再点击无效
var invalid = new Array();
//记录地雷位置
var landmine = new Array();
//记录每一个atom中的数字 key:位置数组[.row索引,.atom索引]
var number = new Map();
var gameOver = false;
//生成盒子 并且遮罩
for (var i = 0; i < 9; i++) {
$('.background').prepend('<div class="row"></div>')
for (var j = 0; j < 9; j++) {
var r = 8 - i;
$('.row:eq(0)').append('<div id="' + r + ',' + j + '" class="atom barrier"></div>')
}
}
//0~8的随机数
function random() {
return Math.floor(Math.random() * 9);
}
//生成10个地雷
while (landmine.length < 10) {
var flag = true;
var row = random();
var col = random();
var len = landmine.length;
if (len !== 0) {
for (var i = 0; i < landmine.length; i++) {
var r = landmine[i][0];
var c = landmine[i][1];
if (r === row && c === col) {
flag = false;
}
}
}
if (flag) {
landmine.push([row, col]);
}
}
//判断一个数组是否存在于一个二维数组 arr1:二维数组
function isExist(arr1, arr2) {
for (var i = 0; i < arr1.length; i++) {
if (arr1[i].toString() === arr2.toString()) {
return true;
}
}
}
//生成数字
for (var i = 0; i < 9; i++) {
for (var j = 0; j < 9; j++) {
//判断如果是雷直接跳出循环;
if (isExist(landmine, [i, j])) {
continue;
}
//判断是否顶行或低行
var num = 0;
judge(i, j, function () {
num++;
})
number.set([i, j], num);
}
}
//判断是否挨边 i:.row索引 j:.atom索引 f:实行的函数 ju:判断是生成数字使用还是点击空白格显示使用
function judge(i, j, f, ju) {
if (ju === undefined) {
ju = true;
}
var a = [
[i - 1, j - 1], [i - 1, j], [i - 1, j + 1],
[i, j - 1], [i, j], [i, j + 1],
[i + 1, j - 1], [i + 1, j], [i + 1, j + 1],
];
//判断是否顶行或低行
if (i === 0) {
//判断是否左列或右列
if (j === 0) {
if (ju) {
if (isExist(landmine, a[5])) {
f();
}
if (isExist(landmine, a[7])) {
f();
}
if (isExist(landmine, a[8])) {
f();
}
} else {
var arr = [a[5], a[7], a[8]];
f(arr);
}
} else if (j === 8) {
if (ju) {
if (isExist(landmine, a[3])) {
f();
}
if (isExist(landmine, a[6])) {
f();
}
if (isExist(landmine, a[7])) {
f();
}
} else {
var arr = [a[3], a[6], a[7]];
f(arr);
}
} else {
if (ju) {
a.forEach(function (value, index) {
if (value[0] !== i - 1) {
if (isExist(landmine, a[index])) {
f();
}
}
});
} else {
var arr = [a[3], a[5], a[6], a[7], a[8]]
f(arr);
}
}
} else if (i === 8) {
if (j === 0) {
if (ju) {
if (isExist(landmine, a[1])) {
f();
}
if (isExist(landmine, a[2])) {
f();
}
if (isExist(landmine, a[5])) {
f();
}
} else {
var arr = [a[1], a[2], a[5]];
f(arr);
}
} else if (j === 8) {
if (ju) {
if (isExist(landmine, a[0])) {
f();
}
if (isExist(landmine, a[1])) {
f();
}
if (isExist(landmine, a[3])) {
f();
}
} else {
var arr = [a[0], a[1], a[3]];
f(arr);
}
} else {
if (ju) {
a.forEach(function (value, index) {
if (value[0] !== i + 1) {
if (isExist(landmine, a[index])) {
f();
}
}
});
} else {
var arr = [a[0], a[1], a[2], a[3], a[5]]
f(arr);
}
}
} else {
if (ju) {
a.forEach(function (value, index) {
if (isExist(landmine, a[index])) {
f();
}
});
} else {
f(a);
}
}
}
//左击事件
$('.atom').click(function () {
//判断游戏是否已经结束
if (gameOver) {
return;
}
//判断是否失效了
var r = $(this).parent().index();
var c = $(this).index();
if (isExist(invalid, [r, c])) {
return;
}
//判断是否是旗子
var fl = $(this).attr('class');
if (fl === 'atom flag') {
return;
}
//添加失效
invalid.push([r, c]);
$(this).removeClass('barrier');
//判断是否是雷 如果是雷 显示所有雷 并结束游戏
if (isExist(landmine, [r, c])) {
landmine.forEach(function (value) {
console.log('l');
var lr = value[0];
var lc = value[1];
var rows = $('.row');
var atoms = $(rows[lr]).children();
$(atoms[lc]).removeClass('barrier').addClass('landmine');
})
//修改前 这句在第一句,然后遍历landmine数组,排除于r,c相等的,但是会少显示一个雷,不知道原因.
$(this).removeClass('landmine').addClass('eLandmine');
gameOver = true;
} else {
//判断是否是数字
var num = 0;
number.forEach(function (value, key) {
var k = key.toString();
var ke = r + ',' + c;
if (k === ke) {
num = value;
}
})
switch (num) {
case 0:
$(this).addClass('blank');
judge(r, c, function (arr) {
arr.forEach(function (value) {
var r = value[0];
var c = value[1];
var rows = $('.row');
var atoms = $(rows[r]).children();
if (!isExist(invalid, [r, c])) {
$(atoms[c]).trigger('click');
}
});
}, false);
break;
case 1:
$(this).addClass('num1');
break;
case 2:
$(this).addClass('num2');
break;
case 3:
$(this).addClass('num3');
break;
case 4:
$(this).addClass('num4');
break;
case 5:
$(this).addClass('num5');
break;
case 6:
$(this).addClass('num6');
break;
case 7:
$(this).addClass('num7');
break;
case 8:
$(this).addClass('num8');
break;
}
}
//判断游戏是否结束
console.log(invalid)
if (invalid.length === 71) {
gameOver=true;
alert('恭喜');
}
})
//右击事件
$('.atom').contextmenu(function (e) {
e.preventDefault();//关闭默认 也就是菜单
var c = $(this).attr('class');
if(c==='atom barrier'){
$(this).removeClass('barrier').addClass('flag');
}else{
$(this).removeClass('flag').addClass('barrier');
}
})
</script>
</body>
</html>
3514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
