---
# System prepended metadata

title: 9/21 Arcade再進化-迷宮產生器
tags: [2022 iThome 鐵人賽]

---

---
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)

##### 作者: 王騰偉