--- tags: 2022 iThome 鐵人賽 title: 9/21 Arcade再進化-迷宮產生器 AUTHOR: 王騰偉 --- # 迷宮產生器 >迷宮 一種老少咸宜的益智遊戲 擁有令人眼花撩亂的路線 經過一番思考後,抵達終點 總是讓人充滿成就感 --- ##### 但每次都要製作新的迷宮,有點麻煩 ##### 有沒有可能,讓迷宮自己生成呢? --- ## 二元樹迷宮 > 二元樹演算可以說是最簡易的自動生成迷宮的方式了 是一個非常好的出發點 >將最上面和最右邊相通,保證所有路徑連通 且每個路徑只有一個出口 任選兩點就一定只有一條路徑相連 ### 成果預覽 ![](https://i.imgur.com/ACULqFL.gif) [迷宮產生器](https://makecode.com/_C40dW2KK7bP3) ### 原理解析 1. 如果有10x10個這種方塊 ![](https://i.imgur.com/R7J6Icv.png) 疊在一起會變成 ![](https://i.imgur.com/LRysuKr.png) 2. 接下來將每一個方塊![](https://i.imgur.com/VYW55kr.png)隨機選擇變成上邊![](https://i.imgur.com/siqKH4j.png)與右邊![](https://i.imgur.com/mVsayZC.png) 會變成這樣 單排 ![](https://i.imgur.com/AlFSlJx.png) 單排*N (由下往上疊加) ![](https://i.imgur.com/YMLGLA1.png) 3. 並將最右邊一排固定為右邊 以及最上面一排固定為上邊 就可以形成 ![](https://i.imgur.com/V8tjh38.png) 4. 最後再將左邊及下面缺漏的地方包起來 ![](https://i.imgur.com/GgRxTs3.png) **迷宮完成** --- ## 在arcade上實作 ### 主程式 - **遊戲的初始化設定** ![](https://i.imgur.com/pWsQjjt.png) 1. 設定背景為白色。 如果不設定背景顏色,背景會是全黑的 2. 自訂起點與終點位置座標 ![](https://i.imgur.com/M43jIyA.png) 值得注意的是,跟我們平時習慣的 (x,y) 直角座標不同。在Arcade裡,向右是+x,向下是+y,原點在畫面的左上角。預設畫面解析度為160x120 ![](https://i.imgur.com/BEasd2U.png) - **完成迷宮的副程式** ![](https://i.imgur.com/yV515kq.png) ### print square副程式 大致上是以一個已打通的細胞重複列印十次 每次改變一下座標 - 上半部分 利用![](https://i.imgur.com/KvUxJAW.png)上邊和右邊![](https://i.imgur.com/mBOdiF6.png) 畫出最右邊和最上面固定的邊框 程式: ![](https://i.imgur.com/Mps1nAk.png) 效果: ![](https://i.imgur.com/o2do2Lr.png) - 下半部分 將左邊及下面缺的牆壁補上 與上半部分大致相同 只是將方塊替換成![](https://i.imgur.com/KRxaPc2.png)左邊與![](https://i.imgur.com/XeX8fEc.png)下邊 程式: ![](https://i.imgur.com/w6gJ8Zw.png) 效果: ![](https://i.imgur.com/B0JNixy.png) 加起來也就是畫一個正方形 ![](https://i.imgur.com/is7WI6M.png) ### print maze 副程式 將隨機選擇方塊後 定義為 *Maze類別* (與重新生成功能相關) 並按照下圖順序列印出來 ![](https://i.imgur.com/V4uN87k.png) 程式: ![](https://i.imgur.com/xloR9KI.png) 效果: ![](https://i.imgur.com/L9qDmDc.png) ### 重新生成迷宮 玩完迷宮只需要按A鍵就可以完新的迷宮 程式: ![](https://i.imgur.com/EgWn9Cn.png) ## 最終成品 ![](https://i.imgur.com/xokOhoc.gif) 因為程式只決定路徑允許往上或往右 所以無論迷宮如何改變,不管起點在哪個地方 只需往右上方走即可抵達終點 且最終的出口一定在右上方 [迷宮產生器](https://makecode.com/_C40dW2KK7bP3) ### 參考資料 [二元樹迷宮](https://openhome.cc/Gossip/P5JS/BinaryTreeMaze.html) ##### 作者: 王騰偉