本文主要包含h5，游戏，实例等相关知识,匿名希望在学习及工作中可以帮助到您
闲的没事 写个扫雷， 算法 不太好·····凑合，还真的不错，可以看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扫雷</title>
</head>
<body>
<script>
function Set(r,c,hard){
var data = new Array();
for(var i=0;i<r;i++){data[i]=new Array(c);}
for (var i = 0; i < r*c; i++)
{
var ran=Math.floor(Math.random()*100);
data[Math.floor(i / c)][i % c] =ran<hard?1:0;
}
return data;
}
function GetNewData(data,r,c){
var newdata = new Array();
for(var i=0;i<r;i++){newdata[i]=new Array(c);}
for (var i = 0; i < r * c; i++)
{
if (data[Math.floor(i / c)][i % c] == 1)
{
newdata[Math.floor(i / c)][i % c] = 9;
}
else
{
var d = 0;
for (var j = 0; j < 9; j++)
{
if (Math.floor(i / c) + (Math.floor(j / 3) - 1)>=0 && i % c + (j % 3 - 1) >= 0 &&
Math.floor(i / c) + (Math.floor(j / 3) - 1) < r && i % c + (j % 3 - 1) < c &&
data[Math.floor(i / c) + Math.floor(j / 3 - 1)][i % c + (j % 3 - 1)] == 1)
{
d++;
}
}
newdata[Math.floor(i / c)][i % c] = d;
}
}
return newdata;
}
function GetRegion(rr,cc,data,list){
if (data[rr][cc]!=0)
{
return;
}
else
{
for (var j = 0; j < 9; j++)
{
if (rr+ (Math.floor(j / 3) - 1)>=0 && cc + (j % 3 - 1) >= 0 &&
rr + (Math.floor(j / 3) - 1) < r && cc + (j % 3 - 1) < c &&
data[rr+ Math.floor(j / 3 - 1)][cc+ (j % 3 - 1)] == 0)
{
var pr=rr+ Math.floor(j / 3 - 1);
var pc=cc+ (j % 3 - 1);
console.log(pr,pc);
if(contains(list,{r:pr,c:pc}))continue;
list.push({r:pr,c:pc});
GetRegion(pr,pc,data,list);
}
}
return;
}
}
</script>
<!--<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=22654542&auto=1&height=66"></iframe>-->
<h2>扫雷游戏</h2>
<!--<audio src="http://music.163.com/style/swf/widget.swf?sid=26569168" controls="controls"></audio>-->
<p>难度:
<select NAME="Difficulty" onchange="load(this.value)" id="Difficulty">
<option value></option>
<option value="1" selected="selected">初9*9</option>
<option value="2" >中16*16</option>
<option value="3">高30*16</option>
</select>
<button onclick="timedCount()">开始</button>
<button onclick="stop()">停止</button>
<button onclick="reload()">重置</button>
<button onclick="Drawall()">显示所有</button>
<input type="text" readonly="readonly" id="time">
</p>
<p>
<canvas id="myCanvas" oncontextmenu=self.event.returnvalue=false width="180" height="180" style="border:1px solid #000000;background:lightgray;"></canvas>
</p>
<script>
var r=9;//99 1616 3016
var c=9;
var difficulty=15
var tempdata;
var minedata;
var signdata = new Array();
var checkSigndata=new Array
document.write("<br/>");
var Difficulty=document.getElementById("Difficulty");
Difficulty.options[1].selected = true;
var canvas=document.getElementById("myCanvas");
canvas.addEventListener("mousedown", doMouseDown, false);
canvas.oncontextmenu=function(){return false;}
load(1);
redraw();
//test();
//Drawall();
var t;
var tick=0;
function timedCount(){
document.getElementById('time').value=tick
tick=tick+1
t=setTimeout("timedCount()",1000)
}
function stop(){
if(t!=null)clearTimeout(t);
tick=0;
}
function loadsigndata(){
for(var i=0;i<r;i++){signdata[i]=new Array(c);}
for(var i=0;i<r;i++){checkSigndata[i]=new Array(c); }
for (var i = 0; i < r*c; i++)
{
switch(minedata[Math.floor(i / c)][i % c])
{
case 9:checkSigndata[Math.floor(i / c)][i % c]=2;
break;
case 0:checkSigndata[Math.floor(i / c)][i % c]=3;
break;
default:checkSigndata[Math.floor(i / c)][i % c]=1;
break;
}
}
}
function test(){
for (var i = 0; i < r*c; i++)
{
document.write(minedata[Math.floor(i / c)][i % c]+" ");
if(i%c==c-1)document.write("<br/>");
}
}
function load(v){
switch(parseInt(v))
{
case 1:
r=9;
c=9;
break;
case 2:
r=16;
c=16;
break;
case 3:
r=30;
c=16;
break;
}
reload();
//Drawall();
}
function reload(){
redraw();
tempdata=Set(r,c,difficulty);
minedata=GetNewData(tempdata,r,c);
loadsigndata();
}
function redraw(){
canvas.setAttribute('width',c*30);
canvas.setAttribute('height',r*30);
var ctx=canvas.getContext("2d");
for(var i=0;i<r+1;i++)
{
ctx.moveTo(0,i*30);
ctx.lineTo(c*30,i*30);
ctx.stroke();
}
for(var i=0;i<c+1;i++)
{
ctx.moveTo(i*30,0);
ctx.lineTo(i*30,r*30);
ctx.stroke();
}
}
function contains(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i].r==obj.r&&arr[i].c==obj.c) {
return true;
}
}
return false;
}
var plist=new Array();
function doMouseDown(event){
var btnNum = event.button;
var x = event.pageX;
var y = event.pageY;
var lo