CSS動畫不會觸發第二次

Question

我試圖做一個小遊戲。有點愚蠢，但我希望有這個隨機事件彈出並做一個小的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

Answer 1

語法錯誤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>