烏龜自走棋
by AtomicOtter64209 lines6.6 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:system-ui,sans-serif}
body{background:#0f2030;color:#fff;padding:8px;height:100vh;overflow:hidden}
.game{width:100%;height:100%;display:flex;flex-direction:column;gap:10px}
.info-bar{display:flex;justify-content:space-between;padding:8px;background:#1a3045;border-radius:10px}
.board{flex:1;background:#1a3045;border-radius:12px;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bench{height:110px;background:#243b55;border-radius:12px;padding:10px;display:flex;gap:8px;overflow-x:auto}
.shop{height:140px;background:#2a4365;border-radius:12px;padding:10px;display:flex;gap:8px;overflow-x:auto}
.cell{aspect-ratio:1/1;background:rgba(0,0,0,0.3);border-radius:8px;display:grid;place-items:center}
.turtle{width:90%;height:90%;border-radius:8px;text-align:center;padding:4px;font-size:12px;background:#2a5533;border:2px solid #77ccff}
.turtle.attack{border-color:#ff5555}
.turtle.defense{border-color:#55dd55}
.turtle.special{border-color:#aa55ff}
.turtle.star2{box-shadow:0 0 8px yellow}
.turtle.star3{box-shadow:0 0 12px gold}
.shop-card{width:80px;height:100px;background:#334e70;border-radius:8px;padding:6px;text-align:center;flex-shrink:0}
.btn{padding:10px 14px;border-radius:8px;border:none;background:#3182ce;color:white;font-weight:bold}
.btn:disabled{background:#444}
</style>
</head>
<body>
<div class="game">
<div class="info-bar">
<div>血量: <span id="hp">100</span></div>
<div>金幣: <span id="gold">10</span></div>
<div>回合: <span id="round">1</span></div>
<button id="refresh" class="btn">刷新商店(2金)</button>
<button id="startFight" class="btn">開戰</button>
</div>
<div class="board" id="battleBoard"></div>
<div class="bench" id="benchArea"></div>
<div class="shop" id="shopArea"></div>
</div>
<script>
// 全部烏龜棋子數據
const turtleList = [
{name:"鱷龜",attr:"攻擊屬",hp:4,atk:2,cost:2,skill:"強咬"},
{name:"巴西龜",attr:"特殊屬",hp:3,atk:1,cost:1,skill:"游動"},
{name:"瑪塔龜",attr:"特殊屬",hp:3,atk:1,cost:2,skill:"伏擊"},
{name:"中華花龜",attr:"防禦屬",hp:4,atk:1,cost:2,skill:"肉食性"},
{name:"草龜",attr:"特殊屬",hp:3,atk:1,cost:1,skill:"沉穩"},
{name:"棱皮龜",attr:"特殊屬",hp:5,atk:1,cost:3,skill:"深潛"},
{name:"蛋龜",attr:"攻擊屬",hp:3,atk:2,cost:2,skill:"猛撞"},
{name:"印度星龜",attr:"防禦屬",hp:4,atk:1,cost:2,skill:"星紋庇護"},
{name:"綠海龜",attr:"防禦屬",hp:3,atk:2,cost:2,skill:"棲身"},
{name:"蘇卡達陸龜",attr:"攻擊屬",hp:5,atk:2,cost:3,skill:"強咬"},
{name:"斑鱉",attr:"攻擊屬",hp:3,atk:3,cost:3,skill:"強烈撕咬"},
{name:"地紋駭龜",attr:"特殊屬",hp:5,atk:3,cost:3,skill:"重鎧衝撞"},
{name:"地圖龜",attr:"特殊屬",hp:4,atk:1,cost:2,skill:"被動防禦"},
{name:"黃緣閉殼龜",attr:"防禦屬",hp:3,atk:3,cost:3,skill:"重鎧衝撞"},
{name:"四眼斑水龜",attr:"攻擊屬",hp:3,atk:2,cost:2,skill:"發情"}
];
let gameData = {
hp:100,
gold:10,
round:1,
bench:[],
battleBoard:[],
shop:[]
};
// 生成5x5戰場格子
function initBoard(){
const board = document.getElementById("battleBoard");
board.innerHTML = "";
for(let i=0;i<25;i++){
const cell = document.createElement("div");
cell.className = "cell";
cell.dataset.index = i;
cell.onclick = ()=>placeTurtle(i);
board.appendChild(cell);
}
gameData.battleBoard = Array(25).fill(null);
}
// 刷新商店
function refreshShop(){
if(gameData.gold < 2)return;
gameData.gold -= 2;
updateUi();
gameData.shop = [];
for(let i=0;i<5;i++){
const r = turtleList[Math.floor(Math.random()*turtleList.length)];
gameData.shop.push({...r,star:1});
}
renderShop();
}
// 渲染商店
function renderShop(){
const box = document.getElementById("shopArea");
box.innerHTML = "";
gameData.shop.forEach((t,idx)=>{
const card = document.createElement("div");
card.className = "shop-card";
card.innerHTML = `<div>${t.name}</div><div>費用${t.cost}</div><div>⭐${t.star}</div>`;
card.onclick = ()=>buyTurtle(idx);
box.appendChild(card);
})
}
// 購買烏龜放入備戰區
function buyTurtle(idx){
const t = gameData.shop[idx];
if(gameData.gold < t.cost)return;
if(gameData.bench.length >= 8)return;
gameData.gold -= t.cost;
gameData.bench.push(t);
gameData.shop.splice(idx,1);
updateUi();
renderBench();
renderShop();
}
// 渲染備戰區
function renderBench(){
const bench = document.getElementById("benchArea");
bench.innerHTML = "";
gameData.bench.forEach((t,idx)=>{
const dom = document.createElement("div");
dom.className = "turtle";
if(t.attr=="攻擊屬")dom.classList.add("attack");
if(t.attr=="防禦屬")dom.classList.add("defense");
if(t.attr=="特殊屬")dom.classList.add("special");
dom.innerText = t.name+"⭐"+t.star;
dom.onclick = ()=>pickBench(idx);
bench.appendChild(dom);
})
}
let selectedBench = null;
function pickBench(idx){
selectedBench = idx;
}
// 放置棋子到戰場
function placeTurtle(cellIdx){
if(selectedBench===null)return;
if(gameData.battleBoard[cellIdx])return;
const turtle = gameData.bench[selectedBench];
gameData.battleBoard[cellIdx] = turtle;
gameData.bench.splice(selectedBench,1);
selectedBench = null;
updateUi();
renderBoard();
renderBench();
}
// 渲染戰場
function renderBoard(){
const board = document.getElementById("battleBoard");
board.innerHTML = "";
for(let i=0;i<25;i++){
const cell = document.createElement("div");
cell.className = "cell";
cell.dataset.index = i;
cell.onclick = ()=>placeTurtle(i);
const turtle = gameData.battleBoard[i];
if(turtle){
const dom = document.createElement("div");
dom.className = "turtle";
if(turtle.attr=="攻擊屬")dom.classList.add("attack");
if(turtle.attr=="防禦屬")dom.classList.add("defense");
if(turtle.attr=="特殊屬")dom.classList.add("special");
if(turtle.star>=2)dom.classList.add("star2");
if(turtle.star>=3)dom.classList.add("star3");
dom.innerText = turtle.name+"⭐"+turtle.star;
cell.appendChild(dom);
}
board.appendChild(cell);
}
}
// 更新金幣血量回合顯示
function updateUi(){
document.getElementById("hp").innerText = gameData.hp;
document.getElementById("gold").innerText = gameData.gold;
document.getElementById("round").innerText = gameData.round;
}
// 戰鬥自動對戰
function startFight(){
gameData.round++;
gameData.gold += 5;
updateUi();
alert("對戰開始，電腦AI出陣，戰鬥結束後發放獎勵");
}
// 綁定按鈕
document.getElementById("refresh").onclick = refreshShop;
document.getElementById("startFight").onclick = startFight;
// 初始化
initBoard();
refreshShop();
updateUi();
</script>
</body>
</html>
Game Source: 烏龜自走棋
Creator: AtomicOtter64
Libraries: none
Complexity: complex (209 lines, 6.6 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-mr97qch4" to link back to the original. Then publish at arcadelab.ai/publish.