<!doctype html> <html> <head> <meta name="author" content="苏道涵"/> <meta name="keywords" content="扫雷，html5小游戏"/> <meta name="description" content="经典扫雷小游戏"/> <meta http-equiv="content-Type" content="text/html;charset=gb2312"/> <title>扫雷小游戏</title> <style> div.yangshi1{ font-size:25px; margin-bottom:30px; text-align:center;} div.yangshi2{ width:100px; height:50px; border-style:solid; text-align:center; float:right; } </style> </head> <body> <h1 align=center>扫雷小游戏</h1> <canvas width=1000px height=400px style="float:left" id="g"></canvas> <div class="yangshi1" onclick="start()">开始</div> <div class="yangshi1">计时</div> <div id="time" class="yangshi2"></div> <script> var tArray=new Array(); for(var k=0;k<40;k++){ tArray[k]=new Array(); for(var j=0;j<16;j++){ tArray[k][j]=0; } } var foody; var foodx; for(var i=0;i<100;i++){ foody=Math.ceil(Math.random()*16-1); foodx=Math.ceil(Math.random()*40-1); while(foodx==-1||foody==-1||tArray[foodx][foody]==-1){ foody=Math.ceil(Math.random()*16-1); foodx=Math.ceil(Math.random()*40-1); } tArray[foodx][foody]=-1; for(var t=-1;t<2;t++){ for(var k=-1;k<2;k++){ if((foodx+t)!=-1&&(foody+k)!=-1&&(foodx+t)!=40&&(foody+k)!=16&&tArray [foodx+t][foody+k]!=-1 ){ tArray[foodx+t][foody+k]++; } } } } var time=0; function start(){ document.onclick=function(event){ var e=event||window.event; var clickX=((e.screenX-50)/14.5*16)>>5; var clickY=((e.screenY-195)/14.5*16)>>5; var name=1 context.fillStyle="white"; if(tArray[clickX][clickY]==-1){ window.alert("gameover"); window.location.reload(); } else { context.fillRect(clickX*25,clickY*25,25,25); context.font="20px Georgia"; context.fillStyle="black"; context.fillText(tArray[clickX][clickY],clickX*25+10,clickY*25+15); } } window.setInterval(timing,1000); } function timing(){ time++; document.getElementById("time").innerHTML=time; } var drawing=document.getElementById("g"); if(drawing.getContext){ var context=drawing.getContext("2d"); context.fillStyle="gray"; context.fillRect(0,0,1000,400); context.fillStyle="black"; context.beginPath(); context.lineWidth=2; for(var i=25;i<=400;i=i+25){ context.moveTo(0,i); context.lineTo(1000,i); } for(var t=25;t<=1000;t=t+25){ context.moveTo(t,0); context.lineTo(t,400); } context.stroke(); } </script> </body> </html>
456主机测评
