所以我想做的是根据某些条件使用进度条在视觉上降低生命值。
const bgURLs = {
"Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",
"Fire": "https://i.gifer.com/5NOX.gif",
"Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/",
};
let options = document.getElementById("Options")
let computerChoice = getComputerChoice()
let playerChoice = ''
let updatePlayerChoice = Options.addEventListener("click", function(e) {
playerChoice = e.target.id;
return playerChoice
})
function getComputerChoice() {
const keys = Object.keys(bgURLs);
const randomIndex = [Math.floor(Math.random() * keys.length)]
const compChoice = keys[randomIndex]
return compChoice
}
// image shows up after clicked function
Options.addEventListener("click", function(e) {
let tgt = e.target;
let player = document.getElementById("Player")
let computer = document.getElementById("Computer")
if (tgt.classList.contains("element")) {
player.style.backgroundImage = 'url(' + bgURLs[tgt.id] + ')';
computer.style.backgroundImage = 'url(' + bgURLs[computerChoice] + ')';
}
})
let playerHealth = document.getElementById("player-health").getAttribute("value")
let computerHealth = document.getElementById("computer-health").getAttribute("value");
function compareChoices() {
if (playerChoice === "Fire" & computerChoice === "Water") {
playerHealth -= 25
} else if (playerChoice === "Fire" & computerChoice === "Air") {
playerHealth -= 25
} else if (playerChoice === "Fire" & computerChoice === "Fire") {
playerHealth -= 25
}
}
我认为主要问题是我对最后一个函数的逻辑。我的代码所做的是使用事件监听器监听playerChoice，然后它给我返回值，我可以用它来将答案与计算机选择进行比较。这部分代码肯定有效。但我似乎无法根据这些条件之一来定位值属性来更新它。当我尝试 console.log playerHealth 或 computerHealth 查看是否发生任何情况时，它仍然保持在 100，这是我设置的最大值。我的代码不应该根据我的条件在视觉上降低进度条吗？
https://jsfiddle.net/Jbautista1056/bLs0tyef/
繁星点点滴滴
沧海一幻觉
相关分类