使用教學：
1.在電腦桌面上建立一個新檔案，命名為 game.html。
2.使用記事本（或 VS Code）打開該檔案。
3.將下方完整程式碼複製並貼上，儲存檔案。
4.用瀏覽器（Chrome 或 Edge）開啟該 game.html 即可開始測試。
如果碰到:用瀏覽器（Chrome 跟 Edge 先後試過）開啟該 game.html 。
只有文字碼，還沒有可互動模式。
遇到的問題是因為在 HTML 的顯示邏輯中，JavaScript 必須正確載入並執行。
如果瀏覽器只顯示「文字碼」，通常是因為程式碼被視為純文字而非 HTML 文件，
或是瀏覽器因為安全限制暫停了 JavaScript。
請確認以下步驟，這能確保瀏覽器正確渲染您的網頁遊戲：
1. 確保檔案格式為 .html
最常見的問題是檔案存成了 .html.txt。
請檢查檔案的屬性，確認它的完整名稱是 game.html，而不是 game.html.txt。
如果在 Windows 上，請開啟「檢視」標籤，勾選「副檔名」，確認沒有隱藏的 .txt。
2. 確保程式碼結構完整
如果瀏覽器打開後，頁面上看到的是一堆 <script> 或 <style> 的標籤文字，
代表瀏覽器沒有識別出這些是 HTML 標籤。
請確保您的檔案內容是完全從下方的完整程式碼塊複製，中間不要遺漏任何符號：
簡單的大富翁 屏東 開始
<!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>
沒有留言:
張貼留言