盲盒许愿对对碰

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盲盒许愿对对碰</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  body {
    min-height: 100vh;
    background: linear-gradient(135deg, #ffeef8 0%, #e0f4ff 50%, #f3e8ff 100%);
    padding: 18px;
    text-align: center;
    color: #333;
  }

  h2 {
    color: #ff5ca8;
    margin-bottom: 10px;
    font-size: 22px;
    letter-spacing: 1px;
  }

  .rule {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 14px;
    padding: 12px;
    margin: 12px auto;
    max-width: 360px;
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    box-shadow: 0 4px 14px rgba(255, 182, 193, 0.25);
  }

  .rule b {
    color: #ff5ca8;
  }

  .wish-area {
    margin: 14px 0;
  }

  .wish-area label {
    font-size: 14px;
    color: #666;
    margin-right: 8px;
  }

  .wish-area select {
    padding: 8px 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid #ffc5dd;
    background: #fff;
    color: #333;
    outline: none;
  }

  #startBtn {
    background: linear-gradient(135deg, #ff7ac6, #ff5ca8);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255, 92, 168, 0.4);
    transition: transform 0.15s ease;
  }

  #startBtn:active {
    transform: scale(0.96);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 340px;
    margin: 20px auto;
  }

  .card {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    background: #fff;
    border: 2px solid #ffd6e7;
    box-shadow: 0 6px 16px rgba(255, 182, 220, 0.35);
    transition: transform 0.2s ease;
    animation: pop 0.35s ease;
  }

  .card.wish {
    border-color: #ffbe0b;
    box-shadow: 0 0 0 3px rgba(255, 190, 11, 0.35), 0 6px 16px rgba(255, 189, 11, 0.35);
  }

  @keyframes pop {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .info {
    margin: 14px 0;
    font-size: 15px;
    color: #555;
  }

  .result {
    font-size: 22px;
    font-weight: bold;
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    display: inline-block;
    min-width: 240px;
  }

  .result.win {
    background: linear-gradient(135deg, #ffd8ef, #ffe9a8);
    color: #ff5ca8;
    box-shadow: 0 6px 18px rgba(255, 182, 220, 0.45);
  }

  .result.lose {
    background: #f1f1f1;
    color: #777;
  }
</style>
</head>
<body>
<h2>🎴盲盒许愿对对碰</h2>
<div class="rule">
规则：开局发9张｜选中许愿角色，牌里出现许愿角色就多发1张<br>两张相同角色算一碰，每碰一次补发1张<br>✅0碰/2碰/≥8碰=有奖；❌3-7碰=无奖
</div>
<div class="wish-area">
<label>选择许愿角色：</label>
<select id="wishChar">
  <option value="拉布布">🩷拉布布 LABUBU</option>
  <option value="小野">🤍小野 HIRONO</option>
  <option value="DIMOO">💙DIMOO</option>
  <option value="MOLLY">💛MOLLY茉莉</option>
  <option value="SP">🖤Skullpanda SP</option>
  <option value="潘神">💜潘神 Satyr Rory</option>
  <option value="毕奇">💚毕奇 Pucky</option>
  <option value="卓大王">🧡卓大王</option>
  <option value="Yuki">🤎Yuki</option>
</select>
</div>
<button id="startBtn">开局发牌</button>
<div class="grid" id="grid"></div>
<div class="info">
<div>总碰数：<span id="count">0</span></div>
</div>
<div class="result" id="res"></div>

<script>
// 9个盲盒角色
const charList = ["拉布布","小野","DIMOO","MOLLY","SP","潘神","毕奇","卓大王","Yuki"];
const charEmoji = {
  "拉布布":"🩷",
  "小野":"🤍",
  "DIMOO":"💙",
  "MOLLY":"💛",
  "SP":"🖤",
  "潘神":"💜",
  "毕奇":"💚",
  "卓大王":"🧡",
  "Yuki":"🤎"
};

const grid = document.getElementById("grid");
const countEl = document.getElementById("count");
const resEl = document.getElementById("res");
const wishSel = document.getElementById("wishChar");
const startBtn = document.getElementById("startBtn");

function shuffle(arr){
    let a=[...arr];
    for(let i=a.length-1;i>0;i--){
        let j=Math.floor(Math.random()*(i+1));
        [a[i],a[j]]=[a[j],a[i]]
    }
    return a;
}

function runGame(){
    grid.innerHTML="";
    resEl.textContent="";
    let wish = wishSel.value;
    let pool=[];
    //开局固定9张
    for(let i=0;i<9;i++){
        pool.push(charList[Math.floor(Math.random()*charList.length)]);
    }
    // 只要开局牌池里有许愿角色，额外+1张
    let hasWish = pool.includes(wish);
    if(hasWish){
        pool.push(wish);
    }

    let hit=0;
    function calcHit(){
        let tmpMap={};
        pool.forEach(c=>tmpMap[c]=(tmpMap[c]||0)+1);
        let pairs=0;
        for(let k in tmpMap){
            pairs += Math.floor(tmpMap[k]/2);
        }
        return pairs;
    }
    // 每碰一对，补发一张，循环结算
    while(true){
        let nowPair = calcHit();
        if(nowPair <= hit) break;
        hit = nowPair;
        pool.push(charList[Math.floor(Math.random()*charList.length)]);
    }

    //渲染卡牌
    pool.forEach(c=>{
        let div=document.createElement("div");
        div.className="card";
        if(c === wish){
            div.classList.add("wish");
        }
        div.innerText = charEmoji[c] + "\n" + c;
        grid.appendChild(div);
    })
    countEl.innerText=hit;

    //开奖逻辑不变：3~7碰无奖，其余有奖
    if(hit>=3 && hit<=7){
        resEl.className="result lose";
        resEl.innerHTML = `😮‍💨 ${hit}碰，本次无奖`
    }else{
        resEl.className="result win";
        resEl.innerHTML = `🎉 ${hit}碰！恭喜中奖！`
    }
}
startBtn.onclick = runGame;
</script>
</body>
</html>