凌乱的代码和返回 false 的代码不起作用

Question

我正在制作这个功能，我以特定的价格购买特定的武器，如果硬币不够，那么它就不会被执行。 else 不起作用，我正在重复代码，那么有什么方法可以编写更有效的代码并修复 else 代码块？ buyW() 是我购买武器的函数

let xp = 0
let hp = 100
let coins = 200

const button1 = document.querySelector("#button1")
const button2 = document.querySelector("#button2")
const button3 = document.querySelector("#button3")
const button4 = document.querySelector("#button4")
const button5 = document.querySelector("#button5")

const textbox = document.querySelector("#textbox")
const textbox2 = document.querySelector("#textbox2")

const xpNum = document.querySelector("#xpNum")
const hpNum = document.querySelector("#healthNum")
const coinsNum = document.querySelector("#coinsNum")

//intiallize button functions
button1.onclick = goToStore

xpNum.innerHTML = xp
hpNum.innerHTML = hp
coinsNum.innerHTML = coins

const villains = [
    {name: "Sandman", hp:25},
    {name: "Vulture",hp:50},
    {name: "Lizard",hp:75},
    {name: "Mysterio",hp:80},
    {name: "Green Goblin",hp:120},
]

let inv = [
    {name: "Spiderweb" , damage: 2}
]

let currentWeapon = ""

inv.forEach((item,index)=>{
    currentWeapon+=`${index + 1}. ${item.name}<br>`
})

const weapons = [
    {name: "Shield", damage: 5 , price: 50},
    {name: "Gun" , damage: 10, price: 100},
    {name: "Trident", damage: 20, price: 200}
]

let weaponsList = ""

weapons.forEach((item,index)=>{
    weaponsList+=`${index + 1}. ${item.name} - ${item.price} coins<br>`
})


const scenes = [
    //start screen
    {scene:"start",
    text: "Spiderman is near a mom-and-pop shop in Queens. What should he do?",
    btnT: ["Go to store","Go to city","Go to underground","Exit"],
    btnF: [goToStore,goToCity,goToUnder,exit]
    },
    //entering store
    {scene:"store",
    text: "Spiderman is inside the store. What should he do?",
    btnT: ["Buy Weapon","Sell Weapon","Buy Health - 15 coins","Leave Store"],
    btnF: [buyW,sellW,buyH,leave]
    },
    //buy weapon
    {scene: "buy",
    text: `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`,
    btnT: ["Shield - 50 coins","Gun - 100 coins","Trident - 200 coins","Exit Buy"],
    btnF: [weapon("Shield"),weapon("Gun"),weapon("Trident"),exitBuy],
    text2 : weaponsList 
    }
]

function update(scene){
    button1.onclick = scene.btnF[0];
    button2.onclick = scene.btnF[1];
    button3.onclick = scene.btnF[2];
    button4.onclick = scene.btnF[3];
    
    button1.innerHTML = scene.btnT[0];
    button2.innerHTML = scene.btnT[1];
    button3.innerHTML = scene.btnT[2];
    button4.innerHTML = scene.btnT[3];

    textbox.innerHTML = scene.text

    if(Object.prototype.hasOwnProperty(scene,"text2")){
        textbox2.innerHTML = scene.text2
    } else {
        textbox2.style.display = "none"
    }
}

function goToStore(){
    update(scenes[1])
}

function goToCity(){
    update(scenes[0])
}

function goToUnder(){
    update(scenes[0])
}

function exit(){
    update(scenes[0])
}

function buyW(){
    update(scenes[2])
    textbox2.style.display = "block"
    textbox2.innerHTML = scenes[2].text2
    if(coins >= 50){
        function shield(){
            alert("Shield bought!")
            coins-=50
            coinsNum.innerHTML = coins
            inv.push(weapons[0])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button1.removeEventListener("click",shield)
        }
    } else {
        alert("Not enough coins!")
        return false
    }

    if(coins >= 100){
        function gun(){
            alert("Gun bought!")
            coins-=100
            coinsNum.innerHTML = coins
            inv.push(weapons[1])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button2.removeEventListener("click",gun)
        }
    } else {
        alert("Not enough coins!")
        return false
    }
    
    if(coins >= 200){
        function trident(){
            alert("Trident bought!")
            coins-=200
            coinsNum.innerHTML = coins
            inv.push(weapons[2])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button3.removeEventListener("click",trident)
        }
    } else {
        alert("Not enough coins!")
        return false
    }
    button1.addEventListener("click",shield)
    button2.addEventListener("click",gun)
    button3.addEventListener("click",trident)
}

function sellW(){
    
}

function buyH(){
    
}

function leave(){
    update(scenes[1])
}

function weapon(weapon){

}

function exitBuy(){

}

update(scenes[0])```

Answer 1

根据我的理解，您正在使用一个嵌套函数，如果用户单击某些按钮，该函数将被调用。函数 buyW() 的作用不像购买物品时移除硬币那样，但嵌套函数可以。

所以你应该将 else 放在嵌套函数中

function buyW(){
    update(scenes[2])
    textbox2.style.display = "block"
    textbox2.innerHTML = scenes[2].text2

    function shield(){
        if (coins >= 50){
            alert("Shield bought!")
            coins-=50
            coinsNum.innerHTML = coins
            inv.push(weapons[0])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button1.removeEventListener("click",shield)
        } else {
            alert("Not enough coins!")
            return false
        }        
    }
    
    function gun(){
        if(coins >= 100){
            alert("Gun bought!")
            coins-=100
            coinsNum.innerHTML = coins
            inv.push(weapons[1])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button2.removeEventListener("click",gun)
        } else {
            alert("Not enough coins!")
            return false
        }
    }
   
    
    
    function trident(){
        if(coins >= 200){
            alert("Trident bought!")
            coins-=200
            coinsNum.innerHTML = coins
            inv.push(weapons[2])
            currentWeapon = ""
            inv.forEach((item,index)=>{
                currentWeapon+=`${index + 1}. ${item.name}<br>`
            })
            textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`
            button3.removeEventListener("click",trident)
        } else {
            alert("Not enough coins!")
            return false
        }
    }
    
    button1.addEventListener("click",shield)
    button2.addEventListener("click",gun)
    button3.addEventListener("click",trident)
}

或者更好的是，您可以删除 else 部分并按以下格式更改它：

   function shield(){
        if (coins < 50){
            alert("Not enough coins!")
            return false
        }
        // but the shield code
    }