所以我想做的是根据某些条件使用进度条在视觉上降低生命值。
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
}
}<body>
<h1>Rock, Paper, Scissors</h1>
<h2>Elements Edition</h2>
<h3>Choose Your Element</h3>
<div id="Options" >
<div id="PlayerBar">
<p>Player Health</p>
<progress id="player-health" value="100" max="100">
</progress>
</div>
<div id="Air" class="element" >
<p>Air</p>
</div>
<div id="Fire" class="element" >
<p>Fire</p>
</div>
<div id="Water" class="element" >
<p>Water</p>
</div>
<div id="ComputerBar">
<p>Computer Health</p>
<progress id="computer-health" value="100" max="100">
</progress>
</div>
</div>
<div id="Play-Area">
<div id="Player">
</div>
<div id="Computer">
</div>
</div>我认为主要问题是我对最后一个函数的逻辑。我的代码所做的是使用事件监听器监听playerChoice，然后它给我返回值，我可以用它来将答案与计算机选择进行比较。这部分代码肯定有效。但我似乎无法根据这些条件之一来定位值属性来更新它。当我尝试 console.log playerHealth 或 computerHealth 查看是否发生任何情况时，它仍然保持在 100，这是我设置的最大值。我的代码不应该根据我的条件在视觉上降低进度条吗？
最佳答案
您遇到了几个问题，从引用错误的变量(Options，而不是options)到在评估猜测后没有实际更新进度条值。
您还有很多不必要的代码。
由于我不确定您的游戏中哪些内容胜出，您必须调整该组 if/else if 条件，并为计算机失去/获得分数添加更多条件。但是，现在，如果您反复单击fire 或water，您会看到一些操作。您添加的条件和分数调整越简洁，进度条的响应速度就越快。
有关详细信息，请参阅下面的内联评论:
const bgURLs = {
"Air": "https://media1.giphy.com/media/RK7pdHVS4N7he/source.gif",
"Fire": "https://media2.giphy.com/media/AHeTfHgVFPHgs/source.gif",
"Water": "https://steamuserimages-a.akamaihd.net/ugc/947328402825377319/20625B881E545FF98AF1A48BAC52D4CBD207101B/"
};
// Don't set variables equal to DOM element properties directly
// because every time you want a different property, you have to
// query the DOM for the same element over and over. Just get a
// reference to the element and when you want a property, just
// get it from that element reference.
let player = document.getElementById("Player");
let computer = document.getElementById("Computer");
let playerProg = document.getElementById("player-health");
let computerProg = document.getElementById("computer-health");
let options = document.getElementById("Options");
// These need to be declared so they can be accessed throughout
// the game, but their values won't be known until an event happens
let playerChoice = null;
let computerChoice = null;
let playerHealth = 100;
let computerHealth = 100;
function getComputerChoice() {
let random = Math.floor(Math.random() * Object.keys(bgURLs).length);
computerChoice = Object.keys(bgURLs)[random];
return computerChoice;
}
// You had Options here, but your variable is options
options.addEventListener("click", function(e) {
if (e.target.classList.contains("element")) {
// Set the player choices
playerChoice = e.target.id;
player.style.backgroundImage = 'url(' + bgURLs[playerChoice] + ')';
computer.style.backgroundImage = 'url(' + bgURLs[getComputerChoice()] + ')';
// Test the results:
console.clear();
console.log(playerChoice, computerChoice);
// Now update the progress bars
compareChoices();
}
})
function compareChoices() {
// Use && for logical AND short-circuiting
// Ensure that scores don't go below 0 or above 100
// Not sure what beats what so you'll have to adjust as needed.
if (playerChoice === "Air" && computerChoice === "Fire") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
} else if (playerChoice === "Air" && computerChoice === "Water") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
} else if (playerChoice === "Fire" && computerChoice === "Air") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Fire" && computerChoice === "Water") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Water" && computerChoice === "Air") {
playerHealth = (playerHealth -= 25) < 0 ? 0 : playerHealth;
computerHealth = (computerHealth += 25) > 100 ? 100 : computerHealth;
} else if (playerChoice === "Water" && computerChoice === "Fire") {
playerHealth = (playerHealth += 25) > 100 ? 100 : playerHealth;
computerHealth = (computerHealth -= 25) < 0 ? 0 : computerHealth;
}
// You must update the progress bars from within the function
// that changes their values.
playerProg.value = playerHealth;
computerProg.value = computerHealth;
}#Player, #Computer {
width:100px;
height:50px;
background-size:contain;
background-repeat:no-repeat;
margin:5px 0;
}
.element { cursor:pointer; display:inline; font-weight:bold; }
#Play-Area { clear:both; }
#Play-Area div { display:inline-block; }
#PlayerBar, #ComputerBar {
margin:10px 10px; float:left;
}<p>Choose Your Element</p>
<div id="Options" >
<div id="Air" class="element">Air</div>
<div id="Fire" class="element">Fire</div>
<div id="Water" class="element">Water</div>
</div>
<div id="PlayerBar">
<div>Player Health</div>
<progress id="player-health" value="100" max="100"></progress>
</div>
<div id="ComputerBar">
<div>Computer Health</div>
<progress id="computer-health" value="100" max="100"></progress>
</div>
<div id="Play-Area">
<div id="Player"></div>
<div id="Computer"></div>
</div>关于javascript - 如何使用 JavaScript 更新进度条的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60960585/