JavaScript實(shí)現(xiàn)掃雷小游戲_第1頁(yè)
JavaScript實(shí)現(xiàn)掃雷小游戲_第2頁(yè)
JavaScript實(shí)現(xiàn)掃雷小游戲_第3頁(yè)
JavaScript實(shí)現(xiàn)掃雷小游戲_第4頁(yè)
JavaScript實(shí)現(xiàn)掃雷小游戲_第5頁(yè)
已閱讀5頁(yè)，還剩8頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第JavaScript實(shí)現(xiàn)掃雷小游戲本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)掃雷小游戲的具體代碼，供大家參考，具體內(nèi)容如下

先說大體思路，下面放代碼

思路：

1產(chǎn)生指定數(shù)量的地雷

2計(jì)算方塊周圍的地雷

3點(diǎn)擊地雷結(jié)束

4點(diǎn)擊地雷周邊顯示地雷個(gè)數(shù)

5點(diǎn)擊空白塊，消除所有相連的空白塊

6游戲主體已經(jīng)完成了。剩下就是完善一些小細(xì)節(jié)，例如勝利判斷，失敗露出苦瓜臉，難度切換，新游戲按鈕等等

首先是html+css的代碼

!DOCTYPEhtml

html

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

title掃雷v1.0/title

style

body{

margin:0;

padding:0;

font-family:Arial;

font-size:12px;

color:#FFFFFF;

background:#000000;

}

.div-game{

margin:5%auto;

width:480px;

height:420px;

}

.div-score{

position:relative;

top:0px;

left:0px;

height:30px;

color:#000000;

background:#C0C0C0;

border-top:1pxsolid#FFFFFF;

border-right:1pxsolid#FFFFFF;

}

.img-mines,

.div-mines,

.img-time,

.img-smiley,

.div-time,

.lb-level,

.bn-reset{

position:absolute;

}

.img-mines{

top:6px;

left:10px;

}

.div-mines{

top:6px;

left:30px;

width:40px;

font-family:Verdana;

font-size:14px;

font-weight:bold;

text-align:left;

color:#0000CF;

background:transparent;

}

.img-time{

top:6px;

left:80px;

}

.div-time{

top:6px;

left:100px;

width:60px;

font-family:Verdana;

font-size:14px;

font-weight:bold;

text-align:left;

color:#007F00;

background:transparent;

}

.img-smiley{

top:6px;

left:240px;

}

.lb-level{

top:4px;

left:330px;

width:80px;

font-family:Arial;

font-size:12px;

}

.bn-reset{

top:3px;

left:420px;

width:50px;

font-family:Arial;

font-size:12px;

text-align:center;

}

.div-board{

position:relative;

width:480px;

height:320px;

color:#000000;

background:#7F7F7F;

border-top:1pxsolid#000000;

border-bottom:1pxsolid#FFFFFF;

border-left:1pxsolid#FFFFFF;

}

.cell{

position:absolute;

overflow:hidden;

}

.div-adsense{

position:relative;

width:100%;

height:60px;

text-align:center;

}

.div-addfreestats{

position:absolute;

left:0px;

top:0px;

display:none;

}

/style

/head

body

divid="div-game"

divid="div-score"

imgid="img-mines"src="./img/mines.png"

divid="div-mines"10/div

imgid="img-time"src="./img/clock.png"

divid="div-time"00:00/div

imgid="img-smiley"src="./img/happy.png"

selectid="lb-level"onchange="game.restart()"name="bn-reset"

optionselected=""value="easy"簡(jiǎn)單/option

optionvalue="normal"普通/option

optionvalue="advanced"高級(jí)/option

optionvalue="expert"專家/option

optionvalue="hell"地獄/option

/select

inputid="bn-reset"type="button"

value="新游戲!"name="bn-reset"

/div

divid="div-board"

imgid="cell0"src="./img/up.png"anum="0"

imgid="cell1"src="./img/up.png"anum="0"

imgid="cell2"src="./img/up.png"anum="0"

imgid="cell3"src="./img/up.png"anum="0"

imgid="cell4"src="./img/up.png"anum="0"

imgid="cell5"src="./img/up.png"anum="0"

imgid="cell6"src="./img/up.png"anum="0"

imgid="cell7"src="./img/up.png"anum="0"

imgid="cell8"src="./img/up.png"anum="0"

imgid="cell9"src="./img/up.png"anum="0"

imgid="cell10"src="./img/up.png"anum="0"

imgid="cell11"src="./img/up.png"anum="0"

imgid="cell12"src="./img/up.png"anum="0"

imgid="cell13"src="./img/up.png"anum="0"

imgid="cell14"src="./img/up.png"anum="0"

imgid="cell15"src="./img/up.png"anum="0"

imgid="cell16"src="./img/up.png"anum="0"

imgid="cell17"src="./img/up.png"anum="0"

imgid="cell18"src="./img/up.png"anum="0"

imgid="cell19"src="./img/up.png"anum="0"

imgid="cell20"src="./img/up.png"anum="0"

imgid="cell21"src="./img/up.png"anum="0"

imgid="cell22"src="./img/up.png"anum="0"

imgid="cell23"src="./img/up.png"anum="0"

imgid="cell24"src="./img/up.png"anum="0"

imgid="cell25"src="./img/up.png"anum="0"

imgid="cell26"src="./img/up.png"anum="0"

imgid="cell27"src="./img/up.png"anum="0"

imgid="cell28"src="./img/up.png"anum="0"

imgid="cell29"src="./img/up.png"anum="0"

imgid="cell30"src="./img/up.png"anum="0"

imgid="cell31"src="./img/up.png"anum="0"

imgid="cell32"src="./img/up.png"anum="0"

imgid="cell33"src="./img/up.png"anum="0"

imgid="cell34"src="./img/up.png"anum="0"

imgid="cell35"src="./img/up.png"anum="0"

imgid="cell36"src="./img/up.png"anum="0"

imgid="cell37"src="./img/up.png"anum="0"

imgid="cell38"src="./img/up.png"anum="0"

imgid="cell39"src="./img/up.png"anum="0"

imgid="cell40"src="./img/up.png"anum="0"

imgid="cell41"src="./img/up.png"anum="0"

imgid="cell42"src="./img/up.png"anum="0"

imgid="cell43"src="./img/up.png"anum="0"

imgid="cell44"src="./img/up.png"anum="0"

imgid="cell45"src="./img/up.png"anum="0"

imgid="cell46"src="./img/up.png"anum="0"

imgid="cell47"src="./img/up.png"anum="0"

imgid="cell48"src="./img/up.png"anum="0"

imgid="cell49"src="./img/up.png"anum="0"

imgid="cell50"src="./img/up.png"anum="0"

imgid="cell51"src="./img/up.png"anum="0"

imgid="cell52"src="./img/up.png"anum="0"

imgid="cell53"src="./img/up.png"anum="0"

imgid="cell54"src="./img/up.png"anum="0"

imgid="cell55"src="./img/up.png"anum="0"

imgid="cell56"src="./img/up.png"anum="0"

imgid="cell57"src="./img/up.png"anum="0"

imgid="cell58"src="./img/up.png"anum="0"

imgid="cell59"src="./img/up.png"anum="0"

imgid="cell60"src="./img/up.png"anum="0"

imgid="cell61"src="./img/up.png"anum="0"

imgid="cell62"src="./img/up.png"anum="0"

imgid="cell63"src="./img/up.png"anum="0"

imgid="cell64"src="./img/up.png"anum="0"

imgid="cell65"src="./img/up.png"anum="0"

imgid="cell66"src="./img/up.png"anum="0"

imgid="cell67"src="./img/up.png"anum="0"

imgid="cell68"src="./img/up.png"anum="0"

imgid="cell69"src="./img/up.png"anum="0"

imgid="cell70"src="./img/up.png"anum="0"

imgid="cell71"src="./img/up.png"anum="0"

imgid="cell72"src="./img/up.png"anum="0"

imgid="cell73"src="./img/up.png"anum="0"

imgid="cell74"src="./img/up.png"anum="0"

imgid="cell75"src="./img/up.png"anum="0"

imgid="cell76"src="./img/up.png"anum="0"

imgid="cell77"src="./img/up.png"anum="0"

imgid="cell78"src="./img/up.png"anum="0"

imgid="cell79"src="./img/up.png"anum="0"

imgid="cell80"src="./img/up.png"anum="0"

imgid="cell81"src="./img/up.png"anum="0"

imgid="cell82"src="./img/up.png"anum="0"

imgid="cell83"src="./img/up.png"anum="0"

imgid="cell84"src="./img/up.png"anum="0"

imgid="cell85"src="./img/up.png"anum="0"

imgid="cell86"src="./img/up.png"anum="0"

imgid="cell87"src="./img/up.png"anum="0"

imgid="cell88"src="./img/up.png"anum="0"

imgid="cell89"src="./img/up.png"anum="0"

imgid="cell90"src="./img/up.png"anum="0"

imgid="cell91"src="./img/up.png"anum="0"

imgid="cell92"src="./img/up.png"anum="0"

imgid="cell93"src="./img/up.png"anum="0"

imgid="cell94"src="./img/up.png"anum="0"

imgid="cell95"src="./img/up.png"anum="0"

imgid="cell96"src="./img/up.png"anum="0"

imgid="cell97"src="./img/up.png"anum="0"

imgid="cell98"src="./img/up.png"anum="0"

imgid="cell99"src="./img/up.png"anum="0"

/div

p歡迎來到掃雷游戲！br/在最短的時(shí)間內(nèi)根據(jù)點(diǎn)擊格子出現(xiàn)的數(shù)字找出所有非雷格子，同時(shí)避免踩雷，踩到一個(gè)雷即全盤皆輸。加油！br/(簡(jiǎn)單難度：10個(gè)地雷；普通難度：20個(gè)地雷；高級(jí)難度：30個(gè)地雷；專家難度：40個(gè)地雷；地獄難度：50個(gè)地雷)/p

/div

div/div

scriptsrc="./game-副本.js"/script

/body

/html

然后是JavaScript的代碼：

letselect=document.querySelector('#lb-level')

letboomNum=10

if(select.options[select.selectedIndex].value=="easy"){

boomNum=10

game()

select.onchange=function(){

refresh()

if(select.options[select.selectedIndex].value=="easy"){

boomNum=10

game()

}elseif(select.options[select.selectedIndex].value=="normal"){

boomNum=20

game()

}elseif(select.options[select.selectedIndex].value=="advanced"){

boomNum=30

game()

}elseif(select.options[select.selectedIndex].value=="expert"){

boomNum=40

game()

}elseif(select.options[select.selectedIndex].value=="hell"){

boomNum=50

game()

}

functionrefresh(){

//清除掉所有的雷標(biāo)簽、圖片復(fù)原、點(diǎn)擊事件清空、計(jì)數(shù)器變0,win變0，計(jì)數(shù)器重開

letboxss=document.querySelectorAll('#div-boardimg')

for(leti=0;iboxss.length;i++){

boxss[i].className='cell'

boxss[i].setAttribute('anum',0)

boxss[i].onclick=null

boxss[i].src='./img/up.png'

}

win=0

clearInterval(timer)

document.querySelector('#div-time').innerText='00:00'

ta=0

tb=0

ta1=''

tb1=''

timer=setInterval(()={

ta++

if(ta==60){

ta=0

tb++

}

ta9ta1=ta:ta1='0'+ta

tb9tb1=tb:tb1='0'+tb

document.querySelector('#div-time').innerText=tb1+':'+ta1

},1000);

return

functiongame(){

document.querySelector('#div-mines').innerText=boomNum

boomNum

console.log(123);

//找到元素

letboxs=document.qu

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論