扫雷网页游戏部分代码

效果案例图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="xiaonaihu" /><meta name="generator" content="HBuilder X" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>扫雷小游戏</title><link rel="stylesheet" href="index.css"></head>
<body><button id="restart">重新开始</button>
</body>
<script src="jquery.js"></script>
<script src="index.js"></script>
</html>

CSS代码

#tb{border: solid 1px black;border-collapse: collapse;margin: 0 auto;
}
.cell{width: 30px;height:30px;border: solid 1px black;background-size: 100% 100%;text-align: center;font-size: 20px;font-weight: bold;
}
.cell[state = "normal"]{background-image: url(blank.png);
}
/* .cell[bomb]{background-image: url(boom_ex.png);
} */.cell[state = "flag"]{background-image: url(flag.png);
}
.cell[state = "bombex"]{background-image: url(boom_ex.png);
}
.cell[state = "bombpl"]{background-image: url(boom_plain.png);
}
.cell[state = "b0"]{background-image: none;
}.cell[state="b1"]::before{content:"1";color:green;
}
.cell[state="b2"]::before{content:"2";color:blue;
}
.cell[state="b3"]::before{content:"3";color:red;
}
.cell[state="b4"]::before{content:"4";color:purple;
}
.cell[state="b5"]::before{content:"5";color:yellow;
}
.cell[state="b6"]::before{content:"6";color:pink;
}
.cell[state="b7"]::before{content:"7";color:orange;
}
.cell[state="b8"]::before{content:"8";color:black;
}

index.js代码

//行数
var rows = 20;
//列数
var cols = 20;
//雷数
var bomb = 40;
//存放所有tb的二维数组
var tds = [];
//记录游戏是否结束。
var isOver = false;
//创建扫雷表格
$("<table id = 'tb'></table>").appendTo($("body"));
for(var i = 0;i<rows;i++){var $tr = $("<tr></tr>");$tr.appendTo($("#tb"));var temp = [];for(var j = 0;j<cols;j++){var $td = $("<td></td>").attr("state","normal").addClass("cell").appendTo($tr);$td[0].y = i;$td[0].x = j;temp.push($td);}tds.push(temp);
}
console.log(tds);
//随机生成所有雷的位置
var nums = [];
for(var i = 0;i<rows*cols;i++){nums[i] = i;
}
for(var i = 0;i<bomb;i++){var ind = Math.floor(Math.random()*nums.length);var n = nums[ind];nums.splice(ind,1);var r = Math.floor(n/cols);var c = n%cols;//console.log("第"+r+"行","第"+c+"列");tds[r][c].attr("bomb","yes");
}
//屏蔽点击右键的弹出框
$(".cell").on("contextmenu",function(e){e.preventDefault();
})
//给所有的td绑定点击事件
$(".cell").on("mousedown",function(e){ if(isOver){return;}if(e.buttons==1){//console.log("左键");if($(this).attr("state")!="normal"){return;}if($(this).attr("bomb")=="yes"){$(this).attr("state","bombex");gameover($(this));}else{//$(this).attr("state","open");//console.log(bombsNearby($(this)));openGrid($(this));    if(checkWin()){alert("恭喜过关");isOver = true;}}}else if(e.buttons==2){//console.log("右键");if($(this).attr("state")=="normal"){$(this).attr("state","flag");}else{$(this).attr("state","normal");           }       }
});
//计算某个td周围有几颗雷
function bombsNearby($td){var nums = 0;//左上// var tx = $td.x-1;// var ty = $td.y-1;// if(tx>=0&&ty>0){//     if(tds[tx][ty].attr("bomb")=="yes"){//         nums++;//     }// }for(var i = $td[0].x-1;i<=$td[0].x+1;i++){for(var j = $td[0].y-1;j<=$td[0].y+1;j++){if(i==$td[0].xx && j==$td[0].y){continue;}if(i<0||i>=cols||j<0||j>=rows){continue;}if(tds[j][i].attr("bomb")=="yes"){nums++;}}}return nums;
}
//游戏失败函数
function gameover($td){for(var i = 0;i<rows;i++){for(var j = 0;j<cols;j++){if(tds[i][j].attr("bomb")=="yes"){tds[i][j].attr("state","bombpl")}}}$td.attr("state","bombex");alert("GAME OVER");isOver = true;
}
//打开某个格子的函数
function openGrid($td){var num = bombsNearby($td);$td.attr("state","b"+num);if(num==0){for(var i = $td[0].x-1;i<=$td[0].x+1;i++){for(var j = $td[0].y-1;j<=$td[0].y+1;j++){if(i==$td[0].xx && j==$td[0].y){continue;}if(i<0||i>=cols||j<0||j>=rows){continue;}if(tds[j][i].attr("state")=="normal"){openGrid(tds[j][i]);}}}}
}
//判断是否胜利的函数
function checkWin(){for(var i = 0;i<rows;i++){for(var j = 0;j<cols;j++){if(tds[i][j].attr("bomb")!="yes"&&tds[i][j].attr("state")=="normal"){return false;}}}return true;
}
$("#restart").on("click",function(){location.reload();
});

扫雷网页游戏部分代码相关推荐

网页游戏开发入门教程二（游戏模式+系统）
2019独角兽企业重金招聘Python工程师标准>>> 一.游戏模式目前webgame游戏模式大体上可以分为以下四类: 1.玩家拥有一个城市,不断的升级城市内建筑,建筑可以自动获得 ...
在SAP GUI中玩扫雷小游戏
在GUI中玩扫雷小游戏 ABAP代码: *&---------------------------------------------------------------------* *&a ...
python扫雷的代码及原理_基于Python实现的扫雷游戏实例代码
摘要:这篇Python开发技术栏目下的"基于Python实现的扫雷游戏实例代码",介绍的技术点是"Python实现.Python.实例代码.扫雷游戏.扫雷.游戏" ...
用C语言实现一个简单的扫雷小游戏（附全代码及教程）
本文实例为大家分享了C语言实现扫雷游戏的具体代码,供大家参考,具体内容如下: 首先,创建一个text.c文件: 编写主函数: int main() {test();return 0; } 定义test ...
C#，桌面游戏编程，编写制作《扫雷》游戏代码的实现——需求分析与总体架构设计
先看看<扫雷> 的思维导图,再看动画演示. 部分功能的动画演示,下面有更全的. 本文为<C#扫雷游戏开发实战>系列文章第三 1.C#,扫雷游戏(Minesweeper)之壹-- ...
C#，桌面游戏编程，编写制作《扫雷》游戏代码的准备知识——世界排名规则
本文为<C#扫雷游戏开发实战>系列文章第二 1.C#,扫雷游戏(Minesweeper)之壹--作弊手段大曝光 2.C#,扫雷游戏(Minesweeper)之贰--世界排名的规则知识 3. ...
贪食蛇php,贪吃蛇网页小游戏的代码
贪吃蛇网页小游戏的代码 ::selection { color:#FFFFFF; background:transparent; } ::-moz-selection { color:#FFFFFF; ...
【扫雷】小游戏 (C代码)
扫雷小游戏的设计与实现 1.前言 2.游戏的设计思路 3.游戏功能的具体实现 3.1 main()函数的设计与实现 3.2 game()函数的设计与实现 3.1.1init_board() 初始化函数 ...
PHP泡泡龙源码,JS泡泡龙游戏网页版+完整代码
网页游戏-泡泡龙 *{padding:0px;margin:0px} hr{width:2px;height:2px;} #a{width:502px;height:602px;border:1px ...

扫雷网页游戏部分代码

扫雷网页游戏部分代码相关推荐

最新文章

热门文章