日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页扫雷的问题

發布時間：2023/12/10 编程问答 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 网页扫雷的问题 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

掃雷

我做了一款掃雷

代碼結構:


BoomIndex.html代碼:

<!doctype html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>掃雷</title><script src="Script.js" rel="script"></script><link href="StyleSheet.css" rel="stylesheet" /> </head> <body style="background-color: black"> <div id="root"><table class="up_block"><tr><td id="ub_fin_boom" ><button id="free_normal_mode" onclick="update_mode('FREE')">普通模式</button><button id="flag_mode" onclick="update_mode('FLAG')">插旗模式</button></td><td id="ub_slt_boom"><button class="Title_Button" id="ub_slt_boom_button" onclick="update_bmp_func()"><img src="img/smile.bmp" alt="SMILE"/></button></td><td id="ub_scr_boom">分數:<span id="ub_scr_boom_data">0</span>分</td></tr></table><div id="boom_block"><div id="boom_table"><script type="text/javascript">for(let x=1;x<=15;x++){for(let y=1;y<=15;y++){document.write(`<button class="box" id="box${x}_${y}" οnclick="click_box(${x},${y})">N</button>`)}document.write(`<br/>`)}</script></div></div> </div> </body> </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

效果圖

不得不說，真的有一點丑，但功能還是有的

問題

  • ub_slt_boom_button點擊后沒有反應 (指有切換圖片效果的)
  • 雷區正常模式點擊無反應

    • 望評論區中的大神教一下，到底哪里出了問題。

    總結

    以上是生活随笔為你收集整理的网页扫雷的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。