gpt4 book ai didi

javascript - CSS 动画不会触发第二次

转载 作者:太空宇宙 更新时间:2023-11-04 08:10:34 24 4
gpt4 key购买 nike

我正在尝试制作一个小游戏。有点愚蠢,但我希望弹出这个随机事件并做一点 CSS 关键帧动画。最终目标是让它在随机事件触发时弹出,然后在动画结束时消失。运行代码时,我第一次可以让它工作,但第二次动画没有触发,只显示文本。有什么想法吗?

var myFood = document.getElementById("myFood");
var myWood = document.getElementById("myWood");
var myGold = document.getElementById("myGold");
var myButton = document.getElementById("myButton");
var output = document.getElementById("output");
var randomFoodEvent = document.getElementById("event");

var foodCount = 0;
var woodCount = 0;
var goldCount = 0;

myButton.addEventListener("click", buttonClick, false);

window.addEventListener("keydown", keydownHandler, false);

function keydownHandler(event) {
console.log("keyCode = " + event.keyCode);
if (event.keyCode === 13) {
buttonClick();
} else if (event.keyCode === 70) {
foodCount++;
myFood.innerHTML = "<strong>F</strong>ood: " + foodCount;
var randomFoodNum = Math.floor(Math.random() * 100) + 1;
if (randomFoodNum === 50) {
randomFoodEvent.className = "playEvent";
randomFoodEvent.innerHTML = "Some villagers stole your food!";
foodCount = foodCount - 25;
}
} else if (event.keyCode === 87) {
woodCount++;
myWood.innerHTML = "<strong>W</strong>ood: " + woodCount;
} else if (event.keyCode === 71) {
goldCount++;
myGold.innerHTML = "<strong>G</strong>old: " + goldCount;
}
}

randomFoodEvent.addEventListener("animationend", function() {
randomFoodEvent.classList.remove = "playEvent";
randomFoodEvent.innerHTML = "";
});

function buttonClick() {
console.log("Button Clicked!");
if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) {
output.textContent = "You win!";
}
}
/* The animation code */

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}


/* The element to apply the animation to */

.playEvent {
animation-name: example;
animation-duration: 4s;
}
<h1>Buttons and Keyboard Events</h1>
<p id="output">
Get 100 Food, 100 Wood, and 100 Gold to Win the Game!
</p>
<p id="myFood"><strong>F</strong>ood: 0</p>
<p id="myWood"><strong>W</strong>ood: 0</p>
<p id="myGold"><strong>G</strong>old: 0</p>

<p id="event">

</p>

<button id="myButton">Click Me to Win</button>

抱歉,代码太多,我想不出更好的方法来展示我正在尝试做的事情而不展示整个事情。

谢谢!

编辑:这是一个JSFiddle

最佳答案

语法错误randomFoodEvent.classList.remove("playEvent");

var myFood = document.getElementById("myFood");
var myWood = document.getElementById("myWood");
var myGold = document.getElementById("myGold");
var myButton = document.getElementById("myButton");
var output = document.getElementById("output");
var randomFoodEvent = document.getElementById("event");

var foodCount = 0;
var woodCount = 0;
var goldCount = 0;

myButton.addEventListener("click", buttonClick, false);

window.addEventListener("keydown", keydownHandler, false);

function keydownHandler(event) {
console.log("keyCode = " + event.keyCode);
if (event.keyCode === 13) {
buttonClick();
} else if (event.keyCode === 70) {
foodCount++;
myFood.innerHTML = "<strong>F</strong>ood: " + foodCount;
var randomFoodNum = Math.floor(Math.random() * 100) + 1;
if (randomFoodNum === 50) {
randomFoodEvent.className = "playEvent";
randomFoodEvent.innerHTML = "Some villagers stole your food!";
foodCount = foodCount - 25;
}
} else if (event.keyCode === 87) {
woodCount++;
myWood.innerHTML = "<strong>W</strong>ood: " + woodCount;
} else if (event.keyCode === 71) {
goldCount++;
myGold.innerHTML = "<strong>G</strong>old: " + goldCount;
}
}

randomFoodEvent.addEventListener("animationend", function() {
randomFoodEvent.classList.remove("playEvent");
randomFoodEvent.innerHTML = "";
});

function buttonClick() {
console.log("Button Clicked!");
if ((foodCount >= 100) && (woodCount >= 100) && (goldCount >= 100)) {
output.textContent = "You win!";
}
}
/* The animation code */

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}


/* The element to apply the animation to */

.playEvent {
animation: example 4s 1;
}
<!doctype.html>
<html>

<head>
<title>
Keyboards and Buttons
</title>
</head>

<body>
<h1>Buttons and Keyboard Events</h1>
<p id="output">
Get 100 Food, 100 Wood, and 100 Gold to Win the Game!
</p>
<p id="myFood"><strong>F</strong>ood: 0</p>
<p id="myWood"><strong>W</strong>ood: 0</p>
<p id="myGold"><strong>G</strong>old: 0</p>

<p id="event">

</p>

<button id="myButton">Click Me to Win</button>
</body>

</html>

关于javascript - CSS 动画不会触发第二次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46325317/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com