实例介绍
【实例简介】
【实例截图】
【核心代码】
<!doctype html>
<html>
<!--Made By 黄少露
QQ:534144977
-->
<head>
<script type="text/javascript">
</script>
</head>
<body oncontextmenu="return false">
<div style="position:relative;width:1000px;height:600px;float:left">
<canvas id="pad" width="1000" height="600" style="position:absolute;left:0px;top:0px;border:1px #aaa solid"></canvas>
</div>
<div style="float:left;width:250px;height:600px;border:1px solid #aaa">
<h1 align=center>扫雷</h1>
<br>
<table width=100%>
<tr align="center">
<td>10*10  (bombers*20)</td><td><input type="button" id="mod1" value="选择" onclick="init(10,10,20);"/></td>
</tr>
<tr align="center">
<td>20*10  (bombers*60)</td><td><input type="button" id="mod2" value="选择" onclick="init(15,20,60);"/></td>
</tr>
<tr align="center">
<td>30*20  (bombers*100)</td><td><input type="button" id="mod3" value="选择" onclick="init(20,30,100);"/></td>
</tr>
</table>
<br>
<fieldset>
<legend>自定义</legend>
列数: <input type="text" id="cols"/ value="20"><br />
行数: <input type="text" id="rows"/ value="10"><br />
炸弹数：<input type="text" id="bomber" size="15" value="50"><br/>
<input type="button" value="确定" id="custom"/>
</fieldset>
<table>
<tr>
<td>时间：</td><td><input type="text" id="time" value="0" readonly="true" style="border:none"/></td>
</tr>
<tr>
<td>雷数：</td><td><input type="text" id="bomberNum" readonly="true" style="border:none"/></td>
</tr>
</table>
<br>
<hr>
<br>
<div width="100px" align="center">
有问题人的欢迎Q我：
<br>
<br>
绝地武士 534144977
</div>
</div>
<script type="text/javascript">
window.onload =function()
{
init(15,20,40);
}
var $id=function(o){return document.getElementById(o)};
var s;
var youGuess; //你认为剩余的炸弹数
var bombNum;
function timePass() //显示时间
{
$id("time").value=Number($id("time").value) 1;
}
$id("cols").onblur=function() //数据验证
{
if(!isNaN($id("cols").value))
{
if(Number($id("cols").value)>30||Number($id("cols").value)<0)
{
alert("数字必须在0~30之间");
$id("cols").value="20";
}
}
else
{
alert("不是数字");
$id("cols").value="20";
}
}
$id("rows").onblur=function() //数据验证
{
if(!isNaN($id("rows").value))
{
if(Number($id("rows").value)>20||Number($id("rows").value)<0)
{
alert("数字必须在0~20之间");
$id("rows").value="10";
}
}
else
{
alert("不是数字");
$id("rows").value="10";
}
}
$id("bomber").onblur=function() //数据验证
{
if(!isNaN($id("bomber").value))
{
if(Number($id("bomber").value)>Number($id("rows").value)*Number($id("cols").value)*0.85||Number($id("bomber").value)<0)
{
alert("数字必须在0~" Number($id("rows").value)*Number($id("cols").value)*0.85 "之间");
$id("bomber").value="50";
}
}
else
{
alert("不是数字");
$id("bomber").value="50";
}
}
$id("custom").onclick=function(){ //自定义初值
init(Number($id("rows").value),Number($id("cols").value),Number($id("bomber").value));
};
var nowI=-1,nowJ=-1,preI=-1,preJ=-1;
function init(rows,cols,bomb) //初始化
{
/*var rows=15; //行数
var cols=20; //列数
var bombNum=10;//炸弹数 */
bombNum=bomb;
clearInterval(s); //清除上次的时间
$id("time").value=0; //使时间变为0
s=setInterval(timePass,1000);
$id("bomberNum").value=bombNum;
var gameData=new doubleArray(rows,cols); //数据初始化，得到炸弹的位置
var i=bombNum;
while(i>0)
{
var roundNum=Math.ceil(Math.random()*rows*cols);
if(Math.floor(roundNum/cols)==roundNum/cols)
var tmpX=Math.floor(roundNum/cols)-1;
else
var tmpX=Math.floor(roundNum/cols);
var tmpY=roundNum-tmpX*cols-1;
if(gameData[tmpX][tmpY]!=-1)
{
gameData[tmpX][tmpY]=-1;
i--;
}
}
for(var i=0;i<rows;i ) //初始化除了炸弹之外的数据
{
for(var j=0;j<cols;j )
{
//alert(gameData[i][j]);
if(gameData[i][j]!=-1)
{
gameData[i][j]=(exist(gameData,i-1,j-1)==1?1:0) (exist(gameData,i-1,j)==1?1:0) (exist(gameData,i-1,j 1)==1?1:0) (exist(gameData,i,j-1)==1?1:0) (exist(gameData,i,j 1)==1?1:0) (exist(gameData,i 1,j-1)==1?1:0) (exist(gameData,i 1,j)==1?1:0) (exist(gameData,i 1,j 1)==1?1:0);
}
}
}
//alert((500-15*cols) " " (300-15*rows));
var ctx=$id("pad").getContext("2d");
ctx.restore();
ctx.clearRect(0,0,1000,600);
ctx.save();
ctx.translate(500-15*cols,300-15*rows);
ctx.beginPath();//开始画棋盘
ctx.fillRect(0,0,30*cols,30*rows);
gameStart(ctx,gameData); //游戏开始
}
function gameStart(ctx,gameData)
{
var rows=gameData.length;
var cols=gameData[0].length;
var placeState=new doubleArray(rows,cols); //各个点的状态（翻转与否）
for(var i=0;i<rows;i ) //初始化
{
for(var j=0;j<cols;j )
{
placeState[i][j]="0";
}
}
var markState=new doubleArray(rows,cols); //各个点的状态（标记与否）
for(var i=0;i<rows;i ) //初始化
{
for(var j=0;j<cols;j )
{
markState[i][j]=0;
}
}
for(var i=0;i<rows;i ) //完全初始化
{
for(var j=0;j<cols;j )
{
startPrint(ctx,gameData,i,j);
}
}
$id("pad").onmousemove=function(e) //移动模拟
{
havor(ctx,gameData,placeState,e.offsetX,e.offsetY);
}
$id("pad").onmousedown=function(e) //按键模拟
{
if(e.button==0)
{
show(ctx,gameData,placeState,e.offsetX,e.offsetY);
}
else
{
addMark(ctx,gameData,placeState,markState,e.offsetX,e.offsetY);
}
}
}
function show(ctx,gameData,placeState,x,y) //点击之后显示的结果（将坐标值转化为确定的下标）
{
var rows=gameData.length;
var cols=gameData[0].length;
if(x>500-15*cols&&y>300-15*rows&&x<500 15*cols&&y<300 15*rows)
{
findSpace(ctx,gameData,placeState,Math.floor((y-(300-15*rows))/30),Math.floor((x-(500-15*cols))/30));
}
}
function findSpace(ctx,gameData,placeState,x,y) //寻找可以一起翻开的空格
{
//x,y是指整数位置
//alert("x=" x " y=" y);
var rows=gameData.length;
var cols=gameData[0].length;
var X=y*30;
var Y=x*30;
//X,Y是标准的坐标偏移量
ctx.fillStyle="rgb(189,199,224)";
ctx.fillRect(X,Y,29,29);
placeState[x][y]="1";
var tmp=gameData[x][y];
switch(tmp)
{
case 1:ctx.fillStyle = "rgb(60,80,182)";break;
case 2:ctx.fillStyle = "rgb(35,100,6)";break;
case 3:ctx.fillStyle = "rgb(174,4,9)";break;
case 4:ctx.fillStyle = "rgb(8,8,130)";break;
case 5:ctx.fillStyle = "rgb(95,12,18)";break;
case 6:ctx.fillStyle = "rgb(255,128,0)";break;
case 7:ctx.fillStyle = "rgb(152,33,254)";break;
case 8:ctx.fillStyle = "rgb(51,84,62)";break;
}
if(tmp==-1)
{
for(var i=0;i<rows;i )
{
for(var j=0;j<cols;j )
{
addBomber(ctx,gameData,i,j);
}
}
clearInterval(s);
if(confirm("很遗憾你输了，要重来一盘吗？")==true)
init(15,20,40)
return false;
}
else
{
ctx.font ="28px Adobe Gothic Std B";
ctx.fillText(tmp,X 7,Y 23);
}
for(var i=-1;i<=1;i )
{
for(var j=-1;j<=1;j )
{
if(i!=0||j!=0)
{
if(exist(gameData,x i,y j)!="notexist")
{
if(exist(gameData,x,y)!=0)
{
if(placeState[x i][y j]=="0")
{
findSpace(ctx,gameData,placeState,x i,y j);
}
}
else
{
if(placeState[x i][y j]=="0"&&exist(gameData,x i,y j)=="none")
{
findSpace(ctx,gameData,placeState,x i,y j);
}
}
}
}
}
}
return false;
}
function addBomber(ctx,gameData,i,j)//添加炸弹
{
var rows=gameData.length;
var cols=gameData[0].length;
ctx.fillStyle="red";
ctx.save();
ctx.translate(j*30,i*30);
if(gameData[i][j]==-1)
{
ctx.save();
ctx.shadowOffsetX=2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.translate(15,15);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,false);
ctx.fill();
ctx.restore();
}
ctx.restore();
}
function addMark(ctx,gameData,placeState,markState,x,y) //添加标记
{
//alert("x=" x " y=" y);
var rows=gameData.length;
var cols=gameData[0].length;
var i=Math.floor((y-(300-15*rows))/30);
var j=Math.floor((x-(500-15*cols))/30);
ctx.fillStyle="green";
ctx.save();
ctx.shadowOffsetX=2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.translate(j*30,i*30);
if(placeState[i][j]=="0")
{
ctx.translate(15,15);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,false);
ctx.fill();
}
ctx.restore();
placeState[i][j]="1";
//markState[i][j]=1;
if(gameData[i][j]==-1)
{
bombNum--;
}
if(bombNum==0)
{
clearInterval(s);
if(confirm("你赢了！！你的用时是：" $id("time").value "秒 \n要重来一盘吗？")==true)
init(15,20,40)
}
}
function havor(ctx,gameData,placeState,x,y) //悬浮之后的样式变化
{
var rows=gameData.length;
var cols=gameData[0].length;
if(x>500-15*cols&&y>300-15*rows&&x<500 15*cols&&y<300 15*rows)
{
ctx.fillStyle="rgb(255,128,0)";
nowJ=Math.floor((y-(300-15*rows))/30)*30; //新位置的绝对坐标
nowI=Math.floor((x-(500-15*cols))/30)*30; //新位置的绝对坐标
//var Y=Math.floor((y-50)/(300/rows))*300/rows; //Y坐标的偏移量
//var X=Math.floor((x-50)/(300/cols))*300/cols; //X坐标的偏移量
//alert("nowI=" nowI " nowJ=" nowJ);
if(nowI!=preI||nowJ!=preJ)
{
if(placeState[Math.round(nowJ/30)][Math.round(nowI/30)]=="0")
{
ctx.fillRect(nowI,nowJ,29,29);
}
if(preI!=-1&&placeState[Math.round(preJ/30)][Math.round(preI/30)]=="0")
{
var radgrad=ctx.createRadialGradient(30,30,1,45,45,(rows>cols?rows:cols)*30);
radgrad.addColorStop(0, '#C4E1FF');
radgrad.addColorStop(0.9, 'rgb(36,66,147)');
ctx.fillStyle=radgrad;
ctx.fillRect(preI,preJ,29,29);
}
preI=nowI; //老位置的绝对坐标
preJ=nowJ; //老位置的绝对坐标
}
}
}
function startPrint(ctx,gameData,x,y) //图形上的特定位置的初始化
{
//ctx.fillStyle="rgb(36,66,147)";
var rows=gameData.length;
var cols=gameData[0].length;
var radgrad=ctx.createRadialGradient(30,30,1,45,45,(rows>cols?rows:cols)*30);
radgrad.addColorStop(0, '#C4E1FF');
radgrad.addColorStop(0.9, 'rgb(36,66,147)');
ctx.fillStyle=radgrad;
ctx.fillRect(30*y,30*x,29,29);
}
function exist(gameData,x,y) //检测指定位置是否存在，并判断有没有雷
{
var rows=gameData.length;
var cols=gameData[0].length;
if(x>=0&&y>=0&&x<rows&&y<cols)
{
//alert("x=" x "y=" y " " gameData[0][0] " " gameData[0][1] " " gameData[0][2] " " gameData[1][0] " " gameData[1][1] " " gameData[1][2] " " gameData[2][0] " " gameData[2][1] " " gameData[2][2]);
if(gameData[x][y]==-1)
return Number(1);
else if(gameData[x][y]==0)
return "none"
else
return Number(0);
}
else return "notexist";
}
function doubleArray(m, n) { //创建二维数组
var arr = new Array(m); //先创建一个一维数组arr
for (var i = 0; i < m; i ) {
var arrtmp = new Array(n);
arr[i] = arrtmp; //为arr每个元素再创建一个数组arrtmp
}
return arr; //返回二维数组
}
</script>
</body>
</html>
标签：
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论