<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>健康環島大作戰 - 實戰版</title>
<style>
body { font-family: sans-serif; text-align: center; background: #e0f7fa; }
#game-board { margin: 20px auto; padding: 15px; border: 2px solid #333; width: 90%; background: white; display: flex; flex-wrap: wrap; justify-content: center; }
.node { padding: 8px; margin: 3px; border: 1px solid #ccc; background: #fff9c4; font-size: 14px; border-radius: 5px; }
.active { border: 3px solid #ff5722; font-weight: bold; background: #ffcc80; }
#stats { margin: 10px; font-weight: bold; color: #333; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
</style>
</head>
<body>
<h1>健康環島大作戰</h1>
<div id="stats">玩家生命值：<span id="hp">100</span></div>
<div id="game-board"></div>
<br>
<button onclick="playTurn()">擲骰子並行動</button>
<div id="log" style="margin-top:20px;">歡迎來到環島賽！</div>
<script>
const path = ["高雄", "九如","屏東", "萬丹", "鳳林", "瑞穗", "玉里", "池上", "成功", "大武", "宜蘭", "基隆","台北", "板橋", "新莊", "林口", "桃園", "中壢", "龍潭", "苗栗","通霄", "苑裡", "后里", "豐原","台中", "彰化", "員林", "北斗", "西螺","雲林","北港", "嘉義", "民雄","水上", "永康","台南", "前鎮","鳳山","小港"];
let playerPos = 0;
let hp = 200;
function renderBoard() {
const board = document.getElementById('game-board');
board.innerHTML = path.map((name, i) => `<span class="node ${i === playerPos ? 'active' : ''}">${name}</span>`).join('');
document.getElementById('hp').innerText = hp;
}
function playTurn() {
// 1. 移動
const dice = Math.floor(Math.random() * 6) + 1;
playerPos = (playerPos + dice) % path.length;
renderBoard();
// 2. 觸發攻擊與辯論機制
let logText = `你擲出 ${dice} 點，抵達 ${path[playerPos]}。`;
let attack = confirm("對手想對你發動『不良飲食習慣』攻擊！是否要進入辯論以減少傷害？");
if (attack) {
let reason = prompt("請說明你不接受該誘惑的理由 (限時辯論)：");
let vote = prompt("現在請其他玩家投票：選項請輸入 1(很有道理), 2(有一些道理), 3(聽聽就好), 4(站不住腳), 5(太瞎了)");
// 計算傷害
const damages = [0.8, 0.9, 1.0, 1.1, 1.2]; // -20% 到 +20%
let multiplier = damages[parseInt(vote)-1] || 1.0;
let finalDamage = Math.round(20 * multiplier);
hp -= finalDamage;
logText += ` 辯論結束，經投票判定，生命值扣除 ${finalDamage}！`;
} else {
hp -= 20;
logText += " 你選擇不辯論，直接扣除 20 生命值！";
}
document.getElementById('log').innerText = logText;
if(hp <= 0) alert("遊戲結束！你的生命值歸零了！");
renderBoard();
}
renderBoard();
</script>
</body>
</html>
沒有留言:
張貼留言