前言

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供上林網(wǎng)站建設(shè)、上林做網(wǎng)站、上林網(wǎng)站設(shè)計(jì)、上林網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、上林企業(yè)網(wǎng)站模板建站服務(wù)，10余年上林做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

話說(shuō)阿望還在大學(xué)時(shí)，某一天寢室突然停網(wǎng)了，于是和室友兩人不約而同地打開(kāi)了掃雷，比相同難度下誰(shuí)更快找出全部的雷，玩得不亦樂(lè)乎，就這樣，掃雷伴我們度過(guò)了斷網(wǎng)的一周，是整整一周啊，不用上課的那種，可想而知我們是有多無(wú)聊了。

這兩天臨近過(guò)年了，該放假的已經(jīng)放假了，不該放假的已經(jīng)請(qǐng)假了，公交不打擠了，地鐵口不堵了，公司也去了大半部分的人了，就留阿望這種不得不留下來(lái)值班的人守著空蕩蕩的辦公室了，于是，多年前那種無(wú)所事事的斷網(wǎng)心態(tài)再次襲來(lái)，于是，想玩掃雷的心再次蹦跶出來(lái)，于是，點(diǎn)開(kāi)了電腦的附件，于是，發(fā)現(xiàn)我的電腦上并沒(méi)有掃雷【手動(dòng)微笑.jpg】。

怎么想起要寫(xiě)掃雷的阿望就不多廢話了，直接開(kāi)干。

掃雷游戲規(guī)則

想當(dāng)年阿望還是在大學(xué)才參透掃雷的游戲規(guī)則的，初高中的時(shí)候都是靠運(yùn)氣瞎點(diǎn)，從沒(méi)贏過(guò)，當(dāng)然了，境界提升以后，追求的自然就不是贏了，而是速度。

來(lái)，看規(guī)則：

大白話游戲規(guī)則，計(jì)算邏輯如下：

游戲開(kāi)始，選擇難度 鼠標(biāo)左鍵隨機(jī)點(diǎn)開(kāi)一個(gè)格子A（你想用右鍵標(biāo)雷也可以） 左鍵點(diǎn)擊后一共有三種情況 1) 是數(shù)字，假設(shè)是2，表示以該格子A為中心的九宮格除了該格子以外的8個(gè)格子內(nèi)有2個(gè)雷 2）是空白，表示以該格子A為中心的九宮格除了該格子以外的8個(gè)格子內(nèi)沒(méi)有雷，并且系統(tǒng)計(jì)算分別以這8個(gè)格子為中心九宮格除了該格子以外的8個(gè)格子是否是空白 a. 是空白，繼續(xù)計(jì)算以這8個(gè)格子為中心九宮格除了該格子以外的8個(gè)格子是否是空白，循環(huán)擴(kuò)散 b. 是格子邊界，停止邊界擴(kuò)散 c. 是數(shù)字，數(shù)字格子翻出來(lái)顯示，停止擴(kuò)散 3）是雷，game over 了。。。 如果點(diǎn)第一次只翻了一個(gè)數(shù)字是比較難開(kāi)始游戲的，如果第一次翻了一大片出來(lái)，恭喜你，可以開(kāi)始秀你的智商了，在確認(rèn)是雷點(diǎn)的格子點(diǎn)右鍵，即可標(biāo)記地雷格，表示你認(rèn)定這個(gè)格子是地雷 如果數(shù)字周圍的雷被全部標(biāo)記出來(lái)了，但數(shù)字周圍還有沒(méi)被翻開(kāi)的格子的話，雙擊該格子，自動(dòng)將其他格子翻開(kāi)

好，這下規(guī)則我們了解了，接下來(lái)，摩拳擦掌，開(kāi)始寫(xiě)代碼咯，本次代碼用vue來(lái)寫(xiě)，沒(méi)有原因，習(xí)慣了而已。

掃雷代碼邏輯

看著游戲規(guī)則，我們先來(lái)理一理，要如何完成這個(gè)功能，我們以最簡(jiǎn)單的，最能使人理解的步驟，來(lái)完成這次功能。

1. 難度選擇
2. 根據(jù)選擇的游戲難度繪制游戲主界面，就是格盤(pán)
3. 根據(jù)選擇的游戲難度隨機(jī)生成地雷放到盤(pán)中
4. 計(jì)算每個(gè)格子周圍的雷數(shù)
5. 完成用戶交互（左鍵點(diǎn)擊翻格子，右鍵點(diǎn)擊放雷）
6. 空白格擴(kuò)散翻格子
7. 計(jì)算游戲結(jié)束

生成項(xiàng)目

避免vue新手不知如何下手，那就從建項(xiàng)目開(kāi)始吧，環(huán)境安裝我就不講了，腳手架也是要有的

第一步，初始化lovesweeping工程（阿望不喜歡地雷，喜歡小桃心）

項(xiàng)目很小，不需要路由，不需要vuex，即可完成，只帶了sass，連eslint都可以不要，看官們可以根據(jù)自己的喜好建項(xiàng)目

項(xiàng)目生成之后，helloworld就可以刪掉了，它的存在并沒(méi)有什么意義

文件切分

這一步主要是構(gòu)建工程結(jié)構(gòu)，簡(jiǎn)單畫(huà)一下主要的幾個(gè)文件

- src
 - components
  - SelectLevel.vue [新增，難度選擇組件]
  - LoveSweeping.vue [新增，游戲界面組件]
 - App.vue [父組件，負(fù)責(zé)組件間的切換和某些數(shù)據(jù)傳遞]
 - main.js
- package.json

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：阿望教你用vue寫(xiě)掃雷小游戲-創(chuàng)新互聯(lián)
地址分享：http://aaarwkj.com/article40/dshiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、定制開(kāi)發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)