超龜神卡牌對戰

by AtomicOtter64
262 lines12.5 KB
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>超龜神 卡牌對戰</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:Noto Sans TC, sans-serif;touch-action:manipulation}
body{background:#0a2a40;color:#fff;background-image:radial-gradient(#104060 1px,transparent 1px);background-size:20px 20px}
.game{width:100vw;height:100vh;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.room{background:rgba(0,0,0,0.4);border-radius:12px;padding:10px;flex:1;position:relative}
.field{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.bench{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.card{background:#224466;border:2px solid #77ccff;border-radius:10px;padding:8px;font-size:12px;min-height:70px;position:relative;cursor:pointer}
.card.selected{border-color:#ffdd33;box-shadow:0 0 10px #ffdd33}
.card.turtle{background:#1a5533}
.card.item{background:#664422}
.card.effect{background:#552266}
.card.dead{opacity:0.4;filter:grayscale(1)}
.energy-bar{display:flex;gap:6px;margin:6px 0}
.energy{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:bold}
.energy.attack{background:#ff4444}
.energy.defense{background:#44aa44}
.energy.special{background:#aa44ff}
.hand-area{height:110px;background:rgba(0,0,0,0.5);border-radius:12px;padding:8px;overflow-x:auto;display:flex;gap:8px}
.hand-card{width:70px;height:90px;flex-shrink:0}
.btn-area{display:flex;gap:8px;flex-wrap:wrap}
button{padding:10px 14px;border-radius:8px;border:none;background:#2277bb;color:white;font-size:14px;font-weight:bold}
button:disabled{background:#444}
.log{height:90px;background:rgba(0,0,0,0.6);border-radius:8px;padding:8px;overflow-y:auto;font-size:12px;line-height:1.4}
.turtle-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
.popup{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:grid;place-items:center;z-index:99}
.popup-box{width:90%;max-width:400px;background:#113355;border-radius:12px;padding:16px}
.hp-bar{width:100%;height:8px;background:#333;border-radius:4px;margin:4px 0}
.hp-fill{height:100%;background:#44dd44;border-radius:4px}
.skill-btn{width:100%;margin:4px 0;padding:6px;background:#336699}
</style>
</head>
<body>
<div class="game">
<div class="room">
<h3>敵方場地</h3>
<div>主戰場(最多4隻):</div>
<div class="field" id="enemyBattle"></div>
<div>備戰區:</div>
<div class="bench" id="enemyBench"></div>
<div class="energy-bar" id="enemyEnergy"></div>
</div>

<div class="room">
<h3>我方場地</h3>
<div>主戰場(最多4隻):</div>
<div class="field" id="myBattle"></div>
<div>備戰區:</div>
<div class="bench" id="myBench"></div>
<div class="energy-bar" id="myEnergy"></div>
</div>

<div class="log" id="battleLog"></div>
<div class="hand-area" id="myHand"></div>
<div class="btn-area">
<button id="endTurn">結束回合</button>
<button id="swapTurtle">輪換烏龜</button>
<button id="drawEnergy">抽取下一回合能量</button>
</div>
</div>
<div class="popup" id="skillPanel" style="display:none">
<div class="popup-box">
<div id="skillList"></div>
<button onclick="closeSkill()">關閉</button>
</div>
</div>

<script>
const TURTLE_LIST = [
{name:"鱷龜",attr:"攻擊屬",trait:"防禦性",hp:4,spd:6,passive:"無被動",
skills:[{name:"強咬",cost:[{t:"攻擊",n:2}],dmg:2,hit:70},{name:"縮殼",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"本回合受傷‑1，下回合禁用"}]},
{name:"巴西龜",attr:"特殊屬",trait:"攻擊性",hp:3,spd:8,passive:"群體癒合：場上≥3名隊友，回合結束全隊回1HP",
skills:[{name:"咬",cost:[{t:"攻擊",n:1}],dmg:1,hit:70},{name:"游動",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"自身被命中率‑10%"}]},
{name:"瑪塔龜",attr:"特殊屬",trait:"控制性",hp:3,spd:8,passive:"擬態：首次被攻擊，敵方命中率降一檔",
skills:[{name:"伏擊",cost:[{t:"攻擊",n:1},{t:"特殊",n:1}],dmg:1,hit:40,effect:"命中後敵方下回合無法使用手牌"}]},
{name:"中華花龜",attr:"防禦屬",trait:"防禦性",hp:4,spd:5,passive:"肉食性：自身擊殺回2HP；隊友擊殺自身回1HP",
skills:[{name:"咬",cost:[{t:"攻擊",n:1}],dmg:1,hit:70},{name:"游動",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"自身被命中率‑10%"}]},
{name:"草龜",attr:"特殊屬",trait:"攻擊性",hp:3,spd:7,passive:"沉穩：自身技能命中率升一檔",
skills:[{name:"咬",cost:[{t:"攻擊",n:1}],dmg:1,hit:80},{name:"游動",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"自身被命中率‑10%"}]},
{name:"棱皮龜",attr:"特殊屬",trait:"控制性",hp:5,spd:6,passive:"無被動",
skills:[{name:"吞吸",cost:[{t:"攻擊",n:1},{t:"特殊",n:1}],dmg:1,hit:50,effect:"命中封禁敵方1技能1回合"},{name:"深潛",cost:[{t:"防禦",n:2}],effect:"本回合免疫全部傷害；我方接下2回合無法打出手牌"}]},
{name:"蛋龜",attr:"攻擊屬",trait:"攻擊性",hp:3,spd:10,passive:"無被動",
skills:[{name:"猛撞",cost:[{t:"攻擊",n:1}],dmg:2,hit:60},{name:"游動",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"自身被命中率‑10%"}]},
{name:"印度星龜",attr:"防禦屬",trait:"防禦性",hp:4,spd:4,passive:"星紋庇護：全場僅1次，首次受傷敵方命中率降3檔,傷害‑1",
skills:[{name:"咬",cost:[{t:"攻擊",n:1}],dmg:1,hit:70},{name:"縮殼",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"本回合受傷‑1"}]},
{name:"綠海龜",attr:"防禦屬",trait:"攻擊性",hp:3,spd:9,passive:"棲身：每2名隊友，自身受傷‑1，最高減2",
skills:[{name:"強咬",cost:[{t:"攻擊",n:2}],dmg:2,hit:70},{name:"游動",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"自身被命中率‑10%"}]},
{name:"蘇卡達陸龜",attr:"攻擊屬",trait:"防禦性",hp:5,spd:3,passive:"無被動",
skills:[{name:"強咬",cost:[{t:"攻擊",n:2}],dmg:2,hit:70},{name:"縮壳",cost:[{t:"防禦",n:1},{t:"特殊",n:1}],effect:"本回合不可輪換、受傷‑1，下回合禁用"}]},
{name:"斑鱉",attr:"攻擊屬",trait:"控制性",hp:3,spd:7,passive:"弱肉強食：敵方血量≤自身，造成傷害+1",
skills:[{name:"波動",cost:[{t:"特殊",n:2}],dmg:0,hit:50,effect:"敵方單龜下回合無法放技能"},{name:"強烈撕咬",cost:[{t:"攻擊",n:3}],dmg:3,hit:70}]},
{name:"地紋駭龜",attr:"特殊屬",trait:"攻擊性",hp:5,spd:2,passive:"厚甲：受傷永久‑1（最低1），在場敵方所有加速無效化",
skills:[{name:"強咬",cost:[{t:"攻擊",n:2}],dmg:2,hit:70},{name:"重鎧衝撞",cost:[{t:"攻擊",n:1},{t:"特殊",n:1}],dmg:3,hit:50,effect:"使用後下1大回合自身速度‑2"}]},
{name:"地圖龜",attr:"特殊屬",trait:"防禦性",hp:4,spd:6,passive:"被動防禦",
skills:[{name:"被動防禦",cost:[{t:"攻擊",n:1},{t:"防禦",n:1}],hit:80,effect:"命中後下回合自身受擊反彈50%傷害給攻擊者"}]},
{name:"黃緣閉殼龜",attr:"防禦屬",trait:"攻擊性",hp:3,spd:7,passive:"無被動",
skills:[{name:"閉殼防禦",cost:[{t:"防禦",n:2}],effect:"下次受到傷害減免50%"},{name:"重鎧衝撞",cost:[{t:"攻擊",n:1},{t:"特殊",n:1}],dmg:3,hit:50,effect:"使用後下1大回合自身速度‑2"}]},
{name:"四眼斑水龜",attr:"攻擊屬",trait:"控場性",hp:3,spd:7,passive:"無被動",
skills:[{name:"發情",cost:[{t:"攻擊",n:1},{t:"特殊",n:1}],dmg:2,hit:30,effect:"3段連擊"},{name:"干擾",cost:[{t:"特殊",n:1}],effect:"命中後敵方速度‑1，追加一段攻擊"}]}
];
const ITEM_LIST = [
{name:"救命藥",desc:"我方主戰單龜回2HP（可超血量上限）"},
{name:"致命藥",desc:"敵方任意單龜扣2HP"},
{name:"速行丸",desc:"我方單龜本回合速度+3"},
{name:"麻痺粉",desc:"敵方主戰單龜下回合無法行動、速度歸零"},
{name:"再生盾",desc:"我方單龜本回合受傷‑2，回合結束回1HP"},
{name:"瀉藥",desc:"指定我方兩隻烏龜"}
];
const EFFECT_LIST = [
{name:"大地震動",desc:"全場主戰+備戰龜本回合無法行動"},
{name:"速度移轉",desc:"我方每隻龜30%機率本回合速度+5"},
{name:"冬眠期",desc:"30%機率冬眠2回合"},
{name:"瘟疫",desc:"我方1龜+敵方1龜各受3點傷害"},
{name:"出其不意",desc:"主戰備戰直接互換，新上場龜速度強制11"},
{name:"精準",desc:"本回合命中率變為100%"},
{name:"汲力",desc:"敵方單龜本回合傷害‑2"},
{name:"續癒",desc:"我方全體每回合結束回1HP，持續2回合"},
{name:"禁錮",desc:"敵方主戰單龜速度歸零，無法獲得速度加成"}
];

let gameState = {
turn:1,
myEnergy:[],enemyEnergy:[],
myBattle:[],myBench:[],enemyBattle:[],enemyBench:[],
myHand:[],swapCount:0,maxSwap:2,
playerIsFirst:true,log:[]
};

function randomEnergy(){
const arr = ["攻擊","防禦","特殊"];
return Array(3).fill(0).map(()=>arr[Math.floor(Math.random()*3)]);
}
function addLog(txt){
gameState.log.push(txt);
document.getElementById("battleLog").innerText = gameState.log.slice(-8).join("\n");
}
function drawStartHand(){
gameState.myHand = TURTLE_LIST.slice(0,5);
renderHand();
}
function renderEnergy(elemId,list){
const el = document.getElementById(elemId);
el.innerHTML = "";
list.forEach(t=>{
let cls = "energy attack";
if(t=="防禦")cls="energy defense";
if(t=="特殊")cls="energy special";
const div = document.createElement("div");
div.className = cls;
div.innerText = t[0];
el.appendChild(div);
});
}
function renderHand(){
const box = document.getElementById("myHand");
box.innerHTML = "";
gameState.myHand.forEach((card,i)=>{
const d = document.createElement("div");
d.className = "card hand-card";
d.onclick=()=>selectHandCard(i);
if(card.attr)d.innerHTML=`<div>${card.name}</div><div>HP${card.hp} SPD${card.spd}</div>`;
else d.innerText = card.name;
box.appendChild(d);
});
}
function selectHandCard(idx){
const turtle = gameState.myHand[idx];
if(!turtle.attr)return;
if(gameState.myBattle.length>=4){
addLog("主戰場滿4隻，無法上場");
return;
}
turtle.currentHp = turtle.hp;
gameState.myBattle.push(turtle);
gameState.myHand.splice(idx,1);
renderHand();
renderField();
addLog(`召喚 ${turtle.name} 上主戰場`);
}
function renderField(){
const myBat = document.getElementById("myBattle");
myBat.innerHTML="";
gameState.myBattle.forEach((t,i)=>{
const c = document.createElement("div");
c.className="card turtle";
c.innerHTML=`<div>${t.name}</div><div>${t.attr} ${t.trait}</div><div class="hp-bar"><div class="hp-fill" style="width:${t.currentHp/t.hp*100}%"></div></div><div>HP${t.currentHp}/${t.hp} SPD${t.spd}</div>`;
c.onclick=()=>openSkillPanel(i);
myBat.appendChild(c);
});
const myBen = document.getElementById("myBench");
myBen.innerHTML="";
gameState.myBench.forEach((t,i)=>{
const c = document.createElement("div");
c.className="card turtle";
c.innerHTML=`<div>${t.name}</div><div>${t.attr} ${t.trait}</div><div class="hp-bar"><div class="hp-fill" style="width:${t.currentHp/t.hp*100}%"></div></div><div>HP${t.currentHp}/${t.hp} SPD${t.spd}</div>`;
myBen.appendChild(c);
});
}
function openSkillPanel(idx){
const turtle = gameState.myBattle[idx];
const panel = document.getElementById("skillPanel");
const list = document.getElementById("skillList");
list.innerHTML="";
turtle.skills.forEach(sk=>{
const btn = document.createElement("button");
btn.className="skill-btn";
btn.innerText = sk.name+"｜消耗："+sk.cost.map(x=>x.t+x.n).join("+");
btn.onclick=()=>useSkill(idx,sk);
list.appendChild(btn);
});
panel.style.display="grid";
}
function closeSkill(){
document.getElementById("skillPanel").style.display="none";
}
function useSkill(tIdx,skill){
addLog("施放技能："+skill.name);
closeSkill();
}
document.getElementById("endTurn").onclick=()=>{
gameState.turn++;
gameState.swapCount=0;
gameState.myEnergy = randomEnergy();
renderEnergy("myEnergy",gameState.myEnergy);
addLog("結束回合，抽取下一回合能量");
};
document.getElementById("swapTurtle").onclick=()=>{
if(gameState.swapCount>=gameState.maxSwap){
addLog("本回合輪換次數已達上限");
return;
}
if(gameState.myBattle.length===0){addLog("主戰場沒有烏龜");return}
const t = gameState.myBattle.pop();
gameState.myBench.push(t);
gameState.swapCount++;
renderField();
addLog("完成輪換，消耗1顆能量");
};
document.getElementById("drawEnergy").onclick=()=>{
gameState.myEnergy = randomEnergy();
renderEnergy("myEnergy",gameState.myEnergy);
addLog("已抽取3顆下一回合能量");
};
// 初始化
window.onload=()=>{
gameState.myEnergy = randomEnergy();
gameState.enemyEnergy = randomEnergy();
renderEnergy("myEnergy",gameState.myEnergy);
renderEnergy("enemyEnergy",gameState.enemyEnergy);
drawStartHand();
addLog("遊戲開局完成，先手方為玩家");
};
</script>
</body>
</html>
Game Source: 超龜神卡牌對戰

Creator: AtomicOtter64
Libraries: none
Complexity: complex (262 lines, 12.5 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-atomicotter64" to link back to the original. Then publish at arcadelab.ai/publish.
超龜神 卡牌對戰

Game Source: 超龜神 卡牌對戰

Remix Instructions

超龜神卡牌對戰

Game Source: 超龜神卡牌對戰
