天天看點

微信小遊戲開發實戰7:圖形的資料驗證

​​上一篇​​文章内容很多,也挺難的,不光我自己寫的很累,估計讀者讀的也很累,這并不是我想要的結果。每一篇教程我都希望它能夠幫助讀者學到一點兒新的東西,并在小遊戲開發的道路上向前行進一步。如果一篇技術型的文章過長,就很容易把讀者吓退,進而會失去它本來應該傳遞的資訊和價值。是以從這篇教程開始,我決定每一篇都聚焦于一個小功能,一個知識點,并盡力把它講透,講明白。希望它能幫助你進行點滴的積累,建構起自己的小遊戲。

言歸正傳,上一節中我們實作了将拖拽的圖形放置到網格中,在真實的遊戲中網格并不會總是空的,如果網格上的位置已經被填充了,那麼圖形是不能重疊放置的。這一節,我們就來實作一下圖形的資料驗證,判斷拖拽的圖形到底能不能放置在目前的位置上。

先來看一張圖。

微信小遊戲開發實戰7:圖形的資料驗證

圖中有1~6編号的6個圖形,超出網格邊界或者重疊的位置都不能放置,是以編号1~5的圖形都不能被放置,隻有圖形6可以被放置。

實作思路一目了然了,判斷一個圖形能不能被放置,需要同時滿足兩個條件:

  • 圖形位于網格之内,不能超出網格的任一邊界。
  • 網格的目前位置沒有被填充。

下面,我們就動手實作一下這樣的效果:拖拽圖形到網格上,如果目前的位置可以放置,則進行放置,如果目前的位置不能放置,則将圖形放回到原位置。

選擇“容器-1”為其增加一個“可放置”的局部變量,用于儲存驗證結果。增加“原位置X”和“原位置Y”的局部變量用于設定圖形的原始位置。

微信小遊戲開發實戰7:圖形的資料驗證

新增一個“放置形狀”的通知,如果驗證通過的話,我們會發送這個通知,告訴圖形可以進行填充了。

微信小遊戲開發實戰7:圖形的資料驗證

接着,我們看一下“容器-1”上的積木邏輯。

微信小遊戲開發實戰7:圖形的資料驗證

如圖,邏輯中做了兩個判斷:邊界判斷和目前位置是否被填充的判斷。其中“是否被填充的判斷”需要使用目前圖形的“形狀資料”與“全局-網格”資料做比對(如果你忘記了全局網格資料,請回顧​​全局網格資料​​一節),滿足放置條件的話,就發送“放置形狀”的通知,否則的話就将圖形放回原始位置。

放置形狀的邏輯如下,​​上一節​​中已經詳細講過,在此不再贅述。

微信小遊戲開發實戰7:圖形的資料驗證

最後,選擇“填充方塊”為其增加一塊邏輯積木,當在網格上填充該方塊時,将網格上目前位置的資料設定為“1”。

微信小遊戲開發實戰7:圖形的資料驗證

預覽一下場景,看一下最終的效果。

微信小遊戲開發實戰7:圖形的資料驗證

超過邊界或者已經填充的位置都無法進行放置,圖形都會傳回原位置,隻有網格内未填充的位置才能放置形狀。

總結一下:

這一節我們學習了如何對拖拽的圖形進行驗證。想要将圖形放置在網格上需要滿足兩個條件:圖形位于網格區域内,網格内目前的位置沒有被填充。

練一下:

繼續閱讀