一步步教你使用JavaScript打造一个扫雷游戏

第一步步教你使用JavaScript打造一个扫雷游戏目录前言一、思路分析二、静态页面搭建2.1结构层2.2样式层三、js页面交互3.1获取元素及变量初始化3.210个雷的初始化设置3.3游戏开始事件封装3.4核心事件函数封装3.5游戏开始四、总结

前言

扫雷大家都玩过，今天我们就是用JavaScript来打造扫雷游戏。废话不多说，直接看下效果;

上图是失败后的结果。

一、思路分析

我们新建一个首页,在首页放置一个点击开始游戏的按钮，动态生成100个小格，即100div;然后通过点击div进行扫雷操作，然后扫雷成功或者失败显示对应的结果;

二、静态页面搭建

2.1结构层

body

div

divid="btn"/div!--开始游戏按钮--

divid="box"/div!--存放小雷的div--

divid="flagBox"!--游戏结束才显示的当前雷数的div--

当前剩余雷数：

spanid="score"10/span

/div

divid="alertBox"!--Gameover弹出的框（窗口）--

divid="alertImg"

divid="close"/div

/div

/div

/div

/body

2.2样式层

清楚默认边距

*{

margin:0;

padding:0;

页面最大div

.wrapper{

width:100%;

height:1000px;

position:fixed;

top:0;

left:0;

background-image:url('img/bg.jpg');

background-size:100%100%;

效果如下：

开始游戏按钮

.btn{

height:140px;

width:170px;

position:absolute;

left:50px;

background-image:url('img/startGame.png');

background-size:100%100%;

cursor:pointer;

储存雷的大div

.box{

height:500px;

width:500px;

transform:perspective(800px)rotateX(45deg);

margin:20pxauto;

border-top:1pxsolid#B25F27;

border-left:1pxsolid#B25F27;

box-shadow:5px5px5pxrgba(0,0,0,0.3);

display:none;/*先设置为none,开始游戏后显示block*/

每一个方块的小div(一共100个)

.block{

width:49px;

height:49px;

border-right:1pxsolid#B25F27;

border-bottom:1pxsolid#B25F27;

box-shadow:004px#333inset;

background-image:url('img/cao.jpg');

float:left;

当前所剩雷数

.flagBox{

position:absolute;

top:50px;

left:50%;

width:200px;

height:50px;

margin-left:-100px;

color:#333;

font-size:20px;

font-weight:bolder;

display:none;/*先设置为none,开始游戏后显示block*/

GameOver

.alertBox{

display:none;/*先设置为none,开始结束显示block*/

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

background-color:rgba(0,0,0,0.2);

}

游戏结束弹出窗口右上角的X

.close{

position:absolute;

right:0;

top:0;

height:40px;

width:40px;

background-image:url('img/closeBtn.png');

background-size:100%100%;

cursor:pointer;

​​​​​​​}

三、js页面交互

3.1获取元素及变量初始化

varstartBtn=document.getElementById('btn');

varbox=document.getElementById('box');

varflagBox=document.getElementById('flagBox');

varalertBox=document.getElementById('alertBox');

varalertImg=document.getElementById('alertImg');

varcloseBtn=document.getElementById('close');

varscore=document.getElementById('score');

//先声明变量，但是不初始化

varminesNum;

varmineOver;

varblock;

varmineMap=[];

varstartGameBool=true;

3.210个雷的初始化设置

functioninit(){

minesNum=10;

mineOver=10;

score.innerHTML=mineOver;

for(vari=0;ii++){//双层循环10*10个div

for(varj=0;jj++){

varcon=document.createElement('div');

con.classList.add('block');//给创建出来的div添加类名block

con.setAttribute('id',i+'-'+j);

box.appendChild(con);

mineMap.push({mine:0});

block=document.getElementsByClassName('block');

while(minesNum){//创建一个10次的循环，即设置10个雷

varmineIndex=Math.floor(Math.random()*100);

if(mineMap[mineIndex].mine===0){

mineMap[mineIndex].mine=1;

block[mineIndex].classList.add('isLei');//10个雷有小div的block类属性，还有自己的属性，isLei

minesNum--;

3.3游戏开始事件封装

functionbindEvent(){

startBtn.onclick=function(){//开始按钮点击事件

if(startGameBool){

box.style.display='block';

flagBox.style.display='block';

init();

startGameBool=false;

box.oncontextmenu=function(){

returnfalse;

box.onmousedown=function(e){//小div鼠标按下事件封装

varevent=e.target;

if(e.which==1){//Netscape/Firefox/Opera中不支持window.event.keyCode,需要用event.which代替

leftClick(event);

}elseif(e.which==3){

rightClick(event);

closeBtn.onclick=function(){//游戏结束，弹出gameover窗口的关闭按钮事件封装

alertBox.style.display='none';

flagBox.style.display='none';

box.style.display='none';

box.innerHTML='';

startGameBool=true;

3.4核心事件函数封装

leftClick没有雷--显示数字(代表以当前小格为中心周围8个格的雷数)扩散(当前周围八个格没有雷)有雷--gameOver

functionleftClick(dom){

if(dom.classList.contains('flag')){

return;

varisLei=document.getElementsByClassName('isLei');//获得前面的10个雷的div

if(domdom.classList.contains('isLei')){//判断是不是雷块

for(vari=0;iisLei.length;i++){

isLei[i].classList.add('show');//显示地雷背景图

setTimeout(function(){

alertBox.style.display='block';

alertImg.style.backgroundImage='url("img/over.jpg")';//上面显示雷，标志游戏结束

},800)

}else{//否则继续扫雷

varn=0;

varposArr=domdom.getAttribute('id').split('-');

varposX=posArr+posArr[0];

varposY=posArr+posArr[1];

domdom.classList.add('num');

for(vari=posX-1;i=posX+1;i++){

for(varj=posY-1;j=posY+1;j++){

vararoundBox=document.getElementById(i+'-'+j);

if(aroundBoxaroundBox.classList.contains('isLei')){

n++;

dom(dom.innerHTML=n);

if(n==0){

for(vari=posX-1;i=posX+1;i++){

for(varj=posY-1;j=posY+1;j++){

varnearBox=document.getElementById(i+'-'+j);

if(nearBoxnearBox.length!=0){

if(!nearBox.classList.contains('check')){

nearBox.classList.add('check');

leftClick(nearBox);

rightClick没有标记并且没有数字--进行标记;

有标记--取消标记--标记是否正确，10个都正确标记，提示成功;

如果已经出现，则点击无效果;

functionrightClick(dom){

if(dom.cla