javaScript -- js 数字转段位（王者荣耀段位）

作者: 反者道之动001 | 来源:发表于2020-01-09 17:36 被阅读0次

javaScript -- js 数字转段位（王者荣耀段位）
王者荣耀QQ显示段位
QA段位，你在哪一级？
上分路漫漫
男默女泪的王者荣耀通关秘诀
上分
王者荣耀混躺赢最佳英雄赶快练起来
王者荣耀掌握这些细节，助你单排上王者
钱盆网：学会投资理财，早日成为财务自由段位王者
No.32 无主题的小点滴

王者荣耀段位js实现。

每一个等级的提升都是一个数字的增加，而至于段位不过是划分而已。找到范围就是了。

王者荣耀的段位可以分3个层级

铜、银、铁.. 是最外层的等级
然后就是'I', 'II', 'III', 'IV', 'V'
再是最后的等级

代码

/**
 * 段位等级
 * num 等级数字
 */
const getGrade = (num) => {
  var luomashuzi = ['I', 'II', 'III', 'IV', 'V']
  var data = [
    { x: 3, y: 3, name: '青铜' },
    { x: 4, y: 4, name: '白银' },
    { x: 4, y: 4, name: '黄金' },
    { x: 5, y: 5, name: '铂金' },
    { x: 5, y: 5, name: '钻石' },
  ]
  data = data.map(e => ({ ...e, total: e.x * e.y }))
  for (var d = 0; d < data.length; d++) {
    data[d].range = [...data].splice(0, d).map(e => e.total).reduce((a, b) => a + b, 0)
  }
  // console.log(data)
  for (var d = 0; d < data.length; d++) {
    var item = data[d]
    var x = item.x
    var y = item.y
    // 段位判断
    if (num > item.range && num <= item.total + item.range) {
      for (let i = 1; i <= y; i++) {
        // 获取第二段位
        if (num - item.range <= y * i) {
          // 获取第四段位（星级）并返回结果
          return {
            y: item.y,
            name: item.name + ' ' + luomashuzi[x - i],
            star: (x - (x * i - (num - item.range)))
          }
        }
      }
    }
  }
  return {
    name: '学霸',
    star: num - data.map(e => e.total).reduce((a, b) => a + b, 0)
  }
}

(上面是js代码和小程序没啥关系，不过写的示例是在小程序上面，所以归类小程序)

使用

this.setData({
      grade_list: new Array(100).fill(0).map((_, i) => i + 1)
      // grade_list: [9, 50, 100]
      .map(util.getGrade)
        .map(e => {
          if(e.name == '学霸'){
            return {
              ...e,
              isTopGrade: true,
            }
          }
          return { ...e, star: this.setStar(e.y, e.star), isTopGrade: false,}
        })
    })

<view wx:for="{{grade_list}}">
    <text>{{item.name}}</text>
    <view class="img-box" wx:if="{{!item.isTopGrade}}">
      <image wx:for="{{item.star}}" :key="key" class="{{item == 0 ? 'gray' : 'full'}}" src="{{item == 0 ? '/image/gray-star.png' : '/image/star.png'}}"></image>
    </view>
    <text wx:else>{{item.star}}</text>
  </view>

打印看看

        var v = ``
        for(let i = 1; i = 100; i++){
            v += i + ': ' + JSON.stringify(getGrade(i)) + '\n'
        }
        console.log(v)

打印结果

1: {"y":3,"name":"青铜 III","star":1}
2: {"y":3,"name":"青铜 III","star":2}
3: {"y":3,"name":"青铜 III","star":3}
4: {"y":3,"name":"青铜 II","star":1}
5: {"y":3,"name":"青铜 II","star":2}
6: {"y":3,"name":"青铜 II","star":3}
7: {"y":3,"name":"青铜 I","star":1}
8: {"y":3,"name":"青铜 I","star":2}
9: {"y":3,"name":"青铜 I","star":3}
10: {"y":4,"name":"白银 IV","star":1}
11: {"y":4,"name":"白银 IV","star":2}
12: {"y":4,"name":"白银 IV","star":3}
13: {"y":4,"name":"白银 IV","star":4}
14: {"y":4,"name":"白银 III","star":1}
15: {"y":4,"name":"白银 III","star":2}
16: {"y":4,"name":"白银 III","star":3}
17: {"y":4,"name":"白银 III","star":4}
18: {"y":4,"name":"白银 II","star":1}
19: {"y":4,"name":"白银 II","star":2}
20: {"y":4,"name":"白银 II","star":3}
21: {"y":4,"name":"白银 II","star":4}
22: {"y":4,"name":"白银 I","star":1}
23: {"y":4,"name":"白银 I","star":2}
24: {"y":4,"name":"白银 I","star":3}
25: {"y":4,"name":"白银 I","star":4}
26: {"y":4,"name":"黄金 IV","star":1}
27: {"y":4,"name":"黄金 IV","star":2}
28: {"y":4,"name":"黄金 IV","star":3}
29: {"y":4,"name":"黄金 IV","star":4}
30: {"y":4,"name":"黄金 III","star":1}
31: {"y":4,"name":"黄金 III","star":2}
32: {"y":4,"name":"黄金 III","star":3}
33: {"y":4,"name":"黄金 III","star":4}
34: {"y":4,"name":"黄金 II","star":1}
35: {"y":4,"name":"黄金 II","star":2}
36: {"y":4,"name":"黄金 II","star":3}
37: {"y":4,"name":"黄金 II","star":4}
38: {"y":4,"name":"黄金 I","star":1}
39: {"y":4,"name":"黄金 I","star":2}
40: {"y":4,"name":"黄金 I","star":3}
41: {"y":4,"name":"黄金 I","star":4}
42: {"y":5,"name":"铂金 V","star":1}
43: {"y":5,"name":"铂金 V","star":2}
44: {"y":5,"name":"铂金 V","star":3}
45: {"y":5,"name":"铂金 V","star":4}
46: {"y":5,"name":"铂金 V","star":5}
47: {"y":5,"name":"铂金 IV","star":1}
48: {"y":5,"name":"铂金 IV","star":2}
49: {"y":5,"name":"铂金 IV","star":3}
50: {"y":5,"name":"铂金 IV","star":4}
51: {"y":5,"name":"铂金 IV","star":5}
52: {"y":5,"name":"铂金 III","star":1}
53: {"y":5,"name":"铂金 III","star":2}
54: {"y":5,"name":"铂金 III","star":3}
55: {"y":5,"name":"铂金 III","star":4}
56: {"y":5,"name":"铂金 III","star":5}
57: {"y":5,"name":"铂金 II","star":1}
58: {"y":5,"name":"铂金 II","star":2}
59: {"y":5,"name":"铂金 II","star":3}
60: {"y":5,"name":"铂金 II","star":4}
61: {"y":5,"name":"铂金 II","star":5}
62: {"y":5,"name":"铂金 I","star":1}
63: {"y":5,"name":"铂金 I","star":2}
64: {"y":5,"name":"铂金 I","star":3}
65: {"y":5,"name":"铂金 I","star":4}
66: {"y":5,"name":"铂金 I","star":5}
67: {"y":5,"name":"钻石 V","star":1}
68: {"y":5,"name":"钻石 V","star":2}
69: {"y":5,"name":"钻石 V","star":3}
70: {"y":5,"name":"钻石 V","star":4}
71: {"y":5,"name":"钻石 V","star":5}
72: {"y":5,"name":"钻石 IV","star":1}
73: {"y":5,"name":"钻石 IV","star":2}
74: {"y":5,"name":"钻石 IV","star":3}
75: {"y":5,"name":"钻石 IV","star":4}
76: {"y":5,"name":"钻石 IV","star":5}
77: {"y":5,"name":"钻石 III","star":1}
78: {"y":5,"name":"钻石 III","star":2}
79: {"y":5,"name":"钻石 III","star":3}
80: {"y":5,"name":"钻石 III","star":4}
81: {"y":5,"name":"钻石 III","star":5}
82: {"y":5,"name":"钻石 II","star":1}
83: {"y":5,"name":"钻石 II","star":2}
84: {"y":5,"name":"钻石 II","star":3}
85: {"y":5,"name":"钻石 II","star":4}
86: {"y":5,"name":"钻石 II","star":5}
87: {"y":5,"name":"钻石 I","star":1}
88: {"y":5,"name":"钻石 I","star":2}
89: {"y":5,"name":"钻石 I","star":3}
90: {"y":5,"name":"钻石 I","star":4}
91: {"y":5,"name":"钻石 I","star":5}
92: {"name":"学霸","star":1}
93: {"name":"学霸","star":2}
94: {"name":"学霸","star":3}
95: {"name":"学霸","star":4}
96: {"name":"学霸","star":5}
97: {"name":"学霸","star":6}
98: {"name":"学霸","star":7}
99: {"name":"学霸","star":8}
100: {"name":"学霸","star":9}

--完--