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

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

實(shí)現(xiàn)功能

本次FunPack活動(dòng)可大致分為兩個(gè)任務(wù)

移植或者設(shè)計(jì)一款游戲

設(shè)計(jì)一款摩斯密碼練習(xí)器

在確定參加這期活動(dòng)之后一直在糾結(jié)是按鍵游戲還是設(shè)計(jì)摩斯密碼練習(xí)器，如果按鍵游戲又在游戲主題上搖擺不定，摩斯密碼練習(xí)器又感覺是一個(gè)很麻煩的任務(wù)。恰巧在網(wǎng)絡(luò)上亂翻時(shí)看到了連連看的算法思路，就選定了在Kitronik ARCADE上實(shí)現(xiàn)一款連連看游戲。

實(shí)現(xiàn)思路及代碼介紹

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

圖 A 中出現(xiàn)在同一直線上無障礙的圈圈可以消除；圖 B 中兩個(gè)圈圈可以通過一次轉(zhuǎn)彎消除；圖 C 和圖 D 中，兩個(gè)圈圈可以通過兩次轉(zhuǎn)彎消除。

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

圖形顯示以及選擇實(shí)現(xiàn)

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

一、地圖創(chuàng)建以及顯示

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

1、地圖的創(chuàng)建

通過函數(shù)InitLevelOneImage，InitLeveTwoImage。。。初始化數(shù)組的方式初始化不同關(guān)卡地圖信息。

2、地圖的顯示

遍歷地圖數(shù)組

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

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

二、選擇框的移動(dòng)、消除、更新

1、選擇框的創(chuàng)建

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

2、選擇框的移動(dòng)

1）上

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

2）下

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

3）左

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

4）右

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

三、選定、取消、消除條件、消除完成判斷、關(guān)卡更新

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

A按下（選定）

1）判斷是否為空

2）若不為空且ChoiceBoxNums == 0時(shí)在當(dāng)前位置創(chuàng)建ChoiceOne精靈，ChoiceBoxNums置1

3）若不為空且ChoiceBoxNums == 1且當(dāng)前位置不為ChoiceOne位置，則創(chuàng)建ChoiceTwo精靈

消除條件

當(dāng)ChoiceBoxNums == 2時(shí)，表示已經(jīng)選定了兩個(gè)圖塊，此時(shí)調(diào)用消除函數(shù)進(jìn)行判斷與消除。

消除完成判斷及關(guān)卡更新

當(dāng)?shù)貓D數(shù)組全為0時(shí)表示消除完成，在每次進(jìn)行判斷消除之后進(jìn)行一次判斷是否消除完成，使用遍歷數(shù)組然后相加的求和的方式得到和，若為0，則表示消除完。若消除完則根據(jù)關(guān)卡信息決定是進(jìn)入下一關(guān)還是結(jié)束游戲。

地圖初始化（關(guān)卡更新）

更新關(guān)卡只需要修改地圖數(shù)組，然后更改一些特定的值即可完成新地圖的載入，Levels表示當(dāng)前關(guān)卡

消除算法

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

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

1、水平檢測

水平檢測用來判斷兩個(gè)點(diǎn)的縱坐標(biāo)是否相等，同時(shí)判斷兩點(diǎn)間有沒有障礙物。

定義函數(shù)horizon直接檢測兩點(diǎn)間是否有障礙物。

先判斷A、B是否為同一個(gè)點(diǎn)

判斷是否為水平關(guān)系

確定前后關(guān)系

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

2、垂直檢測

垂直檢測用來判斷兩個(gè)點(diǎn)的橫坐標(biāo)是否相等，同時(shí)判斷兩點(diǎn)間有沒有障礙物。

與水平檢測原理一致，定義函數(shù)vertical直接檢測兩點(diǎn)之間是否有障礙物

先判斷A、B是否為同一個(gè)點(diǎn)

判斷是否為垂直關(guān)系

確定上下關(guān)系

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

3、一個(gè)拐角檢測

一個(gè)拐角檢測可分解為水平檢測和垂直檢測，當(dāng)兩個(gè)同時(shí)滿足時(shí)，便兩點(diǎn)可通過一個(gè)拐角相連。即：

一個(gè)拐角檢測 = 水平檢測 && 垂直檢測

A 點(diǎn)至 B 點(diǎn)能否連接可轉(zhuǎn)化為滿足任意一點(diǎn)：

A 點(diǎn)至 C 點(diǎn)的垂直檢測，以及 C 點(diǎn)至 B 點(diǎn)的水平檢測；

A 點(diǎn)至 D 點(diǎn)的水平檢測，以及 D 點(diǎn)至 B 點(diǎn)的垂直檢測。

定義函數(shù) turn_once 用于一個(gè)拐角檢測

判斷A、B兩點(diǎn)是否為同一點(diǎn)

判斷C（X1，Y2）點(diǎn)是否為空

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

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

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

都不滿足則返回0，表示不能一個(gè)拐點(diǎn)消除

4、兩個(gè)拐角檢測

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

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

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

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

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

創(chuàng)建函數(shù)turn_twice用于兩個(gè)拐角檢測：

判斷A、B兩點(diǎn)是否為同一點(diǎn)

對地圖數(shù)組進(jìn)行遍歷（temp_x 0-9，temp_y 0-6）

如果C點(diǎn)跟A、B兩點(diǎn)都不為水平或者垂直關(guān)系，則跳過

若C點(diǎn)坐標(biāo)為A或者B點(diǎn)，跳過

判斷C點(diǎn)是否為空，若為空則跳過

A點(diǎn)與C點(diǎn)做一個(gè)拐角檢測，C點(diǎn)與B點(diǎn)做水平檢測或垂直檢測，A、B兩點(diǎn)關(guān)系都滿足則返回1表示C點(diǎn)條件滿足

B點(diǎn)與C點(diǎn)做一個(gè)拐角檢測，C點(diǎn)與A點(diǎn)做水平檢測或垂直檢測，A、B兩點(diǎn)關(guān)系都滿足則返回1表示C點(diǎn)條件滿足

否則返回0

5、算法整合

目前為止，連連看的基本算法都已經(jīng)實(shí)現(xiàn)，整合創(chuàng)建一個(gè)remove函數(shù)判斷相同圖塊的兩點(diǎn)是否能通過以上四種算法消除。

判斷兩個(gè)點(diǎn)是否為同一圖塊

判斷是否能水平消除，若能則將兩個(gè)位置的數(shù)組內(nèi)容置為0，表示空。

否則判斷是否能垂直消除，若能則將兩個(gè)位置的數(shù)組的內(nèi)容置0

否則判斷是否能一個(gè)拐點(diǎn)消除，若能則將兩個(gè)位置的數(shù)組值置為0

否則判斷兩點(diǎn)能否兩個(gè)拐點(diǎn)消除，若能則將兩個(gè)位置的數(shù)組值置為0

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

演示說明

游戲開始，游戲地圖初始化，開始倒計(jì)時(shí)。

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

成功消除第一關(guān)全部方塊后，自動(dòng)開始下一關(guān)。

在規(guī)定時(shí)間內(nèi)消除所有方塊即可獲勝

如果沒有按時(shí)消除所有方塊就會失敗

心得體會

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

編輯：jq