ズッ友体感シミュレータ

ズッ友さんの効果を体感してみよう！

HTML

<header>
    <h2>ズッ友体感シミュレータ</h2>
    <table id='explain'>
        <tr><td><span style='font-weight:bold;color:#ff4500'>(+1)</span></td><td>スクリプト処理方法による実質的なボーナス値</td></tr>
    <tr><td><span style='font-weight:bold;color:rgb(10, 229, 10)'>+2</span></td><td>ズッ友さんによるアップ効果</td></tr>
        <tr><td><span class='effect'>+1</span></td><td>覚醒ズッ友さんによるさらなるアップ効果(未覚醒ズッ友さん比)</td></tr>
    </table>
</header>
<div name='stage' data-charisma='0' data-stamina='3' data-effect='false'>
     <h3>ファランクス2</h3>

    <button name='try'>1回ずつ挑戦する</button>
    <button name='effective'>ズッ友効果か覚醒ズッ友効果(合計+3%)が出るまで挑戦する</button>
    <p>　<span name='play'>0</span>回挑戦(消費カリスマ：<span name='charisma'>0</span>　消費スタミナ：<span name='stamina'>0</span>)</p>
    <table>
        <tr>
            <th>アイテム</th>
            <th>ドロップ率</th>
            <th>期待値</th>
            <th>実ドロップ</th>
            <th>備考</th>
        </tr>
        <tr name='item' data-drop='70'>
            <td>
                <img src='http://i.gyazo.com/38688a6fcd90f3553e8aa856acab75d5.png' title='花束' />
            </td>
            <td><span name='drop'></span>%</td>
            <td><span name='expect'>0</span>個</td>
            <td><span name='count'>0</span>個</td>
            <td></td>
        </tr>
        <tr name='item' data-drop='70'>
            <td>
                <img src='http://i.gyazo.com/15035d835d7a65e0f859fd2167d44298.png' title='水晶' />
            </td>
            <td><span name='drop'></span>%</td>
            <td><span name='expect'>0</span>個</td>
            <td><span name='count'>0</span>個</td>
            <td></td>
        </tr>
        <tr name='item' data-drop='40' data-count='2'>
            <td>
                <img src='http://i.gyazo.com/a812a2300def073bb03712b4b3d6f81a.png' title='ルビー' />
            </td>
            <td><span name='drop'></span>%</td>
            <td><span name='expect'>0</span>個</td>
            <td><span name='count'>0</span>個</td>
            <td>2回判定</td>
        </tr>
        <tr...

CSS

table {
    border : 1px solid black;
    border-collapse : collapse;
    margin-bottom : 5px;
}
table td {
    width : 80px;
    text-align : right;
    border : 1px solid black;
    padding : 3px;
}
table td:first-child {
    text-align : center;
}
#explain td {
    width : 450px;
    text-align : left;
}
#explain td:first-child {
    width : 50px;
}
span.effect {
    color : blue;
    font-weight : bold;
}
div[name="stage"] {
    border : 1px solid black;
    padding : 10px;
    margin : 5px 0px;
}
.up {
    color : blue;
    font-weight : bold;
}
.down {
    color : red;
    font-weight : bold;
}
img {
    width : 40px;
    height : 40px;
}
a {
    text-decoration : none;
}
a:hover {
    text-decoration : underline;
}

footer {
    margin-top : 30px;
    background-color : #333;
    padding : 5px;
    font-size : 12px;
    text-align : right;
}
footer a {
    color : white;
    font-weight : bold;
}

JavaScript

$(function () {

    var effect = false;
    var Try = function (i, ref) {
        var stage = ref.parent();
        var result = stage.find("[name='result']");

        var play = stage.find("[name='play']");
        var challenge = parseInt(play.text(), 10) + 1;
        play.text(challenge);
        var charisma = stage.find("[name='charisma']");
        charisma.text(parseInt(charisma.text(), 10) + stage.data('charisma'));
        var stamina = stage.find("[name='stamina']");
        stamina.text(parseInt(stamina.text(), 10) + stage.data('stamina'));

        var nodrop = true;
        var tmp = [];
        var div = jQuery("<div></div>");
        stage.find("[name='item'][data-drop]").each(function (j) {
            var item = jQuery(this);
            var count = item.data('count') || 1;
            var drop = parseInt(item.data('drop'));
            var zuttomo = item.data('zuttomo') ? 3 : 0;
            var expect = Math.floor(drop * count * challenge / 100);
            if (zuttomo) {
                expect += "+" + Math.floor(zuttomo * count * challenge / 100);
            }
            item.find("[name='expect']").text(expect);
            var $count = item.find("[name='count']");
            var tmp = $count.text();
            if (zuttomo) {
                var jd = parseInt(tmp.split('+')[0]);
                var jz = parseInt((tmp.split('+')[1]) || 0);
                var jk = parseInt((tmp.split('+')[2]) || 0);
            } else {
                var jd = parseInt(tmp);
                var jz = 0;
                var jk = 0;
            }
            for (var c = 0; c < count; ++c) {
                var r = Math.floor(Math.random() * 100);
                if (r <= drop + zuttomo) {
                    nodrop = false;
                    div.append(item.find("img").clone());
                    if (r <= drop) {
                        jd++;
                    } else if (r <= drop + 2){
                        jz++;
                       ...