一步步教你使用JavaScript打造一個(gè)掃雷游戲

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

前言

掃雷大家都玩過(guò)，今天我們就是用JavaScript來(lái)打造掃雷游戲。廢話不多說(shuō)，直接看下效果;

上圖是失敗后的結(jié)果。

一、思路分析

我們新建一個(gè)首頁(yè),在首頁(yè)放置一個(gè)點(diǎn)擊開(kāi)始游戲的按鈕，動(dòng)態(tài)生成100個(gè)小格，即100div;然后通過(guò)點(diǎn)擊div進(jìn)行掃雷操作，然后掃雷成功或者失敗顯示對(duì)應(yīng)的結(jié)果;

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

2.1結(jié)構(gòu)層

body

div

divid="btn"/div!--開(kāi)始游戲按鈕--

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

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

當(dāng)前剩余雷數(shù)：

spanid="score"10/span

/div

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

divid="alertImg"

divid="close"/div

/div

/div

/div

/body

2.2樣式層

清楚默認(rèn)邊距

*{

margin:0;

padding:0;

頁(yè)面最大div

.wrapper{

width:100%;

height:1000px;

position:fixed;

top:0;

left:0;

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

background-size:100%100%;

效果如下：

開(kāi)始游戲按鈕

.btn{

height:140px;

width:170px;

position:absolute;

left:50px;

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

background-size:100%100%;

cursor:pointer;

儲(chǔ)存雷的大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;/*先設(shè)置為none,開(kāi)始游戲后顯示block*/

每一個(gè)方塊的小div(一共100個(gè))

.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;

當(dāng)前所剩雷數(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;/*先設(shè)置為none,開(kāi)始游戲后顯示block*/

GameOver

.alertBox{

display:none;/*先設(shè)置為none,開(kāi)始結(jié)束顯示block*/

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

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

}

游戲結(jié)束彈出窗口右上角的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頁(yè)面交互

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個(gè)雷的初始化設(shè)置

functioninit(){

minesNum=10;

mineOver=10;

score.innerHTML=mineOver;

for(vari=0;ii++){//雙層循環(huán)10*10個(gè)div

for(varj=0;jj++){

varcon=document.createElement('div');

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

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

box.appendChild(con);

mineMap.push({mine:0});

block=document.getElementsByClassName('block');

while(minesNum){//創(chuàng)建一個(gè)10次的循環(huán)，即設(shè)置10個(gè)雷

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

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

mineMap[mineIndex].mine=1;

block[mineIndex].classList.add('isLei');//10個(gè)雷有小div的block類屬性，還有自己的屬性，isLei

minesNum--;

3.3游戲開(kāi)始事件封裝

functionbindEvent(){

startBtn.onclick=function(){//開(kāi)始按鈕點(diǎn)擊事件

if(startGameBool){

box.style.display='block';

flagBox.style.display='block';

init();

startGameBool=false;

box.oncontextmenu=function(){

returnfalse;

box.onmousedown=function(e){//小div鼠標(biāo)按下事件封裝

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(){//游戲結(jié)束，彈出gameover窗口的關(guān)閉按鈕事件封裝

alertBox.style.display='none';

flagBox.style.display='none';

box.style.display='none';

box.innerHTML='';

startGameBool=true;

3.4核心事件函數(shù)封裝

leftClick沒(méi)有雷--顯示數(shù)字(代表以當(dāng)前小格為中心周?chē)?個(gè)格的雷數(shù))擴(kuò)散(當(dāng)前周?chē)藗€(gè)格沒(méi)有雷)有雷--gameOver

functionleftClick(dom){

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

return;

varisLei=document.getElementsByClassName('isLei');//獲得前面的10個(gè)雷的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")';//上面顯示雷，標(biāo)志游戲結(jié)束

},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沒(méi)有標(biāo)記并且沒(méi)有數(shù)字--進(jìn)行標(biāo)記;

有標(biāo)記--取消標(biāo)記--標(biāo)記是否正確，10個(gè)都正確標(biāo)記，提示成功;

如果已經(jīng)出現(xiàn)，則點(diǎn)擊無(wú)效果;

functionrightClick(dom){

if(dom.cla