网页扫雷的问题
掃雷
我做了一款掃雷
代碼結構:
BoomIndex.html代碼:
StyleSheetCSS代碼:
#root{position: absolute;width: 600px;height: 100%;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background-color: #FFFF00; } #up_block{height: 25%;width : 100%;background-color: #000000; } #boom_block{height: 75%;width: 100%;background-color: #FFFF00; } #ub_fin_boom{height: 100px;width: 200px;border: 5px solid #000000;padding-left: 8px;padding-right: 8px;text-align: center;vertical-align: center;background-color: #FFFF00; } #ub_slt_boom{height: 100px;width: 200px;border: 5px solid #000000;background-color: #FFFF00;padding-left: 8px;padding-right: 8px;text-align: center;vertical-align: center; } #ub_scr_boom{height: 100px;width: 200px;border : 5px solid #000000;background-color: #FFFF00;padding-left: 8px;padding-right: 8px;text-align: center;vertical-align: center; } .Title_Button{border: 3px outset #FFFFFF;background-color: #FFFFFF;transition-duration: 0.05s; } .Title_Button:hover{border: 3px outset #777777;background-color: #777777; } .box{border: 5px outset #777777;background-color: #777777;width: 30px;height : 30px;text-align: center;vertical-align: center;left: 0;right: 0;top: 0;bottom: 0;transition-duration: 0.05s; } .box:hover{border: 5px outset #444444;background-color: #444444; } .lose_box{border: crimson;background-color: crimson; } #boom_table{text-align: center;/*vertical-align: center;*//*margin-top: 20px;*/ }Script.js代碼
let ClickMode; let BoomList; let NumList; let dis; let cnt; function game_init(){ClickMode = 'FREE'BoomList = new Array();NumList = new Array();for(let i=0;i<=16;i++){BoomList[i] = new Array();NumList[i] = new Array();dis[i] = new Array();for(let j=0;j<16;j++){BoomList[i][j] = false;NumList[i][j] = 0;dis[i][j]=false;}}for(let i=1;i<=15;i++){for(let j=1;j<=15;j++){let element=document.getElementById(`box${i}_${j}`)element.innerHTML = 'N'element.className = 'box'}}for(let i=0;i<35;i++){let tx = Math.floor(Math.random() * 14) + 1;let ty = Math.floor(Math.random() * 14) + 1;if(BoomList[tx][ty]==true){i--;continue;}BoomList[tx][ty] = true;}for(let i=1;i<=15;i++){for(let j=1;j<=15;j++){if(BoomList[i][j]){NumList[i][j] = Infinity;}else{let dx = [0,0,1,-1,1,1,-1,-1]let dy = [1,-1,0,0,1,-1,1,-1]let sum = 0for(let x=0;x<8;x++){if(BoomList[i+dx[x]][j+dy[x]]){sum++;}}NumList[i][j] = sum;}}} } function over_game(bombx,bomby){for(let i=1;i<=15;i++){for(let j=1;j<=15;j++){if(BoomList[i][j]){let element = document.getElementById(`box${i}_${j}`)element.className = 'lose_box'element.innerHTML = 'B'}}} } function update_bmp_func(){let element = document.getElementById("ub_slt_boom_button")if(element.innerHTML==='<img src="img/bad.bmp" alt="LOST" />'){element.innerHTML='<img src="img/smile.bmp" alt="SMILE"/>'game_init()return;}if(element.innerHTML==='<img src="img/smile.bmp" alt="SMILE"/>'){element.innerHTML = '<img src="img/smileClick.bmp" alt="SMILE_CLICK" />'setTimeout(function(){element.innerHTML = '<img src="img/smile.bmp" alt="SMILE"/>'},200)} }; let update_mode = (mode_string) => {if(mode_string === 'FREE'){ClickMode = 'FREE'}else{ClickMode = 'FLAG'} } function is_win(){let flag = true;for(let i=1;i<=15;i++){for(let j=1;j<=15;j++){let element = document.getElementById(`box${i}_${j}`)if(BoomList[i][j]){if(element.innerHTML !== 'F'){flag = false;}}}}return flag; } function click_box(cx,cy){let element = document.getElementById(`box${cx}_${cy}`)let dx = [0,0,-1,1]let dy = [-1,1,0,0]let dfs_dis = new Array();for(let i=1;i<=15;i++){dfs_dis[i] = new Array();for (let j=1;j<=15;j++){dfs_dis[i][j] = false;}}let dfs = (x,y) => {dfs_dis[i] = true;element.innerHTML = (NumList[x][y]!=0)?(`${NumList[x][y]}`):(' ')dis[x][y] = true;for(let i=0;i<4;i++){let tx = x+dx[i];let ty = y+dy[i];if(tx<1 || tx>15 || ty<1 || ty>15 || (element.innerHTML==0 && dfs_dis[tx][ty]==true)){continue;}dfs(tx,ty)}}if(ClickMode==='FLAG'){if(element.innerHTML==='F'){element.innerHTML = 'N'}else{element.innerHTML = 'F'}}else{if(BoomList[cx][cy]){over_game(cx,cy)}else{dfs(cx,cy);if(is_win()){let element_win = document.getElementById("ub_slt_boom_button")element_win.innerHTML = 'YOUWIN!'}}} }圖片資源:
bad.bmp
smile.bmp
smileClick.bmp
效果圖
不得不說，真的有一點丑，但功能還是有的
問題
望評論區中的大神教一下，到底哪里出了問題。
總結
- 上一篇： 支持java虚拟主机_为何缺乏支持Jav
- 下一篇： 数学建模清风微信公众号的习题答案(基础篇