html5小游戏源码- 扫雷

原创已于 2024-03-10 17:12:48 修改 · 1.1w 阅读

52 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

于 2019-06-29 13:50:57 首次发布

html5 学习代码同时被 2 个专栏收录

2 篇文章

订阅专栏

扫雷小游戏

1 篇文章

订阅专栏

<!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"/>

<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=Math.ceil((e.screenX)/25);
var clickY=Math.ceil((e.screenY-200)/25);
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>