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");

＆＃13;

＆＃13;

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!";
  }
}

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;