剛剛寫了小程序入門沒幾天,小程序就開放我的開發者資格,感受爲我而來啊 \(≧▽≦)/。火燒眉毛的去註冊,準備將以前的處女做傳上去體驗一把,結果卡在了服務器配置上:免費的果真不靠譜/(ㄒoㄒ)/~~,後來嘗試用我的服務器轉發代理請求,發現不支持http,必須https!必須https!必須https!html
好不容易作的項目不能上線,感受心被掏空了,這種憋屈你們懂得~,因而不甘寂寞的我,準備作個不須要請求的單機版,就是這麼機智(*^__^*) 嘻嘻……文末高能,慎入~jquery
接下來咱們開始動手吧,以前作過相似連連看,此次準備嘗試作個小程序掃雷,來個最終效果圖,先睹爲快吧git
由於有了上一節入門基礎,這一節就講的快一點,若是有什麼不太理解的,能夠去看個人上一篇文章《微信小程序-開發入門(一)》github
1、初始化項目web
主要包括:設置app.js、app.json和app.wxss三個文件,創建pages文件結構json
//app.js,將遊戲配置文件放在APP中,可實現跨頁之間共享 App({ row:12,//掃雷遊戲的行數 column:8,//掃雷遊戲的列數 bomb:8//包含雷的總數 })
2、遊戲頁面邏輯小程序
重點在首頁遊戲邏輯的處理,由於小程序以數據爲驅動,沒法操做dom,因此不少實現最終要落實到數據上,查看以下index.js微信小程序
//index.js Page({ data: { dialog_warn:false,//經過修改此數據值,改變彈框的顯示狀態 dialog_suc:false, //遊戲成功,設爲true,視圖層經過wx:if來判斷是否渲染該彈窗 count:null,//翻牌計數,初始值爲app.row*app.column gamearr:[]//遊戲地圖的基礎數據(二維數組),根據此來生成遊戲 } })
<!--index.wxml--> <view class="dialog warn" wx:if="{{dialog_warn}}"> <icon type="warn" size="60" color="orange"></icon> <text>Game Over</text> <button bindtap="reset">從新開始</button> </view> <view class="dialog success" wx:if="{{dialog_suc}}"> <icon type="success" size="60" color="green"></icon> <text>Success~</text> <button bindtap="reset">從新開始</button> </view>
根據app.js中的數據,生成遊戲地圖數據:gamearr數組
setgamearr:function(row,column,bomb){//根據行列設置遊戲二維數組(地圖) var that=this; var arrmap=[];//二維初始數組,全爲空 for(var i=row-1;i>=0;i--){ arrmap[i]=[]; for(var j=column-1;j>=0;j--){arrmap[i][j]={val:"",cover:true};}//val用來記錄周邊雷的數量,cover用來記錄是否翻開:無dom操做只能用數據記錄狀態 } var arr=[];//一維天然數 for(var k=row*column-1;k>=0;k--){arr[k]=k} //隨機炸彈位置 for(var h=bomb-1;h>=0;h--){ var seat=arr.splice(Math.floor(Math.random()*arr.length),1)[0] var r=Math.floor(seat/column),c=Math.floor(seat%column); //console.log(seat+'\n'+r+","+c); arrmap[r][c].val="B"; arrmap=that.addcount(r,c,arrmap)//給炸彈周圍九宮格增長標記數 } that.setData({gamearr:arrmap}) },
給炸彈周圍九宮格增長標記數服務器
addcount:function(r,c,arrmap){ var that=this; if(r-1>=0){//九宮格上三個 if(c-1>=0 && arrmap[r-1][c-1].val!="B"){arrmap[r-1][c-1].val++} if(arrmap[r-1][c].val!="B"){arrmap[r-1][c].val++} if(c+1<app.column && arrmap[r-1][c+1].val!="B"){arrmap[r-1][c+1].val++} } if(r+1<app.row){//九宮格下三個 if(c-1>=0 && arrmap[r+1][c-1].val!="B"){arrmap[r+1][c-1].val++} if(arrmap[r+1][c].val!="B"){arrmap[r+1][c].val++} if(c+1<app.column && arrmap[r+1][c+1].val!="B"){arrmap[r+1][c+1].val++} } //九宮格左右兩個 if(c-1>=0 && arrmap[r][c-1].val!="B"){arrmap[r][c-1].val++} if(c+1<app.column && arrmap[r][c+1].val!="B"){arrmap[r][c+1].val++} return arrmap; }
生成數據後,根據數據生成頁面視圖
<view class="game"> <view class="tr" wx:for="{{gamearr}}" wx:for-index="row" wx:for-item="itemrow"><!--根據數據遍歷行--> <view class="td" wx:for="{{itemrow}}" wx:for-index="column" wx:for-item="itemcolumn" data-row="{{row}}" data-column="{{column}}" bindtap="taphandler"> <view class="mask" wx:if="{{itemcolumn.cover}}"></view><!--遮罩層,沒法用僞元素before來更改狀態,只能數據來判斷了--> <text wx:if="{{itemcolumn.val==''}}">{{itemcolumn.val}}</text><!--根據數值顯示不一樣樣式,若是是web能用jquery選擇器就簡單多了,這裏略顯複雜--> <text class="color1" wx:elif="{{itemcolumn.val==1}}">{{itemcolumn.val}}</text> <text class="color2" wx:elif="{{itemcolumn.val==2}}">{{itemcolumn.val}}</text> <text class="color3" wx:else>{{itemcolumn.val}}</text> </view> </view>
</view>
遊戲控制部分,單元格tap事件
//遊戲控制部分 taphandler:function(e){ var that=this; var r=e.currentTarget.dataset.row,c=e.currentTarget.dataset.column;//沒法想jquery得到index,只能用數據記錄,直接獲取嘍 if(that.data.gamearr[r][c].val!="B"){//若是沒點到炸彈 that.data.gamearr[r][c].cover=false; that.data.count--; that.setData({count:that.data.count}) if(that.data.count==app.bomb){that.setData({dialog_suc:true})}//當剩餘單元格計數等於雷數,遊戲勝利 if(that.data.gamearr[r][c].val==""){//若是點到的是空,將它周圍的四個打開 that.data.gamearr=that.show4(r,c,that.data.gamearr) // that.data.gamearr=that.show9(r,c,that.data.gamearr)//原先考慮九點,結果遞歸直接棧溢出了,(⊙﹏⊙)b } console.log(that.data.count) }else{that.setData({dialog_warn:true})}//點到了雷,遊戲結束 that.setData({gamearr:that.data.gamearr}) }
若是點擊爲空,將它周圍四個翻牌,並進行遞歸操做
show4:function(r,c,arrmap){//顯示周邊的4點 var that=this; if(r-1>=0 && arrmap[r-1][c].val==""){//上 if(arrmap[r-1][c].cover){ arrmap[r-1][c].cover=false;that.data.count--;that.setData({count:that.data.count}) that.show4(r-1,c,arrmap)//遞歸 } } if(r+1<app.row && arrmap[r+1][c].val==""){//下 if(arrmap[r+1][c].cover){ arrmap[r+1][c].cover=false;that.data.count--;that.setData({count:that.data.count}) that.show4(r+1,c,arrmap)//遞歸 } } if(c-1>=0 && arrmap[r][c-1].val==""){//左 if(arrmap[r][c-1].cover){ arrmap[r][c-1].cover=false;that.data.count--;that.setData({count:that.data.count}) that.show4(r,c-1,arrmap)//遞歸 }} if(c+1<app.column && arrmap[r][c+1].val==""){//右 if(arrmap[r][c+1].cover){ arrmap[r][c+1].cover=false;that.data.count--;that.setData({count:that.data.count}) that.show4(r,c+1,arrmap)//遞歸 }} return arrmap; }
3、遊戲設置
遊戲設置就相對簡單了,直接讀取app.js的數據爲設置頁的數據,操做修改則修改app數據,而後切換回遊戲頁面onshow獲取更新後的數據從新生成遊戲
// pages/set/set.js var app = getApp(); Page({ data:{ row:app.row, column:app.column, bomb:app.bomb },//遊戲設置部分,修改設置將從新生成遊戲 rowChange:function(e){app.row=e.detail.value;}, columnChange:function(e){app.column=e.detail.value;}, bombChange:function(e){app.bomb=e.detail.value;} })
4、總結
作完了發佈上傳的時候才發現,小程序的分類裏面沒有遊戲,更多的是工具應用類,不知道小程序之後會不會放開服務類目,拭目以待吧~
項目源文件:https://github.com/gavin125/wx_game
上傳小程序審覈等了一天,結果不經過詳情以下,(⊙o⊙)…我想一我的靜靜…