SOURCE

/*
    最近更新:2020/3/30
    作者:苏丹III
*/

//------------------------------------数据结构结束-------------------------------
function player(id, name, DFThp, DFTmaxhp, DFTatk, DFTdef, lastDamage, skills) {
    //玩家的数据结构
    this.id = id
    this.name = name;
    this.DFThp = DFThp;
    this.hp = DFThp;
    this.DFTmaxhp = DFTmaxhp;
    this.maxhp = DFTmaxhp;
    this.DFTatk = DFTatk;
    this.atk = DFTatk;
    this.DFTdef = DFTdef;
    this.def = DFTdef;
    this.lastDamage = lastDamage;
    this.skills = skills;
    this.hp百分数 = function () {
        return 100 * this.hp / this.maxhp;
    }
    this.计算伤害 = function (威力) {
        //目标：伤害 = [（2*等级+）/250*（攻击/防御）*技能威力+2）]*加成
        //现在：伤害 = （攻击/防御）*技能威力
        temp = (p[id].atk / p[另(id)].def) * 威力;
        return 随机数(temp * 0.9, temp * 1.1);
    }
    this.重置默认属性 = function () {
        //部分重置！
        this.hp = this.DFThp;
        this.maxhp = this.DFTmaxhp;
        this.atk = this.DFTatk;
        this.def = this.DFTdef;
    }
}


var skillLib = [{
    id: 0,
    name: "",
    detail: "",
    power: 0,
    use: function (user) {
        //...
    },
    sendLog: function () {
        //输出日志(,"战斗");
    }
},
{
    id: 1,
    name: "世纪末彼...",
    detail: "提升自身攻击20%",
    power: 0,
    use: function (user) {
        p[user].atk = p[user].atk * 1.2;
    },
    sendLog: function () {
        输出日志("玩家" + p[round].name + "的攻击提升了20%！atk=" + Math.round(p[round].atk) + "！", "战斗");
    }
},
{
    id: 2,
    name: "地狱合金盾",
    detail: "提升自身防御20%",
    power: 0,
    use: function (user) {
        p[user].def = p[user].def * 1.2;
    },
    sendLog: function () {
        输出日志("玩家" + p[round].name + "的防御提升了20%！def=" + Math.round(p[round].def) + "！", "战斗");
    }
}, {
    id: 3,
    name: "挠痒",
    detail: "降低对方的攻防各10%",
    power: 0,
    use: function (user) {
        p[另(user)].atk = p[另(user)].atk * 0.9;
        p[另(user)].def = p[另(user)].def * 0.9;
    },
    sendLog: function () {
        输出日志("玩家" + p[round].name + "削弱了" + p[另(round)].name + "的攻击和防御各20%！\
_atk=" + Math.round(p[另(round)].atk) + "，_def=" + Math.round(p[另(round)].def) + "！", "战斗");
    }
}, {
    id: 4,
    name: "社会的毒打",
    detail: "对对方造成伤害",
    power: 10,
    use: function (user) {
        p[另(user)].hp = p[另(user)].hp - p[user].计算伤害(10);
        p[user].lastDamage = p[user].计算伤害(10);
    },
    sendLog: function () {
        输出日志("玩家" + p[round].name + "对" + p[另(round)].name + "造成了" + p[round].lastDamage + "点伤害", "战斗");
    }
},
]
//------------------------------------数据结构结束/------------------------------

//--------------------------------------核心过程---------------------------------

// function 每刻执行() {

// }

function 刷新显示() {
    //刷新所有显示的元素
    for (let i = 0; i <= 1; i++) {
        $(".progress-done")[i].style.width = p[i].hp百分数() + '%';
        $(".hpT")[i].innerHTML = "HP:" + Math.round(p[i].hp) + "/" + p[i].maxhp + "  " + Math.round(p[i].hp百分数()) + '%';
        $(".name")[i].innerHTML = p[i].name;
    }
    for (let j = 0; j <= 3; j++) {
        $("#skill" + j + ">a")[0].innerHTML = skillLib[p[round].skills[j]].name;
        $("#skill" + j + ">p")[0].innerHTML = skillLib[p[round].skills[j]].detail;
        $("#skill" + j + ">p")[1].innerHTML = "威力：" + skillLib[p[round].skills[j]].power;
    }
    //...
}

function 死亡检测() {
    if (p[0].hp <= 0) {
        p[0].hp = 0;
        setTimeout(pop, 300);

        function pop() {
            alert("你失败了！");
            初始化();
        }
    }
    if (p[1].hp <= 0) {
        p[1].hp = 0;
        setTimeout(pop, 300);

        function pop() {
            alert("你胜利了！");
            初始化();
        }
    }
}


function 处理输入过程() {
    //语法高亮
    function 语法高亮() {
        temp = $("#input")[0].value;
        switch (temp[0]) {
            case '>':
                $("#input")[0].style.color = "rgb(197,134,192)";
                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) {
    //上方滑出的提示
    header = document.getElementById("tipC");
    document.getElementById("tipT").innerHTML = text;
    header.style.cssText = "top:0px";
    setTimeout(function () {
        header.style.cssText = "top:-34px"
    }, 1000);
}


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 输出日志(html, who, newLine) {
    var fix = "";
    var logger = document.getElementById("logger");
    if (who == null) {
        who = "张钧珲";
    }
    if (newLine == true && (round - roundDefault + 1) % 2 == 0) {
        fix += "<br/><hr color='#0abde3'>"
    }
    fix += '<p class="p-' + who + '">[' + who + ']' + html + '</p>'
    logger.innerHTML += fix;
    logger.scrollTop = logger.scrollHeight;
}

function 下一回合() {
    if (round == 0 || round == 1) {
        round = 1 - round;
        弹出提示("现在是玩家 " + p[round].name + " 的回合");
        document.getElementsByClassName("sideC")[round].style.cssText = "border: dotted;"
        document.getElementsByClassName("sideC")[另(round)].style.cssText = ""
        输出日志("现在是玩家 " + p[round].name + " 的回合", "系统", true);
    } else {
        alert("错误的回合: " + round);
    }

}

function 玩家决策(decision, id) {
    switch (decision) {
        case 'skill':
            //参数id表示第几个按钮
            skillLib[p[round].skills[id]].use(round);
            skillLib[p[round].skills[id]].sendLog();
            break;
        default:
            alert("无效决策: " + decision + " " + id);
            break;
    }
    刷新显示();
    死亡检测();
    下一回合();
}
//--------------------------------------核心过程结束/---------------------------------

//--------------------------------------部分算法-------------------------------------

function 随机数(min, max) {
    min = Math.round(min)
    max = Math.round(max)
    return Math.floor(Math.random() * (max - min + 1) + min);
}

function 另(p) {
    return 1 - p;
}

function 调整宽度() {
    v = "width:" + document.getElementById("roll").value + "%;";
    document.getElementById("leftC").style.cssText = v;
    document.getElementById("rightC").style.cssText = v;
}
//--------------------------------------部分算法结束/-------------------------------------




// var 周期时钟 = window.setInterval(每刻执行, 167);
var LastMassage;
var round = 0;
var roundDefault = 0; //初始属性
var p = [new player(0, "YourSelf", 100, 100, 10, 10, 0, [1, 2, 3, 4]),
new player(1, "YourEnemy", 100, 100, 10, 10, 0, [1, 2, 3, 4])
];

function 初始化() {
    p[0].重置默认属性();
    p[1].重置默认属性();
    round = roundDefault = Math.round(Math.random());
    刷新显示();
    //异步危险，请勿更改!
    document.getElementById("logger").innerHTML = "<p class='p-系统'>[系统]神经系统已构建完成！</p>\
<p class='p-警告'>[警告]当前为测试版</p>";

    下一回合();
}

//初始化在onload里




















//-----------------------------------------------------------------

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(' ');

    function TargetSet(target, property, value) {
        //游戏选择器发挥作用
        switch (target) {
            case "@p":
                alert("最近的玩家？不就是你自己吗！\n你自己就你自己，哼唧！");
            //这里的break故意没写
            case "@a":
                p[round][property] = value;
                p[另(round)][property] = value;
                break;
            case "@s":
                p[round][property] = value;
                break;
            case "@o":
                p[另(round)][property] = value;
                break;
            case "@r":
                if (随机数(0, 1) == 0) {
                    p[round][property] = value;
                }
                else {
                    p[另(round)][property] = value;
                }
                break;
            case "@e":
                alert("我喜欢你！\n这不是愚人节玩笑！");
                输出日志("你觉得可能吗？","警告");
                alert("话说你@e淦吗，这又不是我的世界");
                输出日志("这是彩蛋？","作者");
                break;
        }
    }

    switch (slices[0]) {
        case "player":

            break;
    }
}

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

<head>
	<meta charset="UTF-8">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<!-- <meta content="minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> -->
	<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> -->
	<!-- <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> -->
	<!-- <link rel="stylesheet" type="text/css" href="main.css"> -->
	<!-- <script src="main.js"></script> -->
	<title>Aurora</title>
</head>

<body id="body" onselectstart="return false" onload="初始化()">
	<header id="tipC" style="top: -34px;">
		<p id="tipT">喵喵喵，看不到我，尤其是张钧珲</p>
	</header>
	<div class="main">
		<div class="sideC" id="leftC">
			<h1 class="name">...</h1>
			<div class="progress">
				<div class="progress-done"></div>
			</div>
			<div class="placeholder"></div>
			<span class="hpT">HP...</span>
    </div>
    <div class="sideC" id="rightC">
      <h1 class="name" style="float: right;">...</h1>
      <br /><br />    <!---->
      <div class="progress" style="float: right;">
        <div class="progress-done" style="float: right;"></div>
      </div>
      <br /><br /><br />
      <span class="hpT" style="float: right;">HP:...</span>
    </div>
  </div>
  <!--------------------------------->
  <br />
  <hr color="#bdc3c7">
  <!--------------------------------->
  <div id="logger" class="logger" contenteditable="plaintext-only" onfocus="$('#body')[0].onselectstart=''"
    onblur="$('#body')[0].onselectstart=function(){return false}">
    <p class="p-警告">[警告]无法载入JavaScript(js)或正在加载中!</p>
  </div>
  <!--  -->
  <span class="operater">
    <input type="range" id="roll" max=100 min=0 value=48 style="position:absolute" onchange="调整宽度()">
    <span class="button" id="skill0" onclick="玩家决策('skill',0)">
      <a class="btnboard">[name]</a>
      <p class="top">[detail]</p>
      <p class="bottom">威力：[power]</p>
    </span>
    <span class="button" id="skill1" onclick="玩家决策('skill',1)">
      <a class="btnboard">[name]</a>
      <p class="top">[detail]</p>
      <p class="bottom">威力：[power]</p>
    </span>
    <span class="button" id="skill2" onclick="玩家决策('skill',2)">
      <a class="btnboard">[name]</a>
      <p class="top">[detail]</p>
      <p class="bottom">威力：[power]</p>
    </span>
    <span class="button" id="skill3" onclick="玩家决策('skill',3)">
      <a class="btnboard">[name]</a>
      <p class="top">[detail]</p>
      <p class="bottom">威力：[power]</p>
    </span>
  </span>
  <!--  -->
  <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" autoplay="autoplay">
    您TM的浏览器不支持音乐播放！
  </audio>

  <span class="inputer">
    <input id="input" placeholder="use '>' to input JavaScript" autocomplete="off" disableautocomplete onkeydown="处理输入过程()" value=">p[1].name='弹簧'">
    <button class="btn" onclick="处理发送()">发送</button>
  </span>


</body>

</html>

* {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

html {
    height: 100%;
}

body {
    background-color: #fbc7d4;
    background-image: linear-gradient(to right, #9796f0, #fbc7d4);
    height: 97%;
    padding: 1%;
}

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

.sideC {
    height: 100%;
    width: 48%;
    padding: 5px;
}

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

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

.progress {
    background-color: rgba(100, 100, 100, 0.2);
    border-radius: 5px;
    margin: 15px 0;
    height: 15px;
    width: 90%;
}


/*Warning:不要在上面添加新的选择器！*/

.progress-done {
    background: linear-gradient(to left, rgb(242, 112, 156), rgb(255, 148, 114));
    box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156);
    border-radius: 5px;
    height: 14px;
    transition: ease 0.2s;
    width: 0%;
}

#leftC {
    float: left;
}

#rightC {
    float: right;
}

.btn {
    font-size: 1.4em;
}

.placeholder {
    height: 18px;
}

.hpT {
    font-size: 1.4em;
    font-family: 'Courier New', Courier, monospace;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(200, 200, 200, 0.4);
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(200, 200, 200, 0.4);
    opacity: 1;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(200, 200, 200, 0.4);
    opacity: 1;
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(200, 200, 200, 0.4);
}

.operater {
    height: 50%;
    width: 100%;
}

.logger {
    overflow: auto;
    font-family: 'Times New Roman', Times, serif;
    float: left;
    background-color: rgba(11, 11, 11, 0.2);
    margin-bottom: 5%;
    margin-right: 1%;
    margin-top: 2%;
    height: 35%;
    width: 35%;
}


/*********************************button ********************************/

.button {
    display: inline-block;
    width: 15%;
    margin: 40px auto 50px auto;
}

.button a {
    display: block;
    color: white;
    font: 17px/50px Helvetica, Verdana, sans-serif;
    text-decoration: none;
    text-align: center;
}

.button a,
.button p {
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgb(242, 112, 156), rgb(248, 174, 91));
}

.button p {
    background: -webkit-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
    display: block;
    height: 40px;
    width: 13%;
    margin: -50px 0 0 10px;
    /*TYPE*/
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    color: #fff;
    /*POSITION*/
    position: absolute;
    z-index: -1;
    /*TRANSITION*/
    -webkit-transition: margin 0.2s ease;
    transition: margin 0.2s ease;
}

.button:active .btnboard {
    box-shadow: inset -1px -1px 17px 1px rgba(0, 0, 0, 0.4)
}

.button:hover .bottom {
    margin: -10px 0 0 10px;
}

.button:hover .top {
    margin: -80px 0 0 10px;
    line-height: 35px;
}


/*****************************button **********************************/

.p-系统 {
    color: rgb(102, 217, 239);
}

.p-错误 {
    color: red;
}

.p-警告 {
    color: orange;
}

.p-战斗 {
    color: tan;
}

.p-作者 {
    color: purple;
}