---
# System prepended metadata

title: 「Escape from 5F」企劃書
tags: [' ctf', ' game', project, ' django']

---

---
title: 「Escape from 5F」企劃書
tags: project, django, game, ctf
description:
    1. title 請改為 [專案名稱]企劃書
    2. tag 請刪去template，加上專案內容類型或名稱
    3. 下方會議記錄請使用會議記錄範本
    4. 加上"{%hackmd BkVfcTxlQ %}"意為套用黑色模板
---
{%hackmd BkVfcTxlQ %}
# ***Escape from 5F***

> 負責人聯絡資訊：
> 王譽錚 / 手機：0931998389 / Email：opp40519@gmail.com / Line ID: opp40519

:::info
專案參與成員：
* 王譽錚、楊斯丞、許堃陽、葉宗儒、李崇瑋
    共計 5 人
    [name=專案負責人：王譽錚]

<br/>

會議記錄：
* [Jun. 5^th^, 2020](https://hackmd.io/@Arashi/S1i2TBD3U)
:::

> [TOC]
> 

> References:
> 1. [How to create interactive terminal like website?](https://itnext.io/how-to-create-interactive-terminal-like-website-888bb0972288)
> 2. [jQuery Terminal Emulator Plugin](https://terminal.jcubic.pl/)
> 3. [網頁自動轉址/重新導向/URL重定向方法(HTML/Javascript/PHP的轉址)](https://tzuhsiang.com/webmaster/url-html-javascript-php/)
> 4. [Javascript session](http://dreamerslab.com/blog/tw/javascript-session/)

***
## **專案資訊**
* 專案時期：
    [time=] Jul. 5^th^

* 專案客戶資訊：
    * 無

* 專案預期對象：
    * SIRLA 會內成員

---
### *專案概述*
整個遊戲主要以文字 RPG 的方式進行，主畫面以一般類似終端機的樣貌呈現，在遊戲的過程中會有相當多謎題，這些謎題皆以網頁或者檔案的方式呈現。
遊戲中融合相當多的主題元素，其中包括解謎、懸疑、逃脫等，並且以夢結局的方式來結束整個遊戲

---
### *預期目標*
利用 Django 的架構利用現實中密室逃脫的概念，以 CTF 的方式進行遊戲的呈現，並將資訊相關領域的各方面知能作為題目，以提升遊戲玩家在資訊相關方面的能力。
主要提升的領域包含資訊安全、網站架設、程式語言等相關內容，藉此亦能提升會內成員在面臨問題的思維與解決問題的能力，同時也提升開發成員之運算思維。

---
## **專案內容**
### *環境*
* Python == 3.8.2
* Django == 3.0.7

### *技術簡介*
* 劇情摘要
:::info
一位名為李崇璋的學生於廁所企圖自殺，在失去意識的過程中進到了這個五樓空間，並且失去了自身的所有記憶；透過在五樓解謎的過程當中，慢慢地將所有記憶拼湊，並還原自身的狀況與自殺的原因。
在理解整個事件後從而甦醒，來選擇對於事情真相的處理，以及對於即將因失血過多死亡的自己，選擇活下去或者就此死去。
:::
* 整個遊戲主要以文字 RPG 的方式進行，主畫面以一般類似終端機的樣貌呈現，在遊戲的過程中會有相當多謎題，這些謎題皆以網頁或者檔案的方式呈現
    * 遊戲主題
        * 解謎
        * 懸疑
        * 逃脫
    * 結局
        * 夢結局
            > 需要思考入夢的理由、入夢後場景的關聯性
    * 故事線索以日記方式呈現
* 玩家的動作有：
    | 動作 | 說明 |
    | --- | --- |
    | move | 移動到另一個地圖 |
    | act | 針對物件的動作 |
    | look | 觀察地圖 |
    | show | 查詢能夠前往的地點或查詢能夠做的動作 |

### *系統架構*
```
|------------|      |----------|
| web server |------| database |
|------------|      |----------|
```



#### ++*Database Tables*++
> Use SQLite
* Flag
    * ans
    * checkpoint
    
    | ans | checkpoint |
    | --- | ---------- |
    | ANS{5+ud3n+\_!D} | billboard |
    | ANS{s3lf\_m0\[k3ry_bu+\_\[4n_n0+\_d!sp3l\_d0ub+5} | 5a - badguy space |
    | ANS{5+0p\_c0mf0r+\_y0ur\_p4!n\_!t\_!5\_l!k3\_4\_3v!l\_34gl3\_d3v0ur3d\_y0ur\_\[h3s+} | department office |

#### ++*Web Roadmap*++
* Escape
    * Django project
    
    | file / directory | description |
    | ---------------- | ----------- |
    | `settings.py`      | 基本設定      |
    | `urls.py`          | 網址設定    |
    | `＿init＿.py`       |（無需更改）   |
    | `asgi.py`          |（無需更改）   |
    | `wsgi.py`          |（無需更改）   |


* Escape_story
    * Django App
    
    | file / directory | description |
    | ---------------- | ----------- |
    | `＿init＿.py`       | （無需更改)    |
    | `admin.py`         | 管理員設定      |
    | `app.py`           | 新增app      |
    | `modles.py`        |資料庫設定   |
    | `tests.py`          |（無需更改）   |
    | `views.py`          |建立function   |

* templates
    * 放置網頁模版
    
    | file / directory | description |
    | ---------------- | ----------- |
    | `5A.html`                | 5A場景頁面    |
    | `Beginning.html`        | 初始場景頁面     |
    | `Corridor_i.html`        |走廊一場景頁面     |
    | `Corridor_ii.html`      |走廊二場景頁面   |
    | `Department＿office.html` |系辨公室場景頁面   |
    | `Toilet.html`           |廁所場景頁面   |
    | _CTF/          |放置題目網頁|

    




.
.
.
.
.
.
.

```
                     |-------------|
                 /---| CTF Problem |
                /    |-------------| 
|----------|   /
| terminal |---
|----------|   \
                \    |-------------|
                 \---| Diary       |
                     |-------------|
```

### *系統流程*
```
|--------------|
| Beginning    |
|--------------|
     |
     |
     V
|--------------|                Get "KEY"
| Toilet       |--------------------------------------------------------|
|--------------|                                                        |
     ^                                                                  |
     |                                                                  |
     |                                                                  |
     V               /----(Stair)                                       |
|--------------|    /                                                   |
| Corridor I   |----------(Elevator)                                    |
|--------------|                                                        |
     ^                                                                  |
     |                                                     |------------+---|
     |                                                     |            |   |
     |                  /----(Billboard)                   |            |   |
     |                 /           | Get              |--------------|  |   |
     |                /            | "ID Card"   /----| Badguy Space |  |   |
     V               /             V            /     |--------------|  |   |
|--------------|    /      |--------------|    /                        |   |
| Corridor II  |----------X| 5A           |----                         |   |
|--------------|    |      |--------------|    \                        |   |
     ^              |                           \     |--------------|  |   |
     |              |                            \----| De Space     |  |   |
     |              |                                 |--------------|  |   |
     |              |                                                   |   |
     |              |                                                   |   |
     |              |                                                   |   |
     |              |      |--------------|                             |   |
     |              |<----X| Department   |<----------------------------|   |
     |                     | Office       |                                 |
     |                     |--------------|                                 |
     |                                                                      |
     |<---------------------------------------------------------------------|
     |
     V
|--------------|
| Corridor III |
|--------------|
```

---
## **專案安排**
### *專案工作*
* 工作內容：
    1. 建立django與首頁和資料庫(遊戲輸入操作的那個頁面，資料表1可放flag的內容，資料表2可放玩家註冊的資料之類的)
    2. 網站UI設計
    3. 題目生成，如複製系網內容下來，並適當進行增減(像是如果複製下來的部分有連結，跳到別的地方的，看要不要刪掉)、藏flag
    4. 劇情撰寫
    5. 協助與整合

| 姓名 | 工作內容 |
| --- | ------- |
| 辣母羊 | 1, 2 |
| small ant | 2, 5 |
| 薯羊 | 2 |
| 夜猫 | 3, 4 |
| arashi | 5 |

### *專案時程*
* [time=] ~Jul. 5^th^
    * 做到 Corridor II


---
## **備註與附件**
> 劇情參考：
> [何謂思覺功能障礙?](https://www.brainlohas.org/%E4%BD%95%E8%AC%82%E6%80%9D%E8%A6%BA%E5%8A%9F%E8%83%BD%E9%9A%9C%E7%A4%99/)
> [完全自殺手冊](https://reurl.cc/0oMxdx)

### *地圖*
```
|----------------|----------|--------|----------------------|
| Boy’s Toilet   | Elevator |  Stair |       5A             |
|----------------|----------|--------|----------------------|-----------------------------------------------------------------------------------|
|                                                                                                                     |                         |
| Corridor I                Corridor II                      Corridor III                    Corridor IV              |     Learning Common     |
|                                                                                                                     |                         |
|----------------|--------| Billboard |---------------------|-------|-------|-------|-------|-------|-----------------|                         |
| Girl’s Toilet  |                    | Department Office   |  506  |  505  |  504  |  503  |  502  |  501 | Library  |-------------------------|
|----------------|                    |---------------------|-------|-------|-------|-------|-------|-----------------|     | Stair  | Elevator |
                                                                                                                            |--------|----------|    
```

### *劇情*
眼見不一定為憑...
真相...有時候就藏在所看到的細節中...

:::warning
++廁所 Toilet++
Move: 走廊一
Get: Key
:::
> Beginning
> [color=#9999FF]
>
你睜開雙眼。
眼前是熟悉卻又陌生的場景。
你唯一可以理解到的事就是你正身處廁所，四周沒有任何燈光，彷彿到了某個異空間一般。
你站起身來，摸索了一下自己，發現口袋中有自己的手機。
你打開手機的手電筒一照，看到了門口後慢慢的走出去。

> Other
> [color=#9999FF]
>
回到最初醒來的起點，周圍也沒看到什麼特別的。
用手機照到廁所隔間的門，上頭赫然是大大的幾個字，寫著：「你以為...你...逃得掉嗎...」。

> `if key == false`
> [color=#9999FF]
>
你嚇了一跳，想到最初醒來的時候牆上還沒有這些字，卻在轉眼間就冒了出來。
你強忍著心中的恐懼，慢慢地靠近隔間的門，手避開那些字，小心翼翼地推開了門。
用手機的手電筒一照，發現一道閃光反射到自己的眼中，仔細一看發現，在馬桶蓋上放著一把鑰匙。(取得系辦鑰匙)
> `if key == true`
> [color=#9999FF]
>
你看著這幾個字，已不如最初看到時的恐懼。
但是心底像是被什麼東西撓著一樣，明明應該記得什麼事情，但卻回想不起來。

:::warning
++走廊一 Corridor I++
Move: 走廊二、廁所
Look: 電梯、樓梯
:::
你走出廁所，往左看到了電梯後相當興奮，想著應該能夠坐電梯到樓下吧！
同時發現電梯旁有個本來應該是樓梯的地方。

:::info
(電梯)
按了電梯卻發現完全沒反應。
:::

:::info
(樓梯)
樓梯被一堆障礙物封了起來。
你用手機燈光照出去，發現仍舊一片漆黑。
:::


:::warning
++走廊二 Corridor II++
Move: 走廊一、走廊三、5A、系辦
Look: 佈告欄
Get: ID Card
:::
慢慢地往前走，手機微弱的燈光在黑暗中格外的明顯。
寂靜的四周僅有自己的腳步聲迴盪著。
稍微環視了一下，好像有一個佈告欄。
定睛一看，佈告欄上似乎曾經貼著什麼，但離得太遠看不清楚。
再看到旁邊的牆上寫著「你記得嗎？你是誰？」
「我當然記得，我是...我是...我是誰？」你突然發現自己完全不記得自己的身份。

:::info
(佈告欄 Billboard)
> 說明 flag 的形式
> [color=#9999FF]
>


走到佈告欄前，發現上頭有幾張已經被撕得不成形的紙，剩下的訊息似乎寫著什麼。
「...門...線索...」
「解碼...ANS{}...格式...」

> `if id_card == false`
> [color=#9999FF]
>
「ANS{5+ud3n+\_!D}...」
仔細一看，佈告欄的角落貌似還有著一張學生證，但是上頭的照片相當的模糊，彷彿被人刻意的抹掉一般。
你伸手嘗試將它拿起來，卻發現沒有辦法，明明沒有任何工具或黏著劑，卻好像被鑲嵌在上頭似的絲毫不動。
這時手機突然響了起來，跳出了一個要求輸入的畫面。
「What is your answer?」
...

> `if flag == true`
> [color=#9999FF]
>
「啪」的一聲，學生證不再黏在佈告欄上，直直地掉落到地板上。
你撿起了學生證，上頭本來應該呈現名字的地方印著：▩▩▩。
「這到底是誰的學生證？為何看不見名字？」你疑惑著。

> `if flag == false`
> [color=#9999FF]
>
手機瞬間暗屏，接著彷彿血一般紅色慢慢地蔓延整個螢幕。
在螢幕的中央緩緩地浮現出了幾個字。
「你...答錯了...呵呵呵...」
:::

:::warning
++5A++
Move: 走廊三
:::
你試著從門外看到 5A 電腦教室的內部，但小窗上的玻璃反射了手機的手電筒，看不清楚內部到底有些什麼。
轉頭一看，門的旁邊似乎有個刷卡的系統。

> `if id_card == true`
> [color=#9999FF]
>
你拿起剛剛取得的學生證往上頭一刷，門應聲而開。
走進 5A 電腦教室環視了一下，一種難以言喻的感覺湧上心頭
「這好像不是我熟悉的教室？」你正這麼想著，身後的門「碰」地一聲關上了，打也打不開。
環視周圍，無數的電腦不斷閃爍，有種令人毛骨悚然的感覺。
走到教室的最角落，上頭寫著「阿德的研究空間」，電腦被鎖了起來，需要密碼才能夠解開。(一個題目)
走到教室靠近白板的角落，一個牌子上寫著「壞人空間」，仔細檢查了一下發現有張小卡，同時那個空間連通了一扇門。(一個題目)
此時你的手機又是一震
「What is your answer?」

:::warning
++系辦 Department Office++
Move: 走廊二
:::
> `if key == false`
> [color=#9999FF]
> 
走到系辦門口，想試著推開，卻發現大門被鎖了起來
拿手機一照發現門口上似乎用了特殊的墨水，用光照射才會顯示文字
「回想當初，這是你的起點。」(鑰匙在廁所)

> `if key == true`
> [color=#9999FF]
> 
用找到的鑰匙打開了大門後，你走了進去
光往前一照，突然發現在辦公桌後方有著類似人的形狀，讓你嚇了一跳。
仔細一看...那是兩個用紙做的人形，呈現一種正襟危坐的樣子放在椅子上
原本應該是五官的部分分別寫著「童」、「靜」
「這是誰的惡作劇？」你不免皺眉思考
靠近辦公桌，發現電腦上似乎正開著網頁(一個題目)
此時你的手機一震
「What is your answer?」

#### ++走廊三 Corridor III++
Goto: 走廊二、走廊四、506、505、504、503

++506++

++505++

++504++

++503++

#### 走廊四 Corridor IV
Goto: 走廊三、共享空間、502、501、系館

++502++

++501++

++系館 Library++

#### 共享空間 Learning Common
Goto: 走廊四、樓梯、電梯

### *日記*

:::success
9 月 14 日    天氣晴
地點：系辦公室

---
這是久違的來到學校，看到了熟悉的面孔，是▩▩助教跟▩▩助教呢，真沒想到她們還記得我啊。

但是該怎麼說呢，看到她們這樣的笑臉，莫名地感受到諷刺啊...是我的問題嗎？是我開始變得不正常了嗎？還是說是她們的問題呢？

我依然笑著與她們對談著，可是心裡卻是對這樣的笑容隱隱作嘔，啊...好想破壞掉啊，這樣虛偽的日常，難道就沒有個辦法可以搞壞掉這樣的日常嗎？

可是我就覺得有些害怕...嗯？害怕？我到底在害怕什麼東西？

算了，反正我也就是個普通人，我想一般人不會在意到我的，應該說千萬不要來在意我，不然我想我應該會忍不住吧...呵呵...
:::


### *人物設定*
* 姓名：李崇璋
* 性別：男
* 年齡：23歲
* 身份：輔仁大學 圖書資訊學系 肄業生
* 身高：178 cm
* 體重：57 kg

具有相當程度的憂鬱症與思覺障礙，經常處於幻覺狀態。
在本篇故事當中因為產生了幻覺而誤認為自己殺了人，並且做了分屍；同時在肢解後憂鬱症發作而自殺，也因此失去意識而進到本篇故事的場景。
整篇故事主要探索主角內心的混亂世界，其中包括：

1. 由於社交能力下降，而導致對於名字的無法辨識
2. 由於對自身的否定，而導致對於自身名字的無法辨識
3. 各個場景有不同的心理暗示來表示各種內心的混亂
4. 每個場景都可能會有數量不一的謎題，顯示其心理上的封閉，並且在解開之後得到的日記顯示其真實的想法

其主角自幼長年受到家暴，而導致內在潛藏的報復心理，因而在成長的過程當中被牽扯入暴力相關事件層出不窮。
有過最嚴重的前科為殺人案件，死者為主角的雙親，但由於當時年僅十六，且證據不足而未被起訴或求刑，事情真相至今仍是謎題。

---
### 額外小程式
以下程式都會共用此變數︰
```javascript=
var term = $('body').terminal;
```


#### 顯示內容控制
為了控制訊息的顯示方式，特意加入 2 個 function 以便日後格式進行調整。
`display()`是針對一般顯示用句子。
`display_menu()`主要是針對會引用 array 的句子。

##### display()
* 使用方式︰
`display("stance1", "stance2", ....)`

* 程式碼︰
```javascript=
function display(){
    term.echo("\n" + "==================================================" + "\n");
    //------------content---------------------
    for (var i = 0; i < arguments.length; i++){
        term.echo("  " + arguments[i]);
    }	
			//---------------------------------------
    term.echo("\n" + "=================================================="  + "\n");
}
```


##### display_menu()
* 使用方式
`display_menu(Array, "stance1", "stance2",...)`

* 程式碼
```javascript=
    	function display_menu(menu, ...theArgs){
    		term.echo("\n" + "==================================================" + "\n");
				//------------content---------------------
				menu.forEach(i => term.echo(i));

				for (var i = menu.length; i < arguments.length; i++){
					term.echo(arguments[i]);
				}	
				//---------------------------------------
			term.echo("\n" + "==================================================");
    	}
```