連連看相信大家都玩過，但這個用Kitronik AR CADE游戲手柄來玩連連看的項目你相信是一個高一學生做的嗎？沒錯，這位來自重慶一所中學的高一學生經過他哥哥的推薦來參加我們的Funpack10期活動，并且他和他哥哥一人設計了一個游戲，屬于自己的小游戲。下面就來看看連連看這款小游戲如何設計的吧。

項目鏈接：https://www.eetree.cn/project/detail/474 ，代碼已開源在電子森林。

實現功能

本次FunPack活動可大致分為兩個任務

移植或者設計一款游戲

設計一款摩斯密碼練習器

在確定參加這期活動之后一直在糾結是按鍵游戲還是設計摩斯密碼練習器，如果按鍵游戲又在游戲主題上搖擺不定，摩斯密碼練習器又感覺是一個很麻煩的任務。恰巧在網絡上亂翻時看到了連連看的算法思路，就選定了在Kitronik ARCADE上實現一款連連看游戲。

實現思路及代碼介紹

連連看是一種很受大家歡迎的小游戲。下面四張圖給出了最基本的消除規則：

圖 A 中出現在同一直線上無障礙的圈圈可以消除；圖 B 中兩個圈圈可以通過一次轉彎消除；圖 C 和圖 D 中，兩個圈圈可以通過兩次轉彎消除。

由于Kitronik ARCADE的屏幕一次只能完整顯示10*7個圖塊，所以將地圖設計為10*7大小。在游戲中使用數組的方式表示地圖信息，使用不同的值表示不同的圖塊，0表示此位置為空，作為一個平面游戲，使用二維數組來保存地圖信息最好理解，但由于makecode中函數接口只提供了一維數組。所以只能使用一維數組表示二維信息。創建一個大小為70的一維數組，對于數組中的數據，索引值index/10就是圖塊行Y的值，index%10即為圖塊列X的值。

圖形顯示以及選擇實現

對于連連看這款游戲，大家多多少少都知道怎么玩，所以這里不介紹玩法。

一、地圖創建以及顯示

連連看游戲由不同的圖塊組成，上面介紹到地圖信息確定為大小70的一維數組表示，且不同X、Y坐標位置的數值索引值都已經確定，則這里就會想到通過不同的值表示不同的圖塊，在游戲中一共使用了7個不同的圖塊，需要在設置圖塊地圖時添加進入。

1、地圖的創建

通過函數InitLevelOneImage，InitLeveTwoImage。。。初始化數組的方式初始化不同關卡地圖信息。

2、地圖的顯示

遍歷地圖數組

通過索引位置確定圖塊位置信息

通過數組值將不同的圖塊放到確定的位置上

二、選擇框的移動、消除、更新

1、選擇框的創建

創建一個SelectBox對象用于表示選擇框，將選擇框與左上角第一個圖塊重疊（圖塊的大小為16*16，然后地圖行列的間隔都是16，所以（8，8）為第一個圖塊位置）

2、選擇框的移動

1）上

判斷SelectBox對象是否在第一行（posY = 8），若在第一行則將圖塊移動到最后一行（第7行，posY = 104），若不在最上一行則直接往上移動一行（將posY減16）

2）下

與向上移動同理，判斷SelectBox對象是否在最后一行（第七行，posY = 104），若在最后一行則將圖塊移動到第一行（posY = 8），若不在第七行則直接往下移動一行（將posY加16）

3）左

判斷SelectBox對象是否在第一列（posX= 8），若在第一列則將圖塊移動到最右一列（第10列，posX = 152），若不在第一列則直接往左移動一列（將posX減16）

4）右

與左移同理，判斷SelectBox對象是否在最后一列（第10列，posX= 152），若在最后一列則將圖塊移動到第一列（posX = 8），若不在最后一列則直接右移一列（將posX加16）

三、選定、取消、消除條件、消除完成判斷、關卡更新

游戲中通過A按鍵選定圖塊，與選擇框類似，只需要A按下時若當前位置不為空，且不為Choice精靈，則在當前選擇框的位置創建Choice精靈即可，由于需要選擇兩個圖塊，所以A鍵按下時需要判斷是否已經存在了一個Choice精靈（創建ChoiceBoxNums變量表示Choice精靈的數量），若存在則創建第二個Choice精靈，同時運行函數判斷是否能被消除。

A按下（選定）

1）判斷是否為空

2）若不為空且ChoiceBoxNums == 0時在當前位置創建ChoiceOne精靈，ChoiceBoxNums置1

3）若不為空且ChoiceBoxNums == 1且當前位置不為ChoiceOne位置，則創建ChoiceTwo精靈

消除條件

當ChoiceBoxNums == 2時，表示已經選定了兩個圖塊，此時調用消除函數進行判斷與消除。

消除完成判斷及關卡更新

當地圖數組全為0時表示消除完成，在每次進行判斷消除之后進行一次判斷是否消除完成，使用遍歷數組然后相加的求和的方式得到和，若為0，則表示消除完。若消除完則根據關卡信息決定是進入下一關還是結束游戲。

地圖初始化（關卡更新）

更新關卡只需要修改地圖數組，然后更改一些特定的值即可完成新地圖的載入，Levels表示當前關卡

消除算法

算法參考鏈接：https://blog.csdn.net/qq_41551359/article/details/82983513，并進行了簡單的移植和更改。

設計函數isBlocked 表示x，y位置是否有圖塊（有無障礙），實現思路為查找數組Y*10+X索引處的值是否為0，若為0則表示此處為空，否則有障礙。

1、水平檢測

水平檢測用來判斷兩個點的縱坐標是否相等，同時判斷兩點間有沒有障礙物。

定義函數horizon直接檢測兩點間是否有障礙物。

先判斷A、B是否為同一個點

判斷是否為水平關系

確定前后關系

使用循環遍歷A、B中間的位格，若有一個為有圖塊則不能水平消除

2、垂直檢測

垂直檢測用來判斷兩個點的橫坐標是否相等，同時判斷兩點間有沒有障礙物。

與水平檢測原理一致，定義函數vertical直接檢測兩點之間是否有障礙物

先判斷A、B是否為同一個點

判斷是否為垂直關系

確定上下關系

使用循環遍歷A、B中間的位格，若有一個為有圖塊則不能水平消除

3、一個拐角檢測

一個拐角檢測可分解為水平檢測和垂直檢測，當兩個同時滿足時，便兩點可通過一個拐角相連。即：

一個拐角檢測 = 水平檢測 && 垂直檢測

A 點至 B 點能否連接可轉化為滿足任意一點：

A 點至 C 點的垂直檢測，以及 C 點至 B 點的水平檢測；

A 點至 D 點的水平檢測，以及 D 點至 B 點的垂直檢測。

定義函數 turn_once 用于一個拐角檢測

判斷A、B兩點是否為同一點

判斷C（X1，Y2）點是否為空

C、B水平檢測&&A、C垂直檢測，都滿足則返回1

判斷D（X2，Y1）是否為空

A、D水平檢測&&B、D垂直檢測，都滿足則返回1

都不滿足則返回0，表示不能一個拐點消除

4、兩個拐角檢測

兩個拐角檢測可分解為一個拐角檢測和水平檢測或垂直檢測。即：

兩個拐角檢測 = 一個拐角檢測 && （水平檢測 || 垂直檢測）

水平、垂直分別穿過 A B 共有四條直線，掃描直線上所有不包含 A B 的點，看是否存在一點 C ，滿足以下任意一項：

A 點至 C 點通過水平或垂直檢測，C 點至 B 點可通過一個拐角連接。（圖中用 C 表示）

A 點至 C 點可通過一個拐角連接，C 點至 B 點通過水平或垂直連接。（圖中用 C 下劃線表示）

創建函數turn_twice用于兩個拐角檢測：

判斷A、B兩點是否為同一點

對地圖數組進行遍歷（temp_x 0-9，temp_y 0-6）

如果C點跟A、B兩點都不為水平或者垂直關系，則跳過

若C點坐標為A或者B點，跳過

判斷C點是否為空，若為空則跳過

A點與C點做一個拐角檢測，C點與B點做水平檢測或垂直檢測，A、B兩點關系都滿足則返回1表示C點條件滿足

B點與C點做一個拐角檢測，C點與A點做水平檢測或垂直檢測，A、B兩點關系都滿足則返回1表示C點條件滿足

否則返回0

5、算法整合

目前為止，連連看的基本算法都已經實現，整合創建一個remove函數判斷相同圖塊的兩點是否能通過以上四種算法消除。

判斷兩個點是否為同一圖塊

判斷是否能水平消除，若能則將兩個位置的數組內容置為0，表示空。

否則判斷是否能垂直消除，若能則將兩個位置的數組的內容置0

否則判斷是否能一個拐點消除，若能則將兩個位置的數組值置為0

否則判斷兩點能否兩個拐點消除，若能則將兩個位置的數組值置為0

不管是否消除兩個圖塊，銷毀兩個選擇框精靈，將選擇框數量變量值置為0

演示說明

游戲開始，游戲地圖初始化，開始倒計時。

按下A鍵選中方塊，紅框表示方框已選中，然后找到一個與此方塊相同的方塊，再次選中即可消除。

成功消除第一關全部方塊后，自動開始下一關。

在規定時間內消除所有方塊即可獲勝

如果沒有按時消除所有方塊就會失敗

心得體會

這是我第一次參加Funpack活動，這次活動使我感觸很深，青少年可以低成本地通過Funpack的活動認識到游戲編譯的樂趣，很有教育意義。

編輯：jq