小草谷子店/gacha.html · 约 3515 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>抽卡抽赏 · 小草谷子店</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>抽卡抽赏</h1><span class="right"></span></header>
12<div class="gacha-hero">
13 <div class="gh-title">🎰 谷子抽赏 · 欧气时刻</div>
14 <div class="gh-sub">单抽 ¥9.9 · 十连 ¥99（保底 B 赏以上）<br/>SP 隐藏赏稀有度拉满 · 抽中即赚，顺丰包邮</div>
15</div>
16<div class="draw-box">
17 <div class="ten-grid" id="drawGrid"></div>
18 <div class="draw-btns">
19 <div class="db single" onclick="drawOnce()">单抽 ¥9.9</div>
20 <div class="db ten" onclick="drawTen()">十连 ¥99</div>
21 </div>
22</div>
23<div class="section-title">🎁 奖池一览</div>
24<div class="pool-list" id="poolList"></div>
25<div class="section-title">📜 我的抽卡记录</div>
26<div class="records" id="gachaRecords"></div>
27<div style="height:70px"></div>
28
29
30<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🛍️</span>分类</a><a class=" active" href="gacha.html"><span class="icon">🎰</span>抽卡</a><a class="" href="community.html"><span class="icon">💬</span>社区</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
31<script src="data.js"></script>
32<script>
33 var pool = window.DATA.gacha.pool;
34 var grid = document.getElementById('drawGrid');
35 function fillGrid(n) {
36 var h = '';
37 for (var i = 0; i < n; i++) { h += '<div class="ten-cell"><div style="opacity:.3">？</div></div>'; }
38 grid.innerHTML = h;
39 }
40 fillGrid(10);
41 function pick(guarantee) {
42 var items = pool.filter(function (p) { return !guarantee || p.rare >= 5; });
43 var total = items.reduce(function (s, p) { return s + p.w; }, 0);
44 var r = Math.random() * total;
45 for (var i = 0; i < items.length; i++) { r -= items[i].w; if (r <= 0) return items[i]; }
46 return items[items.length - 1];
47 }
48 function renderResults(list) {
49 var h = '';
50 list.forEach(function (p) {
51 h += '<div class="ten-cell" style="border-color:' + p.color + '"><div>' + p.emoji + '</div><div class="tc-lv" style="color:' + p.color + '">' + p.lv + '</div></div>';
52 });
53 grid.innerHTML = h;
54 }
55 function drawOnce() { renderResults([pick(false)]); toast('单抽完成，看看欧不欧～'); }
56 function drawTen() {
57 var list = [];
58 for (var i = 0; i < 9; i++) list.push(pick(false));
59 list.push(pick(true));
60 renderResults(list);
61 var best = list.reduce(function (a, b) { return b.rare > a.rare ? b : a; }, list[0]);
62 toast('十连保底 B 赏以上！最高：' + best.lv);
63 }
64 var pl = document.getElementById('poolList');
65 var h2 = '';
66 pool.forEach(function (p) {
67 h2 += '<div class="pool-item"><div class="pi-emoji">' + p.emoji + '</div><div class="pi-body"><b>' + p.lv + '</b><span>' + p.name + '</span></div><div class="pi-rate">' + p.w + '/100</div></div>';
68 });
69 pl.innerHTML = h2;
70 var gr = document.getElementById('gachaRecords');
71 var h3 = '';
72 window.DATA.gacha.records.forEach(function (r) { h3 += '<div class="rc-item">📅 ' + r + '</div>'; });
73 gr.innerHTML = h3;
74</script>
75<script src="app.js"></script>
76</body>
77</html>