- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title > 扫雷游戏 </title>
- <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
- <style>
- html,body{height: 100%;user-select: none;}
- span{margin: 0;padding: 0;}
- .box{
- position: relative;
- top: 50%;
- left: 50%;
- width: 400px;
- background: #eee;
- margin: -230px 0 0 -200px;
- padding: 10px;
- }
- </style>
- </head>
- <body>
- <div class="box" id="box"></div>
- <script>
- var blockWidth = 40; // 方块的宽度
- var thunderNum = 10; // 雷的数量
- var thunderArr = []; // 雷二维坐标数组
- var box = $('#box');
- var boxWidth = box.width();
- var boxHeight = box.height(); // 盒子及盒子的宽高
- var blockRow = boxWidth / blockWidth; // 行数
- var blockNum = blockRow * blockRow; // 方块数
- /* 创建盒子 */
- function creatBox(){
- var blockCss = {
- 'display':'inline-block','width': blockWidth + 'px',
- 'height': blockWidth+ 'px','line-height': blockWidth + 'px',
- 'text-align':'center','border': '1px solid','color':'#f0e7d7',
- 'border-color': '#ffe #aaab9c #ccc #fff','background':'#f0e7d7',
- 'box-sizing':'border-box', 'cursor':'pointer'
- }
- for(var i = 1;i <= blockNum;i++){
- var span = $('<span class="block"></span>');
- span.css(blockCss);
- span.attr('id',i);
- span.text('*');
- box.append(span);
- span.click(clickIt); // 扫雷
- }
- }
- /* 随机生成雷 */
- function creatThunder(){
- for(var i = 0;i <thunderNum;i++){
- var x = Math.ceil(getRandomNum(1,blockRow));
- var y = Math.ceil(getRandomNum(1,blockRow));
- var a = [x,y];
- thunderArr.push(a);
- }
- }
- /* 扫雷 */
- function clickIt(id){
- var restStep = $('span').text().split("*").length - 1;
- if(restStep<=thunderNum){
- showAllThunder();
- setTimeout(function(){
- alert('少年, 你真是太厉害了!');
- init();
- },100);
- }else{
- var _this;
- if(!isNaN(id)){
- _this = '#' + id;
- i = id;
- }else{
- _this = $(this);
- i = $(_this).index() + 1;
- }
- var x = Math.ceil( i / blockRow );
- var y;
- if(i%blockRow == 0){y = blockRow;}
- else{ y = i%blockRow;}
- var blockArr = [x,y];
- $(_this).css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'rgb(222, 212, 196)',
- 'color':'#666'
- });
- if(isThunder(blockArr,thunderArr)){
- boom(_this); // 踩雷
- }else{
- var num = promptThunder(x,y);
- if(num==0){
- safe(i); // 展示周围安全区
- }
- $(_this).text(num); // 周边数量提示
- }
- }
- }
- /* 判读是否有雷 */
- function isThunder(blockArr,thunderArr){
- var sign = false;
- $.each(thunderArr,function(i,v){
- if(blockArr[0]==v[0]&&blockArr[1]==v[1]){
- sign = true;
- }
- });
- return sign;
- }
- /* 周边雷的数量提示 */
- function promptThunder(x,y){
- var num = 0;
- var aroundArr = [];
- aroundArr[0] = [x-1,y];
- aroundArr[1] = [x-1,y-1];
- aroundArr[2] = [x,y-1];
- aroundArr[3] = [x+1,y-1];
- aroundArr[4] = [x+1,y];
- aroundArr[5] = [x+1,y+1];
- aroundArr[6] = [x,y+1];
- aroundArr[7] = [x-1,y+1];
- for(var i=0;i<8;i++){
- if(isThunder(aroundArr[i],thunderArr)){
- num++;
- }
- }
- return num;
- }
- /* 安全区展示 */
- function safe(i){
- var aroundArr = [];
- aroundArr[0] = i - blockRow;
- aroundArr[1] = i - 1;
- $.each(aroundArr,function(i,v){
- if(v>0){
- clickIt(v);
- }
- });
- }
- /* 踩雷 */
- function boom(_this){
- showAllThunder();
- $(_this).css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'red'
- });
- $(_this).text('');
- setTimeout(function(){
- alert('少年, 请重新来过.');
- init();
- },100);
- }
- /* 展示所有雷 */
- function showAllThunder(){
- $('span').css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'rgb(222, 212, 196)'
- });
- $.each(thunderArr,function(i,v){
- var i = (v[1]-1)*blockRow + v[0];
- $('#'+i).text('');
- })
- }
- /* 生成随机数 */
- function getRandomNum(min,max){
- if(arguments.length <2) {
- var max = min;
- return Math.random()*max;
- }else{
- return Math.random()*(max-min) + min;
- }
- }
- /* 初始化 */
- function init(){
- $('#box').empty();
- thunderArr = [];
- creatThunder();
- creatBox();
- }
- init();
- </script>
- </body>
- </html>
1, 创建盒子
- function creatBox(){
- var blockCss = {
- 'display':'inline-block','width': blockWidth + 'px',
- 'height': blockWidth+ 'px','line-height': blockWidth + 'px',
- 'text-align':'center','border': '1px solid','color':'#f0e7d7',
- 'border-color': '#ffe #aaab9c #ccc #fff','background':'#f0e7d7',
- 'box-sizing':'border-box', 'cursor':'pointer'
- }
- for(var i = 1;i <= blockNum;i++){
- var span = $('<span class="block"></span>');
- span.css(blockCss);
- span.attr('id',i);
- span.text('*');
- box.append(span);
- span.click(clickIt); // 扫雷
- }
- }
2, 随机生成雷, 也就是埋雷
- function creatThunder(){
- for(var i = 0;i <thunderNum;i++){
- var x = Math.ceil(getRandomNum(1,blockRow));
- var y = Math.ceil(getRandomNum(1,blockRow));
- var a = [x,y];
- thunderArr.push(a);
- }
- }
3, 点击方块, 开始游戏
- function clickIt(id){
- var _this;
- if(!isNaN(id)){
- _this = '#' + id;
- i = id;
- }else{
- _this = $(this);
- i = $(_this).index() + 1;
- }
- var x = Math.ceil( i / blockRow );
- var y;
- if(i%blockRow == 0){y = blockRow;}
- else{ y = i%blockRow;}
- var blockArr = [x,y];
- $(_this).css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'rgb(222, 212, 196)',
- 'color':'#666'
- });
- if(isThunder(blockArr,thunderArr)){
- boom(_this); // 踩雷
- }else{
- var num = promptThunder(x,y);
- if(num==0){
- safe(i); // 展示周围安全区
- }
- $(_this).text(num); // 周边数量提示
- }
- }
4, 判断当前点击方块, 是否有雷 (对比存放雷的二维数组)
- function isThunder(blockArr,thunderArr){
- var sign = false;
- $.each(thunderArr,function(i,v){
- if(blockArr[0]==v[0]&&blockArr[1]==v[1]){
- sign = true;
- }
- });
- return sign;
- }
5, 如果没有雷要在方块里显示周围雷的数量 (找了当前方块周围的 8 个方块与存雷的二维数组对比)
- function promptThunder(x,y){
- var num = 0;
- var aroundArr = [];
- aroundArr[0] = [x-1,y];
- aroundArr[1] = [x-1,y-1];
- aroundArr[2] = [x,y-1];
- aroundArr[3] = [x+1,y-1];
- aroundArr[4] = [x+1,y];
- aroundArr[5] = [x+1,y+1];
- aroundArr[6] = [x,y+1];
- aroundArr[7] = [x-1,y+1];
- for(var i=0;i<8;i++){
- if(isThunder(aroundArr[i],thunderArr)){
- num++;
- }
- }
- return num;
- }
6, 如果周边没有雷, 则显示周边的安全区域 (这里我只判断了左上和上两个位置, 本来想判断 8 个位置的, 可是迭代太厉害了)
- function safe(i){
- var aroundArr = [];
- aroundArr[0] = i - blockRow;
- aroundArr[1] = i - 1;
- $.each(aroundArr,function(i,v){
- if(v>0){
- clickIt(v);
- }
- });
- }
7, 踩到雷以后的展示
- function boom(_this){
- showAllThunder();
- $(_this).css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'red'
- });
- $(_this).text('');
- setTimeout(function(){
- alert('少年, 请重新来过.');
- window.location.reload();
- },100);
- }
8, 踩到雷以后, 把所有雷展示出来
- function showAllThunder(){
- $('span').css({
- 'border-color':'#aaab9c #ffe #fff #ccc',
- 'background':'rgb(222, 212, 196)'
- });
- $.each(thunderArr,function(i,v){
- var i = (v[1]-1)*blockRow + v[0];
- $('#'+i).text('');
- })
- }
来源: http://www.qdfuns.com/article/44817/49db2bfe49e7fc41ffe6f20190c879e9.html