魔法卡片计算器

yuyunliu
已于 2022-11-17 15:08:35 修改
阅读量487
点赞数
文章标签： html javascript css
于 2022-11-17 15:06:24 首次发布
本文链接：https://blog.csdn.net/yuyunliu/article/details/127904231
版权
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GBK" />
    <title>魔法卡片消耗计算器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        .table {
            width: 100%;
        }
 
            .table, .table th, .table td {
                border: solid 1px #eee;
                border-collapse: collapse;
            }
 
        .magic-card {
            width: 100px;
            height: 160px;
            border: solid 2px #888888;
        }
 
        .clear-both {
            clear: both;
            width: 0px;
            height: 0px;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">魔法卡片消耗计算器</li>
        </ol>
    </nav>
    <div class="container-fluid mt-1">
        <div class="row">
            <div class="col-12">
                <div class="form-inline">
                    套卡层数：<input class="form-control" type="number" id="numCardLevelCount" min="1" max="15" increment="1" value="3" /><button class="btn btn-primary ml-2" type="button" onclick="createCardSet();">确定</button>
                </div>
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-12">
                <table class="table" id="tblCards">
                    <thead>
                        <tr>
                            <th>层级</th>
                            <th>卡片</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="row mt-1">
            <div class="col-12 text-center">
                <button class="btn btn-success" onclick="computeConsume();">计算消耗</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        function cl(obj) {
            if (console && console.log) {
                console.log(obj);
            }
        }
    </script>
    <script>
        function createOneCard(level) {
            var cardId = level + "-" + $("#tblCards tr[data-level=" + level + "]").find(".card").length;
            var html = "";
            html += "<div class='card float-left mr-2 mb-2' data-card-id='" + cardId + "' data-level='" + level + "'>";
            html += "<div class='card-header'>";
            html += cardId;
            html += "</div>";
            html += "<div class='card-body'>";
            if (level > 1) {
                html += "<div class='form-inline mb-1'>";
                html += "消耗卡片：";
                for (var i = 0; i < 3; i++) {
                    html += "<input class='form-control-sm mr-1' type='text' style='width: 60px;' data-card-id='" + cardId + "'/>";
                }
                html += "</div>";
            }
            html += "<div class='form-inline mb-1'>";
            html += "已有张数：<input class='form-control-sm mr-1' type='number' style='width: 90px;' data-card-id='" + cardId + "' min='0' value='0'/>";
            html += "</div>";
            html += "<div class='alert alert-info'>消耗数：" + "1" + "</div>";
            html += "</div>";
            html += "</div>";
            html += "";
            return html;
        }
 
        function createCards(level) {
            var $td = $("#tblCards tr[data-level=" + level + "]").find("td").eq(0);
            $td.children().remove();
            var cardCount = parseInt($("input[data-level=" + level + "]").val(), 10);
            for (var i = 0; i < cardCount; i++) {
                $td.append(createOneCard(level));
            }
        }
 
        function createOneRow(level) {
            var rowHtml = "<tr data-level='" + level + "'>";
            rowHtml += "<th>";
            rowHtml += "第" + level + "层";
            rowHtml += "<div class='form-inline'>";
            rowHtml += "卡数：" + "<input class='form-control' style='width: 90px;' type='number' data-level='" + level + "' min='1' max='15' value='1'/>";
            rowHtml += "<button class='btn btn-sm btn-primary ml-2' onclick='createCards(" + level + ")'>";
            rowHtml += "确定";
            rowHtml += "</button>";
            rowHtml += "</div>";
            rowHtml += "</th>";
            rowHtml += "<td>" + createOneCard(level) + "</td>";
            rowHtml += "</tr>";
            return rowHtml;
        }
 
        function createCardSet() {
            $("#tblCards tbody").children().remove();
            var levels = parseInt($("#numCardLevelCount").val(), 10);
            for (var i = levels; i >= 1; i--) {
                var rowHtml = createOneRow(i);
                $("#tblCards tbody").append(rowHtml);
            }
        }
 
        $(function () {
            createCardSet();
        });
    </script>
    <script>
        var hasCards = {};
        function computeConsume() {
            var $cards = $("#tblCards tbody tr").find("div[data-card-id]");
            var $hasCards = $cards.find("input[type=number][data-card-id]");
            for (var i = 0; i < $hasCards.length; i++) {
                hasCards[$hasCards.eq(i).data("card-id")] = parseInt($hasCards.eq(i).val(), 10);
            }
            var consumes = {};
            for (var i = 0; i < $cards.length; i++) {
                var consume = computeOneCardConsume($cards.eq(i).data("card-id"));
                for (var attr in consume) {
                    if (consumes[attr]) {
                        consumes[attr] += consume[attr];
                    } else {
                        consumes[attr] = consume[attr];
                    }
                }
            }
            for (var cardId in consumes) {
                $("#tblCards tbody tr").find("div[data-card-id=" + cardId + "]").find("div.alert-info")
                    .text("消耗数：" + consumes[cardId]);
            }
        }
 
        function computeOneCardConsume(cardId) {
            var ret = {};
            ret[cardId] = 1;
            var $card = $("div[data-card-id=" + cardId + "]");
            var level = parseInt($card.data("level"), 10);
            if (level > 1) {
                if (hasCards[cardId] > 0) {
                    hasCards[cardId]--;
                } else {
                    var $consumeCards = $card.find("input[type=text][data-card-id=" + cardId + "]");
                    for (var i = 0; i < $consumeCards.length; i++) {
                        var consume = computeOneCardConsume($consumeCards.eq(i).val());
                        for (var attr in consume) {
                            if (ret[attr]) {
                                ret[attr] += consume[attr];
                            } else {
                                ret[attr] = consume[attr];
                            }
                        }
                    }
                }
            }
            return ret;
        }
    </script>
</body>
 
</html>