DPSシミュレータ

アイギスユニットのDPSを体感してみよう！

by zohnam

HTML

<div>
    
<h2>自軍テーブル</h2>

    <table>
        <tr>
            <th>バトルテーブルに</th>
            <th>
                <button>追加</button>
            </th>
            <td rowspan='9'>
                <button>ユニット追加</button>
            </td>
        </tr>
        <tr>
            <td rowspan='2'>ユニット選択</td>
            <td>
                <img class='unit img' src='' />
            </td>
        </tr>
        <tr>
            <td>
                <select id='unit'>
                    <optgroup label='ブラック'>
                        <option>王子</option>
                    </optgroup>
                    <optgroup label='ゴールド'>
                        <option>キャリー(未CC)</option>
                        <option>キャリー</option>
                    </optgroup>
                </select>
            </td>
        </tr>
        <tr>
            <td>スキル</td>
            <td class='unit skill'></td>
        </tr>
        <tr>
            <td>HP</td>
            <td class='unit hp'></td>
        </tr>
        <tr>
            <td>攻撃力</td>
            <td class='unit atk'></td>
        </tr>
        <tr>
            <td>防御力</td>
            <td class='unit def'></td>
        </tr>
        <tr>
            <td>攻撃間隔</td>
            <td class='unit wait'></td>
        </tr>
        <tr>
            <th>自軍テーブルから</th>
            <th>
                <button>削除</button>
            </th>
        </tr>
    </table>
</div>
<div>
     <h2>
        <span class='battle'>バトルテーブル(バトルモード)<button>DPSモードに切り替え</button></span>
        <span class='dps'>バトルテーブル(DPSモード)<button>バトルモードに切り替え</button></span>
    </h2>

    <table>
        <tr>
            <th>バトルテーブルから</th>
            <th>
                <button>削除</button>
            </th>
        </tr>
        <tr>
            <td rowspan='2'>自軍ユニット</td>
            <td>
                <img class='unit img' src='' />
            </td>
        </tr>
        <tr>
            <td>
                <button id='skill' class='battle'>スキル使用</button>
 ...

CSS

table {
    border : 1px solid black;
    border-collapse : collapse;
    margin : 5px 5px;
}
table td {
    width : 100px;
    text-align : right;
    border : 1px solid black;
    padding : 3px;
}
th {
    font-weight : normal;
}
table tr:first-child td {
    margin: 0 auto;
    text-align : center;
}
table td:first-child {
    width : 130px;
    text-align :left;
}
a {
    text-decoration : none;
}
a:hover {
    text-decoration : underline;
}
select {
    width : 120px;
}
div {
    border : 1px solid black;
    border-radius: 10px;
    margin-bottom : 10px;
}
div div {
    padding : 5px;
}
h2 {
    color : #ffffff;
    font-weight : bold;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #0015D1), color-stop(1, #EDCCD7));
    background-image: -o-linear-gradient(right, #0015D1 0%, #EDCCD7 100%);
    background-image: -moz-linear-gradient(right, #0015D1 0%, #EDCCD7 100%);
    background-image: -webkit-linear-gradient(right, #0015D1 0%, #EDCCD7 100%);
    background-image: -ms-linear-gradient(right, #0015D1 0%, #EDCCD7 100%);
    background-image: linear-gradient(to right, #0015D1 0%, #EDCCD7 100%);
    -webkit-border-top-left-radius : 10px;
    -webkit-border-top-right-radius : 10px;
    -moz-border-radius-topleft : 10px;
    -moz-border-radius-topright : 10px;
    padding : 10px;
    margin : 0px 0px 10px;
}
h2 button {
    float : right;
}
.dps {
    display : none;
}

JavaScript

var units = {
    "王子": {
        hp: 1400,
        atk: 400,
        def: 300,
        wait: 35,
        skill: "士気高揚",
        img: "http://i.gyazo.com/c63cefdfba1034f95e27f61c6f91150b.png"
    },
        "キャリー(未CC)": {
        hp: 1140,
        atk: 353,
        def: 252,
        wait: 33,
        skill: "攻撃力強化Ⅱ",
        img: "http://i.gyazo.com/288a1bd43dd5f46ec44f5b86fa4e5fb4.png"
    },
        "キャリー": {
        hp: 1634,
        atk: 463,
        def: 378,
        wait: 33,
        skill: "攻撃力強化Ⅲ",
        img: "http://i.gyazo.com/288a1bd43dd5f46ec44f5b86fa4e5fb4.png"
    }
}

unit = units["王子"];
enemy = {
    hp: 2800,
    atk: 400,
    def: 200
};
jQuery("#atack").click(function () {
    var $ref = jQuery(this);
    $ref.attr('disabled', 'disabled');
    var $meter = jQuery("meter:eq(1)").show();
    $meter.attr('value', $meter.attr('max'));
    var damage = unit.damage; //parseInt(jQuery(".unit.damage").text());
    var id = setInterval(function () {
        var hp = Math.max($meter.attr('value') - damage, 0);
        $meter.attr('value', hp);
        if (hp == 0) {
            $meter.hide();
            clearInterval(id);
            $ref.removeAttr('disabled');
        }
    }, Math.floor(unit.wait / 30 * 1000));

});

jQuery("#unit").change(function () {
    unit = units[jQuery(this).val()];
    jQuery(".unit.hp").text(unit.hp);
    jQuery(".unit.atk").text(unit.atk);
    jQuery(".unit.def").text(unit.def);
    unit.damage = Math.max(unit.atk - enemy.def, Math.floor(unit.atk / 10));
    jQuery(".unit.damage").text(unit.damage);
    var kill = Math.ceil(enemy.hp / unit.damage);
    jQuery(".unit.kill").text(kill);
    jQuery(".unit.wait").text(unit.wait);
    var t = Math.floor(kill * unit.wait / 3) / 10;
    jQuery(".unit.defeat").text(t + '秒');
    jQuery(".unit.skill").text(unit.skill);
    jQuery(".unit.img").attr('src', unit.img);
}).change();


jQuery("#skill").click(function () {
    var $ref = jQuery(this);
    $ref.attr('disabled',...