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