武器系統製作：從零開始

第一步：先創造一個武器（用HTML）

把武器想象成一個玩具模型，我們先把它做出來。

<!-- 這把槍叫"M4"，傷害35，射速10 -->
<div class="weapon" id="m4">
    <h3>M4 突擊步槍</h3>
    <p>傷害：<span class="damage">35</span></p >
    <p>射速：<span class="fire-rate">10</span></p >
    <p>彈藥：<span class="ammo">30</span>/30</p >
    <button onclick="shoot('m4')">開槍</button>
    <button onclick="reload('m4')">換彈</button>
</div>

單詞解釋：

· class="weapon" - 説這個div是個武器
· id="m4" - 給這把槍起個名字叫m4
· onclick - 當點擊時
· shoot('m4') - 開槍，目標是m4這把槍
· reload('m4') - 換彈，目標是m4這把槍

第二步：讓武器看起來像樣（用CSS）

給武器加上樣式，讓它看起來像個真正的武器面板。

.weapon {
    border: 2px solid black;      /* 加個黑色邊框 */
    padding: 15px;                /* 裏面加點空間 */
    margin: 10px;                 /* 外面留點距離 */
    background-color: #f0f0f0;    /* 背景變成淺灰色 */
    width: 200px;                 /* 寬度200像素 */
}

.weapon button {
    background-color: #4CAF50;    /* 按鈕變成綠色 */
    color: white;                 /* 字變成白色 */
    padding: 5px 10px;            /* 按鈕變飽滿 */
    margin: 5px;                  /* 按鈕之間留空隙 */
}

第三步：讓武器能真正工作（用JavaScript）

這是最關鍵的！讓武器有真實的屬性和行為。

// 1. 先創建一個武器庫（就像你的武器揹包）
let weapons = {
    "m4": {
        name: "M4 突擊步槍",
        damage: 35,           // 傷害值
        fireRate: 10,         // 射速（發/秒）
        maxAmmo: 30,          // 彈匣容量
        currentAmmo: 30,      // 當前彈藥
        reloadTime: 2         // 換彈時間（秒）
    },
    "ak47": {
        name: "AK-47",
        damage: 40,           // AK傷害更高
        fireRate: 8,          // 但射速慢一點
        maxAmmo: 30,
        currentAmmo: 30,
        reloadTime: 2.5
    }
};

// 2. 開槍功能
function shoot(weaponId) {
    let weapon = weapons[weaponId];
    
    // 檢查還有沒有子彈
    if (weapon.currentAmmo > 0) {
        weapon.currentAmmo--;  // 減少一發子彈
        updateDisplay(weaponId);  // 更新顯示
        console.log("砰！造成了 " + weapon.damage + " 點傷害");
    } else {
        console.log("咔噠！沒子彈了");
    }
}

// 3. 換彈功能
function reload(weaponId) {
    let weapon = weapons[weaponId];
    weapon.currentAmmo = weapon.maxAmmo;  // 把子彈補滿
    updateDisplay(weaponId);  // 更新顯示
    console.log("換彈完成！");
}

// 4. 更新顯示（讓網頁上的數字變化）
function updateDisplay(weaponId) {
    let weapon = weapons[weaponId];
    document.querySelector('#' + weaponId + ' .ammo').textContent = 
        weapon.currentAmmo + '/' + weapon.maxAmmo;
}

如何調整武器屬性？（就像調遊戲參數）

想修改武器？超級簡單！只需要改weapons裏面的數字：

// 把M4改成超級武器！
weapons["m4"].damage = 100;      // 傷害調到100
weapons["m4"].fireRate = 20;     // 射速調到20
weapons["m4"].maxAmmo = 100;     // 彈匣容量100發
weapons["m4"].reloadTime = 1;    // 換彈只要1秒

// 或者創建一個新武器
weapons["sniper"] = {
    name: "AWP 狙擊槍",
    damage: 100,        // 一槍斃命！
    fireRate: 1,        // 射速很慢
    maxAmmo: 10,
    currentAmmo: 10,
    reloadTime: 3
};

武器系統核心單詞表

基礎屬性單詞：

1. damage - 傷害值（數字越大越厲害）
2. fireRate - 射速（每秒打多少發）
3. ammo - 彈藥
4. maxAmmo - 最大彈藥量
5. currentAmmo - 當前彈藥量
6. reloadTime - 換彈時間

功能單詞：

1. shoot - 開槍
2. reload - 換彈
3. weapon - 武器
4. updateDisplay - 更新顯示

操作單詞：

1. weapons["m4"].damage = 50 - 把M4的傷害改成50
2. weapon.currentAmmo-- - 彈藥減少1發
3. weapon.currentAmmo = weapon.maxAmmo - 把彈藥補滿

完整的使用例子

想測試你的武器系統？把這段代碼加到你的JavaScript裏：

// 測試代碼
console.log("=== 武器測試開始 ===");
console.log("M4初始傷害：" + weapons["m4"].damage);

// 開一槍試試
shoot('m4');
console.log("開了一槍，剩餘彈藥：" + weapons["m4"].currentAmmo);

// 把M4改成超級武器
weapons["m4"].damage = 999;