英文:
Hidden button not appearing under specified conditions
问题
我有一个小游戏，当所有心都丢失时，应该出现一个重置按钮。但我怎么也搞不明白为什么它没有显示出来。我已经重写了3次，想知道是否是因为我分配它的值的方式不对，但是都没有成功。只要我删除隐藏按钮的语句，按钮就会立即出现，但应该有验证语句来使其再次出现。
const resetButton = document.getElementById('reset');
function reset() {
location.reload();
}
resetButton.addEventListener('click', reset);
// 隐藏重置按钮直到没有心脏了
function hideReset() {
if (foodHeart1.src.match("images/emptyheart.png") && playHeart1.src.match("images/emptyheart.png")) {
resetButton.style.display = "visible";
} else {
resetButton.style.display = "none";
}
}
hideReset();
英文:
I have a small game and when all hearts are lost, a reset button should appear. I can't for the life of me figure out why it's not showing up. I rewrote it 3 times, wondering if it was how I was assigning its value but none of them worked. The button appears as soon as I remove the statements for hiding it but there should be validation statements working in place to make it appear again.
const resetButton = document.getElementById('reset');
function reset() {
location.reload();
}
resetButton.addEventListener('click', reset);
// Hide reset button until no hearts left
function hideReset() {
if (foodHeart1.src.match("images/emptyheart.png" && playHeart1.src.match("images/emptyheart.png"))) {
resetButton.style.display = "visible";
} else {
resetButton.style.display = "none";
}
}
hideReset();
I have tried moving it around, placing it in new areas but haven't had much luck. I'm not sure how else I can write this.
答案1
得分: -1
调用 hideReset() 函数的是什么？如果它没有在主要的更新循环中被调用，或者在碰撞中被调用，它就不会被执行。使用图像来查询玩家是否死亡是一个有趣的想法，但更高效的方法是使用一个变量。
//在顶部
const resetButton = getElementById('reset');
resetButton.setAttribute('display', 'none');
//在顶部
//在玩家类中
processDamage(hitVal){
this.HP -= hitVal;
if(this.HP <= 0){
resetButton.setAttribute('display', 'block');
//----其他死亡状态的代码---
}
}
我觉得可能需要添加一些额外的代码来完全回答问题...希望这有所帮助！
英文:
What calls the function hideReset()? if it isn't called in the primary update loop, or in the hit collision, nothing will get it there. Using the images to query whether or not the player is dead is an interesting idea, but it would be more performant to just use a variable.
//way up at the top
const resetButton = getElementById('reset');
resetButton.setAttribute('display', 'none');
//way up at the top
//in the player class
processDamage(hitVal){
this.HP -= hitVal;
if(this.HP <= 0){
resetButton.setAttribuute('display', 'block');
//----other death state code---
}
}
I feel like I might need to add some more code to answer completely... I hope this is helpful!
答案2
得分: -1
以下是已翻译的部分：
这里是一些代码，似乎可以获得您所需的功能：
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hearts</title>
</head>
<body>
<img id="foodHeart1" src="images/heartImage.png" alt="emptyHeart" height="50px">
<img id="playHeart1" src="images/heartImage.png" alt="emptyHeart" height="50px">
<button onclick="changeImage()">Change to empty Heart</button>
<button id="reset">Reset</button>
</body>
<script src="index.js" defer></script>
</html>
const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");
function reset() {
location.reload();
}
resetButton.addEventListener("click", reset);
// Hide reset button until no hearts left
function hideReset() {
const foodHeartMatch = foodHeart1.src.match("images/emptyheart.png");
const foodHeartEmpty = foodHeartMatch && foodHeartMatch.length === 1;
const playHeartMatch = playHeart1.src.match("images/emptyheart.png");
const playHeartEmpty = playHeartMatch && playHeartMatch.length === 1;
console.log(`${foodHeartEmpty} : ${playHeartEmpty}`);
if (foodHeartEmpty && playHeartEmpty) {
resetButton.style.display = "inline";
} else {
resetButton.style.display = "none";
}
}
hideReset();
// Change the images to empytyHear
function changeImage() {
foodHeart1.src = "images/emptyheart.png";
playHeart1.src = "images/emptyheart.png";
hideReset();
}
我认为没有 style.display = "visible"，但如果我错了，希望有人会纠正我。 (从 MDN 快速查看。我在这里将其设置为 "inline"，但您可以使用任何适当的值来显示按钮。
我还在 match 函数上使用了 length 运算符，因为它返回一个数组（供您的条件语句使用）。
正如詹姆斯在评论中提到的，hideReset() 函数可能会在您更新心脏值的地方被调用。在这种情况下，我将其放在了更改图像的函数中。
有很多方法可以改进这个代码，但我希望它能帮助您解决初始问题。
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/display
<details>
<summary>英文:</summary>
Here is some code that appears to get your required functionality:
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hearts</title>
</head>
<body>
<img id="foodHeart1" src="images/heartImage.png" alt="emptyHeart" height="50px">
<img id="playHeart1" src="images/heartImage.png" alt="emptyHeart" height="50px">
<button onclick="changeImage()">Change to empty Heart</button>
<button id="reset">Reset</button>
</body>
<script src="index.js" defer></script>
</html>
const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");
function reset() {
location.reload();
}
resetButton.addEventListener("click", reset);
// Hide reset button until no hearts left
function hideReset() {
const foodHeartMatch = foodHeart1.src.match("images/emptyheart.png");
const foodHeartEmpty = foodHeartMatch && foodHeartMatch.length === 1;
const playHeartMatch = playHeart1.src.match("images/emptyheart.png");
const playHeartEmpty = playHeartMatch && playHeartMatch.length === 1;
console.log(`${foodHeartEmpty} : ${playHeartEmpty}`);
if (foodHeartEmpty && playHeartEmpty) {
resetButton.style.display = "inline";
} else {
resetButton.style.display = "none";
}
}
hideReset();
// Change the images to empytyHear
function changeImage() {
foodHeart1.src = "images/emptyheart.png";
playHeart1.src = "images/emptyheart.png";
hideReset();
}
I don't believe there is a style.display = "visible", but I hope someone will correct me if that is wrong. (From a quick look at MDN. I have set it to inline here but you can use any appropriate value to display the button.
I also used the length operator on the match function as it returns an array (for your conditional statemnt).
As James mentioned in the comment the hideReset() function is likely going to be called where you update your heart values. In this case I have put it in the function that changes the images.
There will be many ways to improve this but I hope it gets you over the initial bump you're facing
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论