我正在制作一款 RPG 游戏，灵感来自 freecodecamp，但有我自己的风格，我有一个购买武器部分，你可以选择你想购买的武器。它正常工作，直到我返回商店功能，突然间按钮功能没有改变，即使我已经添加了removeEventListener
Javascript
let health = 100
let coin = 1000;
let inv = [
{weapon : "Spiderweb", damage : 2}
]
const xpNum = document.querySelector("#xpNum");
const healthNum = document.querySelector("#healthNum");
const coinNum = document.querySelector("#goldNum");
const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");
const button4 = document.querySelector("#button4");
const textbox = document.querySelector("#textbox");
const textbox2 = document.querySelector("#textbox2");
xpNum.innerHTML = xp
healthNum.innerHTML = health
coinNum.innerHTML = coin
const weapons = [
{weapon : "Shield", damage : 5, price : 50},
{weapon : "Taser", damage : 10, price : 75},
{weapon : "Gun", damage : 15, price : 100},
{weapon : "Trident", damage : 20, price : 200},
];
const villains = [
{villain : "Sandman" , health : 40, place : "under"},
{villain : "Robber" , health : 20 , place : "city"},
{villain : "Kidnapper" , health : 30, place : "city"},
{villain : "Green Goblin" , health : 50, place : "city"},
{villain : "Mysterio" , health : 50, place : "under"},
{villain : "Lizard" , health : 50, place : "under"},
{villain : "Kingpin" , health : 100, place : "city"},
];
const places = [
{place : "store" ,
text : "Spiderman is inside the store. What should he do?",
btnText : ["Buy Weapons" , "Sell Weapons" , "Increase Health", "Leave Store"],
btnFunc : [buy,sell,increase,start],
text2 : "Im boutta cum"
}
];
function update(location) {
button1.innerHTML = location.btnText[0]
button2.innerHTML = location.btnText[1]
button3.innerHTML = location.btnText[2]
button4.innerHTML = location.btnText[3]
button1.onclick = location.btnFunc[0]
button2.onclick = location.btnFunc[1]
button3.onclick = location.btnFunc[2]
button4.onclick = location.btnFunc[3]
textbox.innerHTML = location.text
if(Object.hasOwn(location,"text2")){
textbox2.innerHTML = location.text2
} else {
textbox2.style.display = "none"
}
}
function store() {
update(places[0])
}
function buy() {
let weaponsText = ""
inv.forEach((item,index) => {
weaponsText += `${index + 1}. ${item.weapon}<br>`
})
textbox2.innerHTML = "1. Shield - 5 Damage - 50 Coins<br>2. Taser - 10 Damage - 75 Coins<br>3. Gun - 15 Damage - 100 Coins<br>4. Trident - 20 Damage - 200 Coins<br>"
textbox.innerHTML = `Spiderman currently has <br>${weaponsText} Which weapon should Spiderman buy?`
button1.innerHTML = "Shield"
button2.innerHTML = "Taser"
button3.innerHTML = "Gun"
button4.innerHTML = "Trident"
button1.removeEventListener("click",buyWeapon)
const buyWeapon = (cmd) => {
let weaponName = cmd.target.innerHTML
let weapon = weapons.find(item => item.weapon == weaponName)
if(weapon){
inv.push(weapon)
alert(`${weaponName} bought!`)
coin -= weapon.price
coinNum.innerHTML = coin
cmd.target.removeEventListener("click",buyWeapon)
store()
}
}
button1.addEventListener("click",buyWeapon)
}
function sell() {
}
function increase() {
}
function start() {
}
button1.addEventListener("click",()=>{
store()
})
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>RPG Game</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<div id="stats">
<span id="xpText" class="stat">XP : <strong id="xpNum">0</strong></span> |
<span id="healthText" class="stat">Health : <strong id="healthNum">0</strong></span> |
<span id="coinsText" class="stat">Coins : <strong id="goldNum">0</strong></span>
</div>
<div id="buttons">
<button id="button1" class="button">Go to store</button>
<button id="button2" class="button">Go to city</button>
<button id="button3" class="button">Go to underground</button>
<button id="button4" class="button">Exit</button>
</div>
<div id="textbox2">ddddddd</div>
<div id="textbox">
Spiderman is near a mom-and-pop shop in Queens. What should he do?
</div>
</div>
<script src="script.js" async defer></script>
</body>
</html>```
在此表达式
xpxpNum.innerHTML = xp