简单的扫雷游戏制作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
position:relative;
}
.father{
position: relative;
}
.box div{
width:20px;
height:20px;
background-color: #ccc;
border:2px solid #666;
border-top-color: #fff;
border-left-color: #fff;
position:absolute;
text-align: center;
}
.shadow{
position:absolute;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
display: none;
text-align: center;
}
.btn{
margin-top:100px;
width:80px;
height:30px;
}
.win{
position:absolute;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
display: none;
text-align: center;
color:#fff;
}
</style>
</head>
<body>
<section class="father">
<div class="box"></div>
<div class="shadow">
<input type="button" class = "btn" value="再来一次"/>
</div>
<div class="win">
<p>少年恭喜过关</p>
<input type="button" class = "btn1" value="再来一次"/>
</div>
</section>

</body>
<script type="text/javascript">
// 计算雷点
var index = 0;
// 生成页面
page(10,10);
state();
leiClick();
leiM();
leiOpen();
More();
rightClick();
//封装界面初始值
function state(){
// 设置界面宽度
var dives = document.querySelectorAll('.box div');

var box = document.querySelector('.box');

var shadow = document.querySelector('.shadow');

var win1 = document.querySelector('.win');

box.style.width = dives.length/10*24 + 'px';

box.style.height = dives.length/10*24 + 'px';

shadow.style.width = dives.length/10*24 + 'px';

shadow.style.height = dives.length/10*24 + 'px';
win1.style.width = dives.length/10*24 + 'px';

win1.style.height = dives.length/10*24 + 'px';
}
// 封装生成页面函数
function page(row,con){

var box = document.querySelector('.box');

var html = '';

for(var i =0;i<row;i++){

for(var j =0;j<con;j++){

html += '<div style="top:'+i*24+'px;left:'+j*24+'px;"></div>';

}
}
box.innerHTML = html;
}
// 给雷点添加点击事件
function leiClick(){
// 设置雷点
var dives = document.querySelectorAll('.box div');

var num = 10;

var arr = [];

for(var i =0;i<num;i++){

var n =Math.floor(Math.random()*dives.length);

var onOff = false;

for(var j =0;j<arr.length;j++){

if(n==arr[j]){
onOff = true;
break;
}
}
if(!onOff){
arr.push(n);
}else{
i--;
}
}
// 布置雷点
for(var i =0;i<arr.length;i++){
dives[arr[i]].className = 'lei';
}
for(var i =0;i<arr.length;i++){

dives[arr[i]].onclick = function(){
if (this.onOff) return;
var lei = document.querySelectorAll('.lei');

var shadow = document.querySelector('.shadow');

shadow.style.display = 'block';

fn(0);

function fn(num){
setTimeout(function(){

lei[num].style.backgroundColor = 'red';

lei[num].innerHTML = '雷';

if(num+1<lei.length){

fn(num+1);

}
},200)
}

}
}
}
// 计算雷点个数
function leiM(){
var dives = document.querySelectorAll('.box div');

for(var i =0;i<dives.length;i++){

if(dives[i].className=='lei') continue;

var num = 0;
// 上
if(dives[i-10]&&dives[i-10].className=='lei'){
num++;
}
//下
if(dives[i+10]&&dives[i+10].className=='lei'){
num++;
}
if(i%10!=0){
// 左
if(dives[i-1]&&dives[i-1].className=='lei'){
num++;
}
//左上
if(dives[i-11]&&dives[i-11].className=='lei'){
num++;
}
//左下
if(dives[i+9]&&dives[i+9].className=='lei'){
num++;
}
}
if(i%10!=9){
// 右
if(dives[i+1]&&dives[i+1].className=='lei'){
num++;
}
// 右上
if(dives[i-9]&&dives[i-9].className=='lei'){
num++;
}
// 右下
if(dives[i+11]&&dives[i+11].className=='lei'){
num++;
}
}
if(num>0){
dives[i].num = num;
}

}
}
//打开空雷点
function leiOpen(){
var dives = document.querySelectorAll('.box div');

for(var i =0;i<dives.length;i++){

if(dives[i].className!='lei'){

dives[i].index = i;

dives[i].onclick = function(){
var winGame = document.querySelector('.win')
findLei(dives,this.index);
if(index==90){
winGame.style.display = 'block';
win();
}
}
}
}
}
// 再玩一次
function More(){
var btn = document.querySelector('.btn');
btn.onclick = function(){
index = 0;
var shadow = document.querySelector('.shadow');
shadow.style.display = 'none';
// 生成页面
page(10,10);
state();
leiClick();
leiM();
leiOpen();
rightClick();

}
}
function win(){
var btn = document.querySelector('.btn1');
btn.onclick = function(){
index = 0;
var win1 = document.querySelector('.win');
win1.style.display = 'none';
// 生成页面
page(10,10);
state();
leiClick();
leiM();
leiOpen();
rightClick();

}
}

function rightClick(){
var dives = document.querySelectorAll('div');
for(var i =0;i<dives.length;i++){
dives[i].oncontextmenu=function(ev){
var ev = ev||event;
ev.preventDefault();
if(!this.onOff){
this.style.backgroundColor = 'blue';
this.onOff = true;
}else{
this.style.backgroundColor = '';
this.onOff = false;
}

}
}
}

</script>
</html>

WEB前端学习交流群21 598399936

posted @ 2017-12-25 14:27 噜噜修阅读(537) 评论(0) 编辑收藏举报

刷新页面返回顶部

简单的扫雷游戏制作

公告