一步步教你使用JavaScript打造一個掃雷游戲

第一步步教你使用JavaScript打造一個掃雷游戲目錄前言一、思路分析二、靜態(tài)頁面搭建2.1結構層2.2樣式層三、js頁面交互3.1獲取元素及變量初始化3.210個雷的初始化設置3.3游戲開始事件封裝3.4核心事件函數(shù)封裝3.5游戲開始四、總結

前言

掃雷大家都玩過，今天我們就是用JavaScript來打造掃雷游戲。廢話不多說，直接看下效果;

上圖是失敗后的結果。

一、思路分析

我們新建一個首頁,在首頁放置一個點擊開始游戲的按鈕，動態(tài)生成100個小格，即100div;然后通過點擊div進行掃雷操作，然后掃雷成功或者失敗顯示對應的結果;

二、靜態(tài)頁面搭建

2.1結構層

body

div

divid="btn"/div!--開始游戲按鈕--

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

divid="flagBox"!--游戲結束才顯示的當前雷數(shù)的div--

當前剩余雷數(shù)：

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;

當前所剩雷數(shù)

.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++){//雙層循環(huán)10*10個div

for(varj=0;jj++){

varcon=document.createElement('div');

con.classList.add('block');//給創(chuàng)建出來的div添加類名block

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

box.appendChild(con);

mineMap.push({mine:0});

block=document.getElementsByClassName('block');

while(minesNum){//創(chuàng)建一個10次的循環(huán)，即設置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核心事件函數(shù)封裝

leftClick沒有雷--顯示數(shù)字(代表以當前小格為中心周圍8個格的雷數(shù))擴散(當前周圍八個格沒有雷)有雷--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{//否則繼續(xù)掃雷

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沒有標記并且沒有數(shù)字--進行標記;

有標記--取消標記--標記是否正確，10個都正確標記，提示成功;

如果已經出現(xiàn)，則點擊無效果;

functionrightClick(dom){

if(dom.cla