大秦风骨 - 单机策略抽卡一统天下

<!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>
*{margin:0;padding:0;box-sizing:border-box;font-family:"SimSun",serif;}
body{background:#22180f;color:#f0e6d2;padding:16px;max-width:1200px;margin:auto;}
h1{text-align:center;color:#d4af37;margin-bottom:20px;}
.panel{border:2px solid #8b7355;border-radius:10px;padding:16px;margin:12px 0;background:#302418;}
button{padding:10px 16px;margin:6px;border:none;border-radius:6px;background:#8b6020;color:#fff;font-size:16px;cursor:pointer;}
button:hover{background:#b07c28;}
button:disabled{background:#444;cursor:not-allowed;}
.card{display:inline-block;border:2px solid #665035;border-radius:8px;padding:10px;margin:8px;width:160px;background:#423222;vertical-align:top;}
.card.SSR{border-color:#ffd700;box-shadow:0 0 8px #ffd70044;}
.card.UR{border-color:#ff4444;box-shadow:0 0 10px #ff444444;}
.card.SR{border-color:#4499ff;}
.card.R{border-color:#888;}
.card.N{border-color:#666;}
.log{min-height:120px;border:1px solid #665;border-radius:6px;padding:12px;background:#1a120b;margin:12px 0;overflow-y:auto;max-height:180px;}
.city{padding:8px;margin:6px;border-radius:6px;background:#3c2d1f;display:inline-block;width:180px;}
.city.owned{background:#2f442f;border:1px solid #5f9;}
.city.enemy{background:#442222;border:1px solid #f55;}
.resource{font-size:18px;margin:8px 0;color:#ffdd88;}
.tabs{margin:10px 0;}
.tabbtn{margin:0 3px;}
.tabcontent{display:none;}
.tabcontent.active{display:block;}
</style>
</head>
<body>
<h1>⚔️ 大秦风骨 ⚔️</h1>
<div class="resource">💰金镒：<span id="gold">500</span> &nbsp;&nbsp;⚔️总战力：<span id="power">0</span> &nbsp;&nbsp;🏰占领城池：<span id="ownCity">1</span>/<span id="totalCity">12</span></div>

<div class="tabs">
<button class="tabbtn" data-tab="tabMain">🏠主界面</button>
<button class="tabbtn" data-tab="tabDraw">🃏抽卡</button>
<button class="tabbtn" data-tab="tabCardBag">📦卡包</button>
<button class="tabbtn" data-tab="tabMap">🗺️天下地图</button>
<button class="tabbtn" data-tab="tabBattle">⚔️攻城战斗</button>
</div>

<div id="tabMain" class="tabcontent active">
<div class="panel">
<h2>秦国 · 雍城开局</h2>
<p>列国争雄，西秦偏居一隅。抽取名臣猛将，励精图治，东出函谷，扫平六国，一统天下！</p>
<br>
<button onclick="getGoldReward()">📈收取赋税（+80金镒）</button>
<button onclick="randomEvent()">🎲随机事件</button>
</div>
</div>

<div id="tabDraw" class="tabcontent">
<div class="panel">
<h2>🃏 抽卡台</h2>
<p>单抽消耗：100金镒｜十连抽消耗：900金镒</p>
<button onclick="drawOne()">单抽</button>
<button onclick="drawTen()">十连抽</button>
<div id="drawResult"></div>
</div>
</div>

<div id="tabCardBag" class="tabcontent">
<div class="panel">
<h2>📦 我的卡牌</h2>
<div id="cardBag"></div>
</div>
</div>

<div id="tabMap" class="tabcontent">
<div class="panel">
<h2>🗺️ 战国天下城池</h2>
<div id="cityList"></div>
</div>
</div>

<div id="tabBattle" class="tabcontent">
<div class="panel">
<h2>⚔️ 攻城作战</h2>
<p>选择目标城池，发起进攻！你的总战力越高胜率越高</p>
<select id="targetCity"></select>
<button onclick="startBattle()">发起进攻</button>
<div id="battleResult"></div>
</div>
</div>

<div class="log" id="gameLog"></div>

<script>
// ========= 游戏数据 =========
let gameData = {
    gold:500,
    power:0,
    cards:[],
    cities:[
        {name:"雍城",owned:true,def:0},
        {name:"咸阳",owned:false,def:120},
        {name:"大梁(魏)",owned:false,def:220},
        {name:"邯郸(赵)",owned:false,def:260},
        {name:"新郑(韩)",owned:false,def:180},
        {name:"郢都(楚)",owned:false,def:300},
        {name:"临淄(齐)",owned:false,def:240},
        {name:"蓟城(燕)",owned:false,def:200},
        {name:"义渠",owned:false,def:140},
        {name:"巴蜀",owned:false,def:160},
        {name:"上郡",owned:false,def:130},
        {name:"河东",owned:false,def:170},
    ]
};

//卡池
const cardPool = [
    {name:"普通步兵",rarity:"N",power:8,type:"兵种"},
    {name:"普通农夫",rarity:"N",power:5,type:"文臣"},
    {name:"斥候",rarity:"N",power:7,type:"武将"},
    {name:"弩兵",rarity:"R",power:20,type:"兵种"},
    {name:"地方小吏",rarity:"R",power:15,type:"文臣"},
    {name:"百夫长",rarity:"R",power:22,type:"武将"},
    {name:"战车部队",rarity:"SR",power:45,type:"兵种"},
    {name:"张仪",rarity:"SR",power:55,type:"文臣"},
    {name:"蒙恬",rarity:"SR",power:60,type:"武将"},
    {name:"王翦",rarity:"SSR",power:110,type:"武将"},
    {name:"白起",rarity:"SSR",power:130,type:"武将"},
    {name:"商鞅",rarity:"SSR",power:100,type:"文臣"},
    {name:"李斯",rarity:"SSR",power:95,type:"文臣"},
    {name:"铁鹰锐士",rarity:"SSR",power:120,type:"兵种"},
    {name:"始皇帝",rarity:"UR",power:220,type:"君主"},
];

//稀有度概率
function getRandomCard(){
    let r = Math.random();
    let pool;
    if(r<0.4) pool = cardPool.filter(c=>c.rarity==="N");
    else if(r<0.7) pool = cardPool.filter(c=>c.rarity==="R");
    else if(r<0.88) pool = cardPool.filter(c=>c.rarity==="SR");
    else if(r<0.985) pool = cardPool.filter(c=>c.rarity==="SSR");
    else pool = cardPool.filter(c=>c.rarity==="UR");
    return pool[Math.floor(Math.random()*pool.length)];
}

//更新UI
function refreshUI(){
    document.getElementById("gold").innerText = gameData.gold;
    document.getElementById("power").innerText = gameData.power;
    const ownedCount = gameData.cities.filter(c=>c.owned).length;
    document.getElementById("ownCity").innerText = ownedCount;
    document.getElementById("totalCity").innerText = gameData.cities.length;
    renderCardBag();
    renderCities();
    renderBattleSelect();
    checkWin();
}

//抽一张
function drawOne(){
    if(gameData.gold <100){addLog("❌金镒不足！");return;}
    gameData.gold -=100;
    const card = getRandomCard();
    gameData.cards.push(card);
    gameData.power += card.power;
    document.getElementById("drawResult").innerHTML = makeCardHtml(card);
    addLog(`🃏抽到【${card.name}】${card.rarity}，战力+${card.power}`);
    refreshUI();
}

//十连
function drawTen(){
    if(gameData.gold <900){addLog("❌金镒不足！");return;}
    gameData.gold -=900;
    let html = "";
    for(let i=0;i<10;i++){
        const card = getRandomCard();
        gameData.cards.push(card);
        gameData.power += card.power;
        html += makeCardHtml(card);
    }
    document.getElementById("drawResult").innerHTML = html;
    addLog("✨十连抽完成！");
    refreshUI();
}

function makeCardHtml(card){
    return `<div class="card ${card.rarity}">
    <h4>${card.name}</h4>
    <p>类型：${card.type}</p>
    <p>稀有度：${card.rarity}</p>
    <p>战力：+${card.power}</p>
    </div>`;
}

function renderCardBag(){
    let html = "";
    if(gameData.cards.length===0) html="<p>暂无卡牌，快去抽卡！</p>";
    gameData.cards.forEach(card=>{html += makeCardHtml(card);})
    document.getElementById("cardBag").innerHTML = html;
}

function renderCities(){
    let html = "";
    gameData.cities.forEach((city,idx)=>{
        html += `<div class="city ${city.owned?'owned':'enemy'}">
        <h4>${city.name}</h4>
        <p>防御值：${city.def}</p>
        <p>状态：${city.owned?"✅已占领":"❌敌方占据"}</p>
        </div>`
    })
    document.getElementById("cityList").innerHTML = html;
}

function renderBattleSelect(){
    let html = "";
    gameData.cities.forEach((city,i)=>{
        if(!city.owned) html += `<option value="${i}">${city.name} 防御${city.def}</option>`
    })
    document.getElementById("targetCity").innerHTML = html;
}

function startBattle(){
    const idx = document.getElementById("targetCity").value;
    const city = gameData.cities[idx];
    const myPower = gameData.power;
    const defend = city.def;
    const roll = Math.random()*100;
    let winRate = Math.max(5,Math.min(90, (myPower-defend)*0.35 + 50));
    let resHtml = "";
    if(roll < winRate){
        city.owned = true;
        const rewardGold = 120 + defend;
        gameData.gold += rewardGold;
        resHtml = `<h3>✅大胜！成功攻下【${city.name}】！获得${rewardGold}金镒</h3>`;
        addLog(`⚔️攻克城池【${city.name}】！`);
    }else{
        const lossPower = Math.floor(Math.random()*30)+10;
        gameData.power = Math.max(0,gameData.power-lossPower);
        resHtml = `<h3>❌攻城失败！军队受损，战力-${lossPower}</h3>`;
        addLog(`⚔️进攻【${city.name}】失败，军队损伤！`);
    }
    document.getElementById("battleResult").innerHTML = resHtml;
    refreshUI();
}

function getGoldReward(){
    gameData.gold +=80;
    addLog("💰收取城池赋税，+80金镒");
    refreshUI();
}

function addLog(text){
    const logDom = document.getElementById("gameLog");
    logDom.innerHTML += text + "\n";
    logDom.scrollTop = logDom.scrollHeight;
}

function randomEvent(){
    const events = [
        {text:"流民前来归附，国力增强！战力+25",func:()=>{gameData.power +=25;}},
        {text:"发现金矿！金镒+200",func:()=>{gameData.gold +=200;}},
        {text:"蝗灾来袭！金镒-120",func:()=>{gameData.gold = Math.max(0,gameData.gold-120);}},
        {text:"名士自荐！直接获得一张SR卡牌",func:()=>{
            const c = cardPool.find(x=>x.rarity==="SR");
            gameData.cards.push(c);
            gameData.power += c.power;
        }},
        {text:"列国互相猜忌，暂无战事，平安无事",func:()=>{}}
    ]
    const ev = events[Math.floor(Math.random()*events.length)];
    ev.func();
    addLog("🎲事件："+ev.text);
    refreshUI();
}

function checkWin(){
    const allOwn = gameData.cities.every(c=>c.owned);
    if(allOwn){
        setTimeout(()=>{alert("🎉🎉🎉恭喜！你扫平六国，一统天下，大秦帝国建立！🎉🎉🎉");},300)
    }
}

//标签切换
document.querySelectorAll(".tabbtn").forEach(btn=>{
    btn.onclick = ()=>{
        const tabId = btn.dataset.tab;
        document.querySelectorAll(".tabcontent").forEach(t=>t.classList.remove("active"));
        document.getElementById(tabId).classList.add("active");
    }
})

refreshUI();
</script>
</body>
</html>