devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一个简易的QQ魔法卡片炼卡消耗计算器_魔法卡片计算器

作者：2023面试高手 | 2024-06-04 05:21:21

赞

踩

魔法卡片计算器

昨天晚上做了一个很简单的腾讯网页游戏魔法卡片的炼卡消耗计算器，先放地址：https://coding-pages-bucket-462845-1308815-2934-343840-1251231260.cos-website.ap-hongkong.myqcloud.com/

GIT仓库地址：https://dtid_a67c3477ddaa7b17.coding.net/public/BrowserSupport/QQ/git/files/master/index.html

做这东西的起因是，前端时间魔法卡片搞了周年活动，炼两套《里程征途》的卡，现在活动结束了，我小号上的《里程征途下》的卡差3张辛丑条约就可以炼成，而我大号上有4张辛丑条约，只要换给小号，就可以搞定。

但是我发现我大号上总共有素材卡75张，我就想能不能大号炼一些上面的卡，把小号身上的卡换过来，让大号来集齐这一套卡。于是，打开Excel算了半天，也没算明白身上的卡够不够炼成。就去搜了一下魔法卡片计算器，不过当时搜得匆忙，没有找到好用的，后来做完之后，倒是发现一个很不错的。

本来打算用C#做，后来想想做成微信小程序应该不错，不过最后还是偷了个懒，写成了网页。

代码非常简单，如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>魔法卡片消耗计算器</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  7.     <style>
  8.         .table {
  9.             width: 100%;
  10.         }
  11.  
  12.             .table, .table th, .table td {
  13.                 border: solid 1px #eee;
  14.                 border-collapse: collapse;
  15.             }
  16.  
  17.         .magic-card {
  18.             width: 100px;
  19.             height: 160px;
  20.             border: solid 2px #888888;
  21.         }
  22.  
  23.         .clear-both {
  24.             clear: both;
  25.             width: 0px;
  26.             height: 0px;
  27.             overflow: hidden;
  28.         }
  29.     </style>
  30. </head>
  31.  
  32. <body>
  33.     <nav aria-label="breadcrumb">
  34.         <ol class="breadcrumb">
  35.             <li class="breadcrumb-item active" aria-current="page">魔法卡片消耗计算器</li>
  36.         </ol>
  37.     </nav>
  38.     <div class="container-fluid mt-1">
  39.         <div class="row">
  40.             <div class="col-12">
  41.                 <div class="form-inline">
  42.                     套卡层数：<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>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.         <div class="row mt-1">
  47.             <div class="col-12">
  48.                 <table class="table" id="tblCards">
  49.                     <thead>
  50.                         <tr>
  51.                             <th>层级</th>
  52.                             <th>卡片</th>
  53.                         </tr>
  54.                     </thead>
  55.                     <tbody></tbody>
  56.                 </table>
  57.             </div>
  58.         </div>
  59.         <div class="row mt-1">
  60.             <div class="col-12 text-center">
  61.                 <button class="btn btn-success" onclick="computeConsume();">计算消耗</button>
  62.             </div>
  63.         </div>
  64.     </div>
  65.     <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>
  66.     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  67.     <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>
  68.     <script>
  69.         function cl(obj) {
  70.             if (console && console.log) {
  71.                 console.log(obj);
  72.             }
  73.         }
  74.     </script>
  75.     <script>
  76.         function createOneCard(level) {
  77.             var cardId = level + "-" + $("#tblCards tr[data-level=" + level + "]").find(".card").length;
  78.             var html = "";
  79.             html += "<div class='card float-left mr-2 mb-2' data-card-id='" + cardId + "' data-level='" + level + "'>";
  80.             html += "<div class='card-header'>";
  81.             html += cardId;
  82.             html += "</div>";
  83.             html += "<div class='card-body'>";
  84.             if (level > 1) {
  85.                 html += "<div class='form-inline mb-1'>";
  86.                 html += "消耗卡片：";
  87.                 for (var i = 0; i < 3; i++) {
  88.                     html += "<input class='form-control-sm mr-1' type='text' style='width: 60px;' data-card-id='" + cardId + "'/>";
  89.                 }
  90.                 html += "</div>";
  91.             }
  92.             html += "<div class='form-inline mb-1'>";
  93.             html += "已有张数：<input class='form-control-sm mr-1' type='number' style='width: 90px;' data-card-id='" + cardId + "' min='0' value='0'/>";
  94.             html += "</div>";
  95.             html += "<div class='alert alert-info'>消耗数：" + "1" + "</div>";
  96.             html += "</div>";
  97.             html += "</div>";
  98.             html += "";
  99.             return html;
  100.         }
  101.  
  102.         function createCards(level) {
  103.             var $td = $("#tblCards tr[data-level=" + level + "]").find("td").eq(0);
  104.             $td.children().remove();
  105.             var cardCount = parseInt($("input[data-level=" + level + "]").val(), 10);
  106.             for (var i = 0; i < cardCount; i++) {
  107.                 $td.append(createOneCard(level));
  108.             }
  109.         }
  110.  
  111.         function createOneRow(level) {
  112.             var rowHtml = "<tr data-level='" + level + "'>";
  113.             rowHtml += "<th>";
  114.             rowHtml += "第" + level + "层";
  115.             rowHtml += "<div class='form-inline'>";
  116.             rowHtml += "卡数：" + "<input class='form-control' style='width: 90px;' type='number' data-level='" + level + "' min='1' max='15' value='1'/>";
  117.             rowHtml += "<button class='btn btn-sm btn-primary ml-2' onclick='createCards(" + level + ")'>";
  118.             rowHtml += "确定";
  119.             rowHtml += "</button>";
  120.             rowHtml += "</div>";
  121.             rowHtml += "</th>";
  122.             rowHtml += "<td>" + createOneCard(level) + "</td>";
  123.             rowHtml += "</tr>";
  124.             return rowHtml;
  125.         }
  126.  
  127.         function createCardSet() {
  128.             $("#tblCards tbody").children().remove();
  129.             var levels = parseInt($("#numCardLevelCount").val(), 10);
  130.             for (var i = levels; i >= 1; i--) {
  131.                 var rowHtml = createOneRow(i);
  132.                 $("#tblCards tbody").append(rowHtml);
  133.             }
  134.         }
  135.  
  136.         $(function () {
  137.             createCardSet();
  138.         });
  139.     </script>
  140.     <script>
  141.         var hasCards = {};
  142.         function computeConsume() {
  143.             var $cards = $("#tblCards tbody tr").find("div[data-card-id]");
  144.             var $hasCards = $cards.find("input[type=number][data-card-id]");
  145.             for (var i = 0; i < $hasCards.length; i++) {
  146.                 hasCards[$hasCards.eq(i).data("card-id")] = parseInt($hasCards.eq(i).val(), 10);
  147.             }
  148.             var consumes = {};
  149.             for (var i = 0; i < $cards.length; i++) {
  150.                 var consume = computeOneCardConsume($cards.eq(i).data("card-id"));
  151.                 for (var attr in consume) {
  152.                     if (consumes[attr]) {
  153.                         consumes[attr] += consume[attr];
  154.                     } else {
  155.                         consumes[attr] = consume[attr];
  156.                     }
  157.                 }
  158.             }
  159.             for (var cardId in consumes) {
  160.                 $("#tblCards tbody tr").find("div[data-card-id=" + cardId + "]").find("div.alert-info")
  161.                     .text("消耗数：" + consumes[cardId]);
  162.             }
  163.         }
  164.  
  165.         function computeOneCardConsume(cardId) {
  166.             var ret = {};
  167.             ret[cardId] = 1;
  168.             var $card = $("div[data-card-id=" + cardId + "]");
  169.             var level = parseInt($card.data("level"), 10);
  170.             if (level > 1) {
  171.                 if (hasCards[cardId] > 0) {
  172.                     hasCards[cardId]--;
  173.                 } else {
  174.                     var $consumeCards = $card.find("input[type=text][data-card-id=" + cardId + "]");
  175.                     for (var i = 0; i < $consumeCards.length; i++) {
  176.                         var consume = computeOneCardConsume($consumeCards.eq(i).val());
  177.                         for (var attr in consume) {
  178.                             if (ret[attr]) {
  179.                                 ret[attr] += consume[attr];
  180.                             } else {
  181.                                 ret[attr] = consume[attr];
  182.                             }
  183.                         }
  184.                     }
  185.                 }
  186.             }
  187.             return ret;
  188.         }
  189.     </script>
  190. </body>
  191.  
  192. </html>

然后就拿来算了一下消耗，总共需要消耗素材卡58张，素材卡是够了。

本来以为有戏，结果换了个算法算了一下，发现，因为3-1(西安事变)也需要消耗辛丑条约，所以就算全走右边这条线，也需要7张辛丑条约，有3张缺口，而卡友这边的话，辛丑条约基本都不可能换到，所以还是只能将辛丑条约换给小号去合成了。

最后，通过腾讯云的GIT仓库把这个静态网页发布到了腾讯云上面，有需要的可以用。

以后还可以考虑加些默认套卡模版的功能，再说吧。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/670543
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号