---
# System prepended metadata

title: '# Camp Project'
tags: ['#文字RPG', ＃code, ＃網頁架設]

---

### 組員
* 坤逸
* 庠翊
* 鈺茗
* 立恩
* 品瑄

### 故事區
>請在下面打字
                   
（故事）一隻飢餓的狐狸看見葡萄架上掛著一串串晶瑩剔透的粉色葡萄，垂涎三尺，想要摘下來吃，但憑他的四肢都無法摘到，於是他去尋找有什麼工具可以輔助它。
(A)納西妲的元素戰技
(B)樹枝
(C\)長相奇特的魔杖(v)



回答(A):要玩原神回家玩，這裡不是୧( ಠ Д ಠ )୨
回答(B):樹枝過短鈎不到
回答(C\):他拿到魔杖之後發現它可以隨著自己的心意改變形狀，於是他成功獲得一串葡萄

---

（故事）正當狐狸要把葡萄吃掉的時候，葡萄突然被腳步迅速兔子搶走了，這時火冒三丈的狐狸應該怎麼做呢？
(A)拿魔杖戳牠
(B)拿魔杖丟牠
(C\)拿魔杖使出技能(V)

回答(A):由於魔杖太脆弱，一戳就斷
回答(B):由於丟不準，兔子逃走了
回答(C\):喊出咒語
(1)原神啟動（口嗨別選）
(2)avada kedavra(讓人事物被摧毀)(v)
(3\)領域展開（用沙士幫兔子洗頭）

回答(1)：原神啟動成功
回答(2):兔子成功被咒語擊敗
回答(3\):兔子美味品嚐兩口沙士就蹦蹦跳走了

___

（故事）經過一番波折，狐狸終於能安心的吃下那串奇妙的葡萄了，一口接著一口，狐狸能感受到，有一股莫名的力量正在湧入他的身體，他的肌肉變得更加結實，身軀龐大，他活成了動物們畏懼的形象，大家看到它都落荒而逃， 連他的白狐女朋友都離它遠去，這時候有個狐狸老奶奶要過馬路，請問他要做出什麼行為才能洗刷大家對他的壞印象呢？
(A)扶老奶奶過馬路（v)
(B)跟她索取錢財
(C\)故意在車開過來的時候把她推倒

回答(A):善良的作為被全動物界讚揚，狐狸也重新獲得了大家的喜愛
回答(B):君子愛財取之有道 
回答(C\):你覺得合理嗎：）？

---

(故事)今晚狐狸要為他的女友舉辦一場生日派對，請問他要準備什麼樣的禮物才能討白狐小姐的歡心呢？

(A)她想要很久的香奈兒包包
(B)狐狸的手寫信(v)
(C\)啥都不給

回答(A):其實她已經買過這款了，前幾天才背著那個包包出門，白狐抱怨狐狸根本沒注意她
回答(B):白狐看完後感動的落淚，他們堅信彼此能長長久久的維持感情。
回答(C\):狐狸被女友嘎了ᕦ(ò_óˇ)ᕤ

___

(故事)不久之後他們便決定步入婚姻，他們像一般的新婚夫妻一樣，會一起煮飯、一起捕獵，互相打鬧、扶持，但花朵也有他的花期，數年後他們的婚姻也伴隨著數場吵架而分離，白狐說：「我當初真的是瞎了眼才跟你結婚，我沒有你也可以過得很瀟灑，大不了就離婚啊」狐狸說：「事情到此地步，我們之間也沒有什麼好說的，到此為止吧。」請問狐狸要試著去挽回這段已經破碎的婚姻嗎？
(A)要
(B)不要（v)
(C\)選我啊笨蛋

回答(A):遇到問題的他們依舊沒去面對問題的根本，且不斷的忽視彼此的感受，再次複合的婚姻又出現了裂痕。
回答(B):不適合的就不要去迎合，沒有彼此他們自己的生活也可以過得很精彩。
回答(C\):ㄝ笨蛋：）
___
（故事）

離婚後他們終於可以做回自己，一個人的世界同樣有月升月落，也有美麗的瞬間，把它歸為記憶。白狐沒了婚約的束縛終於迎來了自由，狐狸也變回了不再因感情而困擾的朝氣狐狸，一個人也可以過得很好，螢幕前的你也不要再為感情所困了，先愛自己在試著去愛他人，完結灑花。
### 程式區
> [網頁連結在這](https://kelvinlinkk.github.io/final/index.html)
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TextGame</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="function.js"></script>
</head>
<body>
    <div>
        <span id="cover" class="cover" onclick="cover();setTimeout(()=>{fadeIn();nowLevel()},2000)"><h2>The Text Game</h2><h6>click to start</h6></span>
        <a href="https://hackmd.io/@kelvinlinkk/H1HbfVCYh" style="text-decoration: none;"><h1 id="h1">Chapter 1</h1></a>
        <p id="text" class="text"></p>
        <button id="bt1" class="bt1" onclick="getUserOpt(0)"></button>
        <button id="bt2" class="bt2" onclick="getUserOpt(1)"></button>
        <button id="bt3" class="bt3" onclick="getUserOpt(2)"></button>
    </div>
</body>
</html>
```
```css=
@font-face{
    font-family: 'ChenYuluoyan';
    src: local("ChenYuluoyan"),url(../首頁資料/font/ChenYuluoyan-Thin.ttf);
}
@font-face{
    font-family: 'NotoSansTC';
    src: url(../首頁資料/font/NotoSansTC-Black.ttf),
        url(../首頁資料/font/NotoSansTC-Thin.ttf),
        url(../首頁資料/font/NotoSansTC-Bold.ttf),
        url(../首頁資料/font/NotoSansTC-Light.ttf),
        url(../首頁資料/font/NotoSansTC-Medium.ttf),
        url(../首頁資料/font/NotoSansTC-Regular.ttf),;
}
*{margin: 0px;font-family:"NotoSansTC"}
body{background-color: black;}
h1{text-align: center;font-family: 'ChenYuluoyan', Tahoma, Geneva, Verdana, sans-serif;font-size: 64px;color: aliceblue;}
div{position: relative;width: 100%;left: 0%;min-height: 100vh;background-color: #111111;}
div p{position: relative;width: 60%;height: 50vh;top: 4vh;background-color:#000000;left: 20%;color: aliceblue; border-radius: 10px;font-family:monospace;font-size: 32px;border: 10px solid #333333;overflow-y: scroll;}
div p::after{
    content: '|';
    animation: blink 0.5s infinite
}
div span{position: fixed;top: 0px;right: 0px;width: 100vw;height: 100vh;background-color: black;z-index: 1;color: aliceblue;text-align: center;}
span h2,span h6{position: relative;top: 50%;  left: 50%;transform: translate(-50%, -50%);font-family: 'ChenYuluoyan';}
span h2{font-size: 50px;}
span h6{font-size: 25px;}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
div button{position: relative;top: 7vh; margin-bottom: 5px; width: 50%;height: 10vh;left: 25%;border-radius: 5px; border: 0px;background-color:#000000;color: rgb(45, 192, 26);opacity: 0;
            font-size: 32px;}
div button:hover{border: 5px solid #223344;}
```
```javascript=
userOpt = 0
level = 0
story = ["一隻飢餓的狐狸看見葡萄架上掛著一串串晶瑩剔透的粉色葡萄，垂涎三尺，想要摘下來吃，但憑牠的四肢都無法摘到，請幫牠尋找可以輔助牠的工具，請選擇："
        ,"正當狐狸要把葡萄吃掉的時候，葡萄突然被腳步迅速兔子搶走了，這時火冒三丈的狐狸應該怎麼做呢？"
        ,"喊出咒語吧！"
        ,"經過一番波折，狐狸終於能安心的吃下那串奇妙的葡萄了一口接著一口，狐狸能感受到，有一股莫名的力量正在湧入牠的身體，牠的肌肉變得更加結實，身軀龐大，牠活成了動物們所畏懼的形象，大家看到牠都落荒而逃， 連牠的白狐女朋友都離牠遠去，這時候有個老奶奶要過馬路，請問牠要做出什麼行為呢？"
        ,"今晚狐狸要為牠的女友舉辦一場生日派對，請問牠要準備什麼樣的禮物才能討白狐小姐的歡心呢？"
        ,"不久之後他們便決定步入婚姻，他們一般新婚夫妻一樣，會一起煮飯、一起捕獵，互相打鬧、扶持，但花朵也有他的花期，數年後他們的婚姻也伴隨著一場吵架而分離， 白狐說：「我當初真的是瞎了眼才跟你結婚，我沒有你也可以過得很瀟灑，大不了就離婚啊」狐狸說：「事情到此地步，我們之間就沒有什麼好說的，到此為止吧。」請問狐狸要試著去挽回這段已經破碎的婚姻嗎？"
        ,"離婚後他們終於可以做回自己，一個人的世界同樣有月升月落，也有美麗的瞬間，把它歸為記憶。白狐沒了婚約的束縛終於迎來了自由，狐狸也變回了不再因感情而困擾的朝氣狐狸，一個人也可以過得很好，螢幕前的你也不要再為感情所困了，先愛自己在試著去愛他人，完結灑花。"]

var index  = 0
var lock = false
function getUserOpt(num){
    // console.log(level,num)
    userOpt = num
    setText(level,num)
}

function fadeIn(){
    var bt1 = document.getElementById('bt1');
    var bt2 = document.getElementById('bt2');
    var bt3 = document.getElementById('bt3');
    if(bt1.style.opacity != 0){
        return
    }
    for(let i = 0;i<=100;i++){
        setTimeout(()=>bt1.style.opacity = i/100,i*10)
        setTimeout(()=>bt2.style.opacity = i/100,i*10)
        setTimeout(()=>bt3.style.opacity = i/100,i*10)
    }
}
function fadeOut(){
    var bt1 = document.getElementById('bt1');
    var bt2 = document.getElementById('bt2');
    var bt3 = document.getElementById('bt3');
    for(let i = 0;i<=100;i++){
        setTimeout(()=>bt1.style.opacity = (100-i)/100,i*10)
        setTimeout(()=>bt2.style.opacity = (100-i)/100,i*10)
        setTimeout(()=>bt3.style.opacity = (100-i)/100,i*10)
    }
}

function cover(){
    var cover = document.getElementById('cover')
    if(cover.style.opacity!=0){
        return
    }
    for(let i = 0;i<=100;i++){
        setTimeout(()=>{cover.style.opacity = (100-i)/100;if(i==100){cover.style.visibility="hidden"}},i*10)
        
    }
}

function nowLevel(wait){
    var mytext = document.getElementById('text');
    var bt1 = document.getElementById('bt1');
    var bt2 = document.getElementById('bt2');
    var bt3 = document.getElementById('bt3');
    var h1 = document.getElementById('h1')
    mywords = ""

    index = 0
    lock = true
    function writing(index) {

        if (index < story[level].length) {
            mytext.innerHTML += story[level][index]
            setTimeout(writing.bind(this) ,60, ++index)
        }
        else{
            lock = false
        }
    }
    setTimeout(()=>{mytext.innerHTML = '';writing(index,wait);},wait)
    if(level==story.length-1){
        return
    }
    setTimeout(()=>{
    fadeIn()
    switch(level){
        case 0:
            bt1.innerHTML = "納西妲的元素戰技（遠距離取素材）"
            bt2.innerHTML = "樹枝"
            bt3.innerHTML = "長相奇特的魔杖"
            break;
        case 1:
            bt1.innerHTML = "拿魔杖戳牠"
            bt2.innerHTML = "拿魔杖丟牠"
            bt3.innerHTML = "拿魔杖使出技能"
            break;
        case 2:
            bt1.innerHTML = "原神啟動（口嗨別選）"
            bt2.innerHTML = "avada kedavra(讓人事物被摧毀)"
            bt3.innerHTML = "領域展開（用沙士幫兔子洗頭）"
            break;
        case 3:
            bt1.innerHTML = "扶老奶奶過馬路"
            bt2.innerHTML = "跟牠索取錢財"
            bt3.innerHTML = "故意在車開過來的時候把牠推倒"
            break;
        case 4:
            bt1.innerHTML = "牠想要很久的香奈兒包包"
            bt2.innerHTML = "狐狸的手寫信"
            bt3.innerHTML = "啥都不給"
            break;
        case 5:
            bt1.innerHTML = "要"
            bt2.innerHTML = "不要"
            bt3.innerHTML = "選我啊笨蛋"
            break;
    }},wait)
    h1.innerHTML = 'Chapter ' + (level+1)
}

function setText(lev, opt){
    let flag = 0
    var mytext = document.getElementById('text')
    if(lock == true ){
        return
    }
    else switch(lev){
        case 0:

            if(opt == 0){mytext.innerHTML = "要玩原神回家玩，這裡不是୧( ಠ Д ಠ )୨"}
            else if(opt == 1){mytext.innerHTML = "樹枝過短，人家鈎不到啦"}
            else{mytext.innerHTML = "牠拿到魔杖之後發現牠可以隨心意改變形狀，於是牠成功獲得一串葡萄！";flag = 1}
            break

        case 1:

            if(opt == 0){mytext.innerHTML = "由於魔杖太脆弱，一戳就斷..."}
            else if(opt == 1){mytext.innerHTML = "由於丟不準，兔子逃走了..."}
            else{mytext.innerHTML ="狐狸將魔杖指向了兔子！"; flag = 1}
            break

        case 2:

            if(opt == 0){mytext.innerHTML = "原神啟動成功，啊然後呢？";}
            else if(opt == 1){mytext.innerHTML = "兔子成功被咒語擊敗！";flag = 1}
            else{mytext.innerHTML = "兔子美味品嚐兩口就蹦蹦跳走了...";}
            break

        case 3:

            if(opt == 0){mytext.innerHTML = "善良的作為被全動物界讚揚，狐狸也重新獲得了大家的喜愛🧡";flag = 1}
            else if(opt == 1){mytext.innerHTML = "君子愛財取之有道啊！"}
            else{mytext.innerHTML = "地獄十九層為你而設"}
            break

        case 4:

            if(opt == 0){mytext.innerHTML = "其實牠已經買過這款了，前幾天才背著那個包包出門，白狐抱怨狐狸根本沒注意牠..."}
            else if(opt == 1){mytext.innerHTML = "白狐看完後感動的落淚，牠們堅信彼此能長長久久的維持感情。";flag = 1}
            else{mytext.innerHTML = "被女友嘎了ᕦ(ò_óˇ)ᕤ"}
            break

        case 5:
    
            if(opt == 0){mytext.innerHTML = "遇到問題的他們倆依舊沒去面對問題的根本，且不斷的忽視彼此的感受，再次複合的婚姻又出現了裂痕..."}
            else if(opt == 1){mytext.innerHTML = "不適合的就不要去迎合，沒有彼此他們自己的生活也可以過得很精彩。";flag = 1}
            else{mytext.innerHTML = "笨蛋"}
            break

    } 

    if(flag==1){
        fadeOut() 
        level++
        nowLevel(3000)
    }else{
        nowLevel(3000)
    }
}
```

### 討論區
>奇怪的想法
 
（在此輸入）：啊
