gemini-code-1778608201832.html
user_7092603
html
a month ago
16 kB
5
Indexable
<!DOCTYPE html>
<html lang="zh-TW">
<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>
:root {
--p1: #ff4757; --p2: #2e86de; --bg: #0f172a;
--active-p: var(--p1); --gold: #f1c40f;
--hakka: #2ecc71; --yunnan: #e67e22; --village: #00cec9;
--win: #2ed573; --lose: #ff4757;
}
body.p1-turn { --active-p: var(--p1); }
body.p2-turn { --active-p: var(--p2); }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; }
body { background: var(--bg); color: white; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
/* 分頁切換 */
.tabs { display: flex; background: #1e293b; padding: 10px 10px 0; gap: 8px; }
.tab { flex: 1; padding: 12px 0; text-align: center; font-size: 14px; border-radius: 12px 12px 0 0; cursor: pointer; color: #64748b; background: #0f172a; transition: 0.3s; }
.tab.active { background: var(--active-p); color: white; font-weight: bold; }
/* 玩家狀態欄 */
.header { display: flex; padding: 12px; gap: 12px; background: #1e293b; }
.p-card { flex: 1; padding: 10px; border-radius: 15px; background: rgba(15, 23, 42, 0.8); border: 2px solid transparent; opacity: 0.4; transition: 0.5s; }
.p-card.active { opacity: 1; border-color: var(--active-p); box-shadow: 0 0 10px var(--active-p); }
.p-money { color: var(--gold); font-weight: 900; font-size: 18px; display: block; }
.bar-bg { height: 6px; background: #334155; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.fill { height: 100%; width: 0%; transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
/* 遊戲地圖 */
.board-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; }
.board {
display: grid; width: 100%; max-width: 360px; aspect-ratio: 1/1; gap: 6px;
grid-template-areas: "s0 s1 s2 s3" "s11 mid mid s4" "s10 mid mid s5" "s9 s8 s7 s6";
grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
}
.cell { background: #fff; color: #1e293b; border-radius: 10px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; text-align: center; }
.tag { position: absolute; top: 0; width: 100%; padding: 2px 0; color: white; font-size: 8px; border-radius: 10px 10px 0 0; }
.tag.客家 { background: var(--hakka); } .tag.滇緬 { background: var(--yunnan); } .tag.眷村 { background: var(--village); } .tag.特殊 { background: #64748b; }
/* 中央 3D 骰子區 */
.mid-info {
grid-area: mid; border-radius: 25px; background: rgba(30, 41, 59, 0.8);
border: 3px solid var(--active-p); display: flex; flex-direction: column;
align-items: center; justify-content: center; perspective: 600px; padding: 10px;
}
.scene { width: 55px; height: 55px; margin-bottom: 5px; }
.dice { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.3, 1.1); }
.dice-face { position: absolute; width: 55px; height: 55px; background: white; border: 1px solid #ddd; border-radius: 8px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 4px; box-shadow: inset 0 0 8px rgba(0,0,0,0.1); }
.dot { background: #1e293b; border-radius: 50%; width: 9px; height: 9px; margin: auto; }
.dot.red { background: #ff4757; }
.face-1 { transform: rotateY(0deg) translateZ(27.5px); }
.face-2 { transform: rotateY(90deg) translateZ(27.5px); }
.face-3 { transform: rotateX(90deg) translateZ(27.5px); }
.face-4 { transform: rotateX(-90deg) translateZ(27.5px); }
.face-5 { transform: rotateY(-90deg) translateZ(27.5px); }
.face-6 { transform: rotateY(180deg) translateZ(27.5px); }
.show-1 { transform: rotateX(0deg) rotateY(0deg); }
.show-2 { transform: rotateX(0deg) rotateY(-90deg); }
.show-3 { transform: rotateX(-90deg) rotateY(0deg); }
.show-4 { transform: rotateX(90deg) rotateY(0deg); }
.show-5 { transform: rotateX(0deg) rotateY(90deg); }
.show-6 { transform: rotateX(0deg) rotateY(180deg); }
#mid-food { font-size: 13px; color: #fff; font-weight: bold; text-align: center; min-height: 20px; }
#mid-status { font-size: 20px; font-weight: 900; margin-top: 2px; }
/* 精靈出現彈窗 (你畫的精靈卡片) */
#waifu-modal {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
z-index: 999; align-items: center; justify-content: center;
}
.waifu-card {
background: #fff; width: 290px; border-radius: 30px; padding: 20px; text-align: center;
box-shadow: 0 0 30px var(--gold); animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card-header { font-weight: 900; color: var(--gold); font-size: 18px; margin-bottom: 15px; }
.sprite-window {
width: 240px; height: 320px; margin: 0 auto;
background: #fdfdfd url('精靈去背圖.png') no-repeat; background-size: 720px 320px; border-radius: 20px;
}
.card-body { margin-top: 15px; background: #f8f9fa; padding: 12px; border-radius: 15px; text-align: left; }
.spirit-desc { border-top: 1px dashed #ccc; margin-top: 8px; padding-top: 8px; }
/* 操作區 */
.footer { padding: 15px; background: #1e293b; }
.btn { background: var(--active-p); color: white; border: none; padding: 18px; width: 100%; font-size: 22px; font-weight: bold; border-radius: 20px; box-shadow: 0 5px 0 rgba(0,0,0,0.3); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
/* 棋子樣式 */
.pawn { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid white; z-index: 20; transition: 0.3s; }
.p1-pawn { background: var(--p1); left: 3px; bottom: 3px; }
.p2-pawn { background: var(--p2); right: 3px; bottom: 3px; }
</style>
</head>
<body class="p1-turn">
<div class="tabs">
<div id="t-drink" class="tab active" onclick="changeWorld('drink')">飲料分頁</div>
<div id="t-sweet" class="tab" onclick="changeWorld('sweet')">甜點分頁</div>
<div id="t-salty" class="tab" onclick="changeWorld('salty')">鹹食分頁</div>
</div>
<div class="header">
<div id="u1" class="p-card active">玩家 A <span class="p-money" id="p1-m">$500</span><div class="bar-bg"><div id="p1-bar" class="fill" style="background:var(--gold)"></div></div></div>
<div id="u2" class="p-card">玩家 B <span class="p-money" id="p2-m">$500</span><div class="bar-bg"><div id="p2-bar" class="fill" style="background:var(--gold)"></div></div></div>
</div>
<div class="board-container">
<div id="board" class="board">
<div class="mid-info">
<div id="mid-food">準備出發</div>
<div class="scene">
<div id="dice" class="dice show-1">
<div class="dice-face face-1"><div style="grid-area:2/2" class="dot red"></div></div>
<div class="dice-face face-2"><div style="grid-area:1/3" class="dot"></div><div style="grid-area:3/1" class="dot"></div></div>
<div class="dice-face face-3"><div style="grid-area:1/3" class="dot"></div><div style="grid-area:2/2" class="dot"></div><div style="grid-area:3/1" class="dot"></div></div>
<div class="dice-face face-4"><div style="grid-area:1/1" class="dot"></div><div style="grid-area:1/3" class="dot"></div><div style="grid-area:3/1" class="dot"></div><div style="grid-area:3/3" class="dot"></div></div>
<div class="dice-face face-5"><div style="grid-area:1/1" class="dot"></div><div style="grid-area:1/3" class="dot"></div><div style="grid-area:2/2" class="dot"></div><div style="grid-area:3/1" class="dot"></div><div style="grid-area:3/3" class="dot"></div></div>
<div class="dice-face face-6"><div style="grid-area:1/1" class="dot"></div><div style="grid-area:2/1" class="dot"></div><div style="grid-area:3/1" class="dot"></div><div style="grid-area:1/3" class="dot"></div><div style="grid-area:2/3" class="dot"></div><div style="grid-area:3/3" class="dot"></div></div>
</div>
</div>
<div id="mid-status"></div>
</div>
</div>
</div>
<div class="footer"><button class="btn" onclick="play()">擲骰冒險</button></div>
<div id="waifu-modal">
<div class="waifu-card">
<div class="card-header">✨ 發現新夥伴 ✨</div>
<div id="sprite-div" class="sprite-window"></div>
<div class="card-body">
<h2 id="w-name" style="color: #2e86de; margin-bottom: 5px;"></h2>
<div class="spirit-desc">
<p id="w-origin-title" style="font-weight: bold; color: #444; font-size: 14px;"></p>
<p id="w-origin-text" style="color: #666; font-size: 13px; margin-top: 4px;"></p>
</div>
</div>
<button class="btn" style="height: 50px; margin-top: 15px; font-size: 18px;" onclick="closeWaifu()">收進口袋</button>
</div>
</div>
<script>
// 極簡日常機會事件
const chanceG = ["發票中獎！", "朋友請客！", "撿到 100 元！", "抽中紅包！"];
const chanceB = ["違停罰單...", "弄丟零錢...", "東西摔破...", "雨傘買貴..."];
const worlds = {
drink: [{n:"起點", e:"🚩", c:"特殊", p:0}, {n:"客家擂茶", e:"🍵", c:"客家", p:50}, {n:"木瓜牛奶", e:"🥛", c:"滇緬", p:60}, {n:"青草茶", e:"🌱", c:"眷村", p:40}, {n:"擂茶拿鐵", e:"☕", c:"客家", p:70}, {n:"羅望子汁", e:"🍹", c:"滇緬", p:55}, {n:"機會", e:"❓", c:"特殊", p:0}, {n:"酸梅湯", e:"🥤", c:"眷村", p:45}, {n:"東方美人", e:"🍂", c:"客家", p:80}, {n:"泰式奶茶", e:"🧋", c:"滇緬", p:65}, {n:"冬瓜茶", e:"🍢", c:"眷村", p:35}, {n:"普洱茶", e:"🍵", c:"滇緬", p:50}],
sweet: [{n:"起點", e:"🚩", c:"特殊", p:0}, {n:"牛汶水", e:"🍡", c:"客家", p:55}, {n:"破酥包", e:"🥯", c:"滇緬", p:45}, {n:"槓子頭", e:"🥨", c:"眷村", p:30}, {n:"客家麻糬", e:"🍡", c:"客家", p:40}, {n:"豌豆粉", e:"🍮", c:"滇緬", p:50}, {n:"機會", e:"❓", c:"特殊", p:0}, {n:"芝麻球", e:"⚽", c:"眷村", p:35}, {n:"草仔粿", e:"🍃", c:"客家", p:45}, {n:"椰奶凍", e:"🥥", c:"滇緬", p:60}, {n:"紅豆餅", e:"🥞", c:"眷村", p:25}, {n:"糖蔥", e:"🍬", c:"客家", p:30}],
salty: [{n:"起點", e:"🚩", c:"特殊", p:0}, {n:"客家粄條", e:"🍜", c:"客家", p:80}, {n:"過橋米線", e:"🥢", c:"滇緬", p:120}, {n:"牛肉麵", e:"🥩", c:"眷村", p:150}, {n:"薑絲大腸", e:"🥘", c:"客家", p:180}, {n:"大薄片", e:"🥓", c:"滇緬", p:110}, {n:"機會", e:"❓", c:"特殊", p:0}, {n:"眷村滷味", e:"🥩", c:"眷村", p:90}, {n:"客家小炒", e:"🥓", c:"客家", p:160}, {n:"汽鍋雞", e:"🍲", c:"滇緬", p:200}, {n:"水餃", e:"🥟", c:"眷村", p:70}, {n:"米干", e:"🍜", c:"滇緬", p:85}]
};
let curW = 'drink', turn = 1, moving = false;
let p1={pos:0, m:500, drink:0, sweet:0, salty:0}, p2={pos:0, m:500, drink:0, sweet:0, salty:0};
function changeWorld(w) { if(moving) return; curW = w; render(); updateUI(); }
function render() {
const b = document.getElementById('board'); const mid = b.querySelector('.mid-info');
b.innerHTML = ''; b.appendChild(mid);
worlds[curW].forEach((s,i)=>{
const d = document.createElement('div'); d.className='cell'; d.style.gridArea='s'+i; d.id='c'+i;
d.innerHTML=`<div class="tag ${s.c}">${s.c}</div><div style="font-size:18px">${s.e}</div>${s.n}`; b.appendChild(d);
});
updatePawns();
}
async function play() {
if(moving) return; moving = true;
const dice = document.getElementById('dice'); const statusEl = document.getElementById('mid-status');
statusEl.innerText = "";
let r = Math.floor(Math.random() * 6) + 1;
dice.className = 'dice'; setTimeout(() => dice.classList.add('show-' + r), 10);
await new Promise(res => setTimeout(res, 1200));
let p = (turn==1)?p1:p2;
for(let i=0; i<r; i++){
p.pos = (p.pos + 1) % 12; if(p.pos === 0) p.m += 50;
updatePawns(); document.getElementById('mid-food').innerText = worlds[curW][p.pos].n;
await new Promise(res=>setTimeout(res,150));
}
const f = worlds[curW][p.pos];
if(f.n === "機會") {
const ok = Math.random() > 0.5;
if(ok) { p.m+=100; statusEl.innerText="+100"; statusEl.style.color="var(--win)"; document.getElementById('mid-food').innerText=chanceG[Math.floor(Math.random()*4)]; }
else { p.m=Math.max(0, p.m-50); statusEl.innerText="-50"; statusEl.style.color="var(--lose)"; document.getElementById('mid-food').innerText=chanceB[Math.floor(Math.random()*4)]; }
} else if(f.p > 0 && p.m >= f.p) {
p.m -= f.p; p[curW]++; statusEl.innerText=`-$${f.p}`; statusEl.style.color="var(--lose)";
if(p[curW] >= 3) { showWaifu(f.c); return; }
}
updateUI(); finish();
}
function showWaifu(c) {
const data = {
"客家": { n: "粄粄", x: -240, t: "來源：客家傳統美食", d: "名字取自『粄條』，代表對米食與勤奮的精神。" },
"滇緬": { n: "阿孤", x: 0, t: "來源：龍岡文化", d: "源自雲南話稱呼，代表異域風情的辛香料靈魂。" },
"眷村": { n: "小村", x: -480, t: "來源：眷村生活", d: "名字象徵溫暖村落，匯聚了大江南北的熱情。" }
};
const s = data[c];
document.getElementById('w-name').innerText = s.n;
document.getElementById('w-origin-title').innerText = s.t;
document.getElementById('w-origin-text').innerText = s.d;
document.getElementById('sprite-div').style.backgroundPosition = `${s.x}px 0px`;
document.getElementById('waifu-modal').style.display = 'flex';
}
function closeWaifu() { document.getElementById('waifu-modal').style.display='none'; p1[curW]=0; p2[curW]=0; updateUI(); finish(); }
function finish() {
setTimeout(() => {
turn = (turn==1)?2:1;
document.body.className = (turn==1)?'p1-turn':'p2-turn';
document.querySelectorAll('.p-card').forEach((c,i)=>c.classList.toggle('active', i+1==turn));
moving = false;
}, 1000);
}
function updateUI() {
document.getElementById('p1-m').innerText = '$'+p1.m; document.getElementById('p2-m').innerText = '$'+p2.m;
document.getElementById('p1-bar').style.width = (p1[curW]/3)*100+'%'; document.getElementById('p2-bar').style.width = (p2[curW]/3)*100+'%';
}
function updatePawns() {
document.querySelectorAll('.pawn').forEach(p=>p.remove());
const d1=document.createElement('div'); d1.className='pawn p1-pawn';
const d2=document.createElement('div'); d2.className='pawn p2-pawn';
document.getElementById('c'+p1.pos).appendChild(d1); document.getElementById('c'+p2.pos).appendChild(d2);
}
render(); updateUI();
</script>
</body>
</html>Editor is loading...
Leave a Comment