SOURCE

//作者：苏丹III，版权所有

var frame = 0;
var btn = document.getElementsByClassName("btn-choice");
const STARTPAGE=0;
var page; //nowPageDefault
var isSetting=false

function init() {
    page = STARTPAGE;
    var btn = document.getElementsByClassName("btn-choice");
    for(i=0;i<=3;i++){
            document.getElementsByClassName("btn-import")[i].className="btn-import hide";
    }
    refresh(page)
}

function 弹出提示(text) {
    //上方滑出的提示
    header = document.getElementById("tipC");
    document.getElementById("tipT").innerHTML = text;
    header.style.cssText = "top:0px";
    setTimeout(function () {
        header.style.cssText = "top:-40px"
    }, 1500);
}

function refresh(aimPage) {
    //刷新文本
    document.getElementById("story").innerHTML = Story[aimPage].剧情文本;
    //刷新按钮文本
    for (i = 0; i < Story[aimPage].选项.length; i++) {
        btn[i].innerHTML = Story[aimPage].选项[i].选项文本;
    }
}


function choose(index) {
    //点击按钮以后的事件
    //划出提示
    var tip=Story[page].选项[index].提示;
    if(tip!=null)
    弹出提示(tip);
    //淡出
    document.getElementById("story").style.cssText = "color:white";
    choice = document.getElementsByClassName("btn-choice");
    for (i = 0; i < choice.length; i++) {
        choice[i].style.cssText = "";
    }
    //淡入
    setTimeout(then, 2000);
    function then() {
        //淡入
        document.getElementById("story").style.cssText = "";
        choice = document.getElementsByClassName("btn-choice");
        for (i = 0; i < choice.length; i++) {
            choice[i].style.cssText = "";
        }
        frame = 0;
        //-----------------------------

        var aimPage = Story[page].选项[index].传送;
        refresh(aimPage)
        page = aimPage;

        nextFrame()
    }
}


function nextFrame() {
    if (frame == 0) {
        document.getElementById("story").style.cssText = "color:black;";
    } else if (frame == 1) {
        choice = document.getElementsByClassName("btn-choice")
        for (i = 0; i < Story[page].选项.length; i++) {
            choice[i].style.cssText += "display:inline-block;";
        }
        setTimeout(setOpacity, 100)
    }
    frame++;

    function setOpacity() {
        for (i = 0; i < Story[page].选项.length; i++) {
            choice[i].style.cssText += "opacity:1;";
        }
    }
}

function 处理输入过程() {
    //语法高亮
    function 语法高亮() {
        temp = $("#input")[0].value;
        switch (temp[0]) {
            case '>':
                $("#input")[0].style.color = "rgb(220,220,139)";
                break;
            case '/':
                $("#input")[0].style.color = "rgb(78,201,176)";
                break;
        }
        if (temp[0] != '>' && temp[0] != '/') {
            $("#input")[0].style.color = "aliceblue";
        }
    }
    setTimeout(语法高亮, 80);
    //检查输入时的按键
    var e = window.event || arguments.callee.caller.arguments[0];
    fuck = e.key;
    switch (fuck) {
        case 'Enter':
            处理发送();
            break;
        case 'ArrowUp':
            if (LastMassage != null) {
                $("#input")[0].value = LastMassage;
            }
            // moveEnd();
            break;
        case 'ArrowDown':
            $("#input")[0].value = "";
            // moveEnd();
            break;
        default:
            break;
    }
}

function 处理发送(text) {
    //处理聊天框sir的信息
    if ($('#input')[0].value == null) {
        //检查是否为空，以免访问非法数组
        return;
    }
    if (text == null) {
        //这是来自回车键的响应，勿动
        text = $('#input')[0].value;
    }
    LastMassage = text;
    $("#input")[0].value = "";
    弹出提示(text);
    if (text[0] == '/' || text[0] == '>') {
        处理命令(text);
    }

}

function 处理命令(command) {
    //处理、分割、分派命令的中枢（必须在开头有'/'或'>'）
    if (command[0] == '>') {
        command = command.slice(1)
        try {
            a = eval(command);
            if (a != undefined) {
                alert(a)
            };
        } catch (err) {
            alert("你输入的js代码发生错误喵：\n" + err);
        }
        return;
    }
    // command = command.slice(1);
    // var slices = command.split(' ');
    弹出提示("暂时用不到指令，仅能用\">\"输入JavaScript");
}

//=================================================================

function setter(){
    var bar=document.getElementsByClassName("btn-import");
    if(isSetting){
        for(i=0;i<=3;i++){
            bar[i].className="btn-import hide";
        }
        //document.getElementById("option").className="btn-importer";
        isSetting=false;
    }
    else{
        for(i=0;i<=3;i++){
            bar[i].className="btn-import";
        }
        //document.getElementById("option").className="btn-importer hide";
        isSetting=true;
    }
}

function importer(dlc) {
    if (dlc == null) {
        dlc = prompt("输入有效的剧情包(未加密的)");
    }
    try {
        if (dlc != null) {
            var newStory = JSON.parse(dlc);
            Story = newStory;
            init()
            alert("导入成功！（如果出岔子就是你的问题了）");
        }
    }
    catch (err) {
        alert("出错了，是你干的\n" + err)
    }
}


function importerDecode() {
    var temp = window.decodeURIComponent(atob(prompt("导入需要解密的剧情包（将直接导入）")));
    importer(temp);
}

function importerMake() {
    document.write(
        '<h1>若没有剧情请到<a href=\'http://www.bejson.com/jsoneditoronline/\'>这里</a>编写，把以下模板粘贴到那里(选项个数可以0~4，编号为0~3)</h1><br/><br/>\
{"0":{"剧情文本":"模板第0页","选项":[{"选项文本":"选项0","传送":1},{"选项文本":"选项1","传送":1,"提示":"你选择了选项1"},{"选项文本":"所有文本都是支持HTML格式的！","传送":1,"提示":"你选择了选项2"},{"选项文本":"选项3","传送":1,"提示":"你选择了选项3"}]},"1":{"剧情文本":"模板第1页","选项":[{"选项文本":"选项0","传送":2,"提示":"你选择了选项0"},{"选项文本":"也可以留空不写提示","传送":2},{"选项文本":"你最好使用中文标点，以防混淆代码！","传送":2}]},"2":{"剧情文本":"模板第2页","选项":[{"选项文本":"选项0","传送":1,"提示":"你甚至可以不要任何选项当然，这里我还是设置了一个"}]}}        <h1>Step1:</h1><img src="https://s1.ax1x.com/2020/04/10/GIjCl9.png" alt="图片加载失败，你干的" border="0">\
        <h1>Step2:</h1><img src="https://s1.ax1x.com/2020/04/10/GIjPyR.png" alt="图片加载失败，你干的" border="0">\
        <h1>Step3:</h1><img src="https://s1.ax1x.com/2020/04/10/GIjiO1.png" alt="图片加载失败，你干的" border="0">\
        '
    )
}

function importerCode() {
    var temp = prompt("输入需要加密的剧情包");
    alert("将显示加密的内容");
    document.write('<p contenteditable="plaintext-only" style="width:45em">' + btoa(window.encodeURIComponent(temp))) + '</p>';
}



//=========================以下为故事=========================
var Story={"0":{"剧情文本":"模板","选项":[{"选项文本":"选项0","传送":1},{"选项文本":"选项1","传送":1},{"选项文本":"选项2","传送":1},{"选项文本":"选项3","传送":1}]},"1":{"剧情文本":"警告！<br/>本游戏内如<br/>“2,2,3,3-四甲基丁烷”<br/>“渣渣珲”<br/>“曹静”<br/>“襄阳四中”<br/>等名词皆为虚构和随机组合！<br/>如有雷同，纯属巧合！","选项":[{"选项文本":"开始即表示同意此契约","传送":2,"提示":"↑ [作者] 会记住的"}]},"2":{"剧情文本":"你是<strong>2,2,3,3-四甲基丁烷</strong>，你在襄阳四中上学。<br/>有一天，你看到了<strong>渣渣珲</strong>向你说：<br/>“我家有PS4，快来我家Van♂”<br/>你：...","选项":[{"选项文本":"何乐而不为之！","传送":5,"提示":"↑ [渣渣辉] 会记住的"},{"选项文本":"不，我再想想...","传送":10},{"选项文本":"走开啦！","传送":3,"提示":"↓ [渣渣辉] 会记住的"}]},"3":{"剧情文本":"你：“走开啦，泥奏凯！”<br/>渣渣珲：“㤙㤙㤙，锕，你这分子烷了！You will Pay for what you said！”","选项":[{"选项文本":"啊，你要淦嘛！","传送":4}]},"4":{"剧情文本":"<p style='color:red;'>结局</p><br/>你失败了！<br/>2020年，2,2,3,3-四甲基丁烷 死于氧化分解（Fire）<img src=\"https://s1.ax1x.com/2020/04/10/GoKPe0.png\" style='max-width: 100%;max-height: 100%;'></a>","选项":[]},"5":{"剧情文本":"你：“好呀好呀！”<br/>渣渣珲：“太好了（抑制自己的喜悦），那我请你喝杯<a href=\"http://www.nongfuspring.com/upload/201406/2014062416093435365.png\">茶</a>好了！”","选项":[{"选项文本":"那好吧","传送":6}]},"6":{"剧情文本":"渣渣珲给你买了一杯<large>特殊的</large>茶<br/>你喝了，然后就...癫痫了？<br/>失明I **:**<br/>夜视I **:**","选项":[{"选项文本":"那好吧（好个屁）","传送":7}]},"7":{"剧情文本":"当你醒来时，你发现你不在你自己家里","选项":[{"选项文本":"...","传送":8}]},"8":{"剧情文本":"你发现你被ghs了","选项":[{"选项文本":"...","传送":9}]},"9":{"剧情文本":"<p style='color:red;'>结局</p><br/>你失败了！<br/>2020年，2,2,3,3-四甲基丁烷 死于加成反应<br/>渣渣珲真是个大坏蛋！","选项":[]},"10":{"剧情文本":"你：“我再考虑一下吧...”<br/>渣渣珲：“哦，㤙，好吧。”<br/>你逐渐远离了祂。","选项":[{"选项文本":"继续","传送":11}]},"11":{"剧情文本":"你远离了渣渣珲。<br/>","选项":[{"选项文本":"继续","传送":12,"提示":"你似乎逃过一劫"}]}}

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="game2.css">
    <title>高*轩帅</title>
</head>

<body style="transition: none !important;" onselectstart="return false" onload="init()">
    <header id="tipC" style="top: -40px;">
        <p id="tipT">喵喵喵，看不到我，尤其是张*珲</p>
    </header>
    <div class=import>
        <button class="btn-import" onclick="importer()" style="margin-left:8em">导入剧情</button>
        <button class="btn-import" onclick="importerDecode()">导入加密剧情</button>
        <button class="btn-import" onclick="importerMake()">制作剧情</button>
        <button class="btn-import" onclick="importerCode()">加密剧情</button>
    </div>
    <div id="root">

        <div class=import>
            <button id="option" class="btn-import" onclick="setter()" style="opacity:0.3">选项</button>
        </div>

        <div class="wrapper" onclick="nextFrame()">
            <div class="header">
                <img src="https://ak.hypergryph.com/special/conviction/logo.925c6fa4.png" alt="图片加载失败">
            </div>
            <div class="storyC">
                <p id="story">story</p>
            </div>
            <div class="react">
                <button class="btn-choice" onclick="choose(0)">button</button>
                <button class="btn-choice" onclick="choose(1)">button</button>
                <button class="btn-choice" onclick="choose(2)">button</button>
                <button class="btn-choice" onclick="choose(3)">button</button>
            </div>
            <audio
                src="https://imoongo.com/wp-content/uploads/edd/2018/01/Candy_Wind-%E7%8C%AB%E7%9A%84%E8%88%9E%E6%AD%A5.mp3"
                controls="controls" loop="loop">
                您TM的浏览器不支持音乐播放！
            </audio>
            <span class="inputer">
                <input id="input" placeholder="use '>' to input JavaScript" autocomplete="off" disableautocomplete
                    onkeydown="处理输入过程()" value="">
                <button class="btn" onclick="处理发送()">发送</button>
            </span>
        </div>
    </div>
    </div>
</body>

</html>

<script src="game2.js"></script>
<!-- <script src="story.js"></script> -->

#root,
body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 8px;
    overflow: hidden;
}

header {
    /*[tip:>>>>>>>>]*/
    position: absolute;
    overflow: auto;
    width: 98%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1em;
    color: white;
    transition: cubic-bezier(0.51, -0.51, 0.53, 1.49) 0.5s;
    z-index: 3;
}

header>p {
    margin: 5px;
}


/* ------------------button-------------------- */

.btn-choice {
    display: none;
    opacity: 0;
    background-color: white;
    color: black;
    width: 60%;
    font-size: 1.25em;
    padding: 10px 20px;
    /* text-align: center;
  text-decoration: none; */
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border: 2px solid #4CAF50;
    border-radius: 5px;
}

.btn-choice:hover {
    background-color: #4CAF50;
    color: white;
}

.btn-choice:active {
    background-color: rgb(12, 90, 17);
}

.btn-import {
    background-color: white;
    color: black;
    font-size: 1.1em;
    padding: 5px 10px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid dodgerblue;
    z-index: 2;
}

.btn-import:hover {
    background-color: dodgerblue;
    color: white;
}

.btn-import:active {
    background-color: rgb(20, 87, 155);
}

.hide{
    display: none;
}

/* ------------------/button------------------- */

#root {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(0deg, #565342 0, #8a856a 10%, #fff 30%);
    box-shadow: inset 15em 0 15em -15em #565342, inset -15em 0 15em -15em #565342;
    overflow: hidden;
}

.import {
    position: absolute;
    top: 1.5em;
    z-index: 2;
}

.wrapper {
    text-align: center;
    width: 95%;
    max-width: 40em;
    min-height: 55em;
    background-image: url(https://ak.hypergryph.com/special/conviction/background.ab861e06.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    box-shadow: 0 6px 15px 5px rgba(0, 0, 0, .5);
    padding: 5px;
}

.header {
    height: 12em;
    position: relative;
}

.header img {
    position: absolute;
    bottom: 0;
    width: 7em;
    margin-left: -3.5em;
    left: 50%;
}

#import-tip {
    height: 50px;
    position: absolute;
    top: -20%;
    background-color: rgba(0, 0, 0, .3);
    z-index: 2;
}

.storyC {
    padding: 3em;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-family: SourceHanSansCN-Medium;
    line-height: 1em;
}

p {
    color: white;
    font-size: 1.25em;
    line-height: 1.2em;
    font-family: SourceHanSansCN-Medium;
    transition: color 2s ease;
}

audio {
    position: absolute;
    bottom: 5em;
    left: 27%;
}

.inputer {
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 99%;
    overflow: auto;
    display: inline-block;
    vertical-align: middle;
}

.inputer input {
    padding: 2px;
    width: 80%;
    background-color: rgba(17, 17, 17, 0.322);
    color: aliceblue;
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 5px;
    border: none;
    height: 1.6em;
}

.btn {
    font-size: 1.2em;
}


/*  */