---
# System prepended metadata

title: 10/5 Arcade再進化-迷宮產生器(3)
tags: [2022 iThome 鐵人賽]

---

---
tags: 2022 iThome 鐵人賽 
title: 10/5 Arcade再進化-迷宮產生器(3)
AUTHOR: 
---
# 二元樹迷宮遊戲
>前面已經介紹過二元樹迷宮的生成原理以及在arcade網站中做出了簡易版的迷宮遊戲
>現在就讓我們把這兩個結合在一起吧

## 本篇內容
製作出上次迷宮遊戲的進化版
能夠自動生成迷宮的遊戲



### 主程式
我們可以將主程式拆分成這幾個步驟
![](https://i.imgur.com/wEhihrd.png)



### setup 初始化
在這裡，我們需要創建row跟col兩個變數
![](https://i.imgur.com/N4lJj2y.png)

![](https://i.imgur.com/rudWq4B.png)

剩下如圖所示
![](https://i.imgur.com/j0jXoTe.png)



### draw_map 畫出地圖
我們將直欄或橫列其中一個為偶數的格子都設為牆壁
若都沒有偶數，就跳過該格
![](https://i.imgur.com/OopeDL0.png)


另外，將最右邊及最下面都設為道路

程式: ![](https://i.imgur.com/56in9tM.png)

效果: ![](https://i.imgur.com/dibiaV4.png)

*關於這個方塊
![](https://i.imgur.com/jTiSzrk.png)

最一剛開始並不會有任何貼圖給你選
所以我們必須回到setup的這個方塊
點擊這裡後進入地圖編輯器
![](https://i.imgur.com/H1yPcVw.png)


按照下圖操作
![](https://i.imgur.com/cR7q3O2.png)

圖案才會出現給你選擇
![](https://i.imgur.com/kZfsFla.png)



### draw_path 畫出路徑
從空白的地方隨機向右或向下設為路徑
如下圖範例
![](https://i.imgur.com/LMAZJFS.png)

![](https://i.imgur.com/dPJaoVm.png)


程式: ![](https://i.imgur.com/7zWfBEV.png)



### build_wall 在tilemap中設定牆壁
如果少了這步，單單牆壁圖案可阻擋不了我們的角色
因此，此步驟對迷宮來說至關重要

程式: ![](https://i.imgur.com/wzPxfX5.png)

設定牆壁前 ![](https://i.imgur.com/3H8BwCN.gif)

設定牆壁後 ![](https://i.imgur.com/wjhueR4.gif)

由上圖可以感受到明顯的差別



### 人物動畫
如果角色移動完全沒有動作，會顯得非常單調
因此，我們要將角色移動時會走路的效果做出來
方法為 當X鍵被按下時，播放動畫

點擊進入編輯器
![](https://i.imgur.com/NMInnYi.png)

選取素材庫
![](https://i.imgur.com/nsq3nRk.png)

黃色框選的部分為使用的素材 (可自行發揮)
分別對應 向左、向右、向上、向下
![](https://i.imgur.com/iRxv6JG.png)

當按下4種方向鍵時，播放不同方向的走路動畫
間隔為100毫秒，循環開啟
![](https://i.imgur.com/AIHA7Ot.png)



### 設定遊戲通關條件
配合我們在主程式中已經設定好了寶箱以及倒計時
![](https://i.imgur.com/CuoFqmo.png)

將通關的畫面寫出來
![](https://i.imgur.com/EZqBikg.png)



### *最終成果*
通關: ![](https://i.imgur.com/IjCDQzZ.gif)


失敗: ![](https://i.imgur.com/Iy9Foum.gif)


[成品連結](https://arcade.makecode.com/S51563-68682-32832-40220)


##### 作者: 王騰偉