---
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" + "==================================================");
}
```
Sign in with Wallet
Connect another wallet