Question

我正在尝试制作动画游戏。动画游戏必须每半秒钟显示一个图像与另一个图像。我打算在笑脸鱼的每次点击上count++，在每次笑脸鱼的点击上count--。但是，无论单击什么图像，我的代码都只会递增。另外，我的代码向我显示了两个不同的图像，而它必须只能是一个。

我必须在动画运行时计算一次点击（动画：图像应该每半秒钟交替一次。看起来鱼在微笑半秒钟，然后再哭半秒钟然后重复）。如果我单击开心的脸，我将score 1，如果单击悲伤的脸，我将输1。最后，如果我达到10，则必须显示您获胜，然后单击Start Animation重新设置。

[Output should be like this:][1]

var image = "happy";
var totalscore = 0;
var counter = 0;
var Schedule;

function happyFish() {
  totalscore++;
  var happyclickSpan = document.getElementById("score");
  happyclickSpan.innerHTML = totalscore;
  counter = counter + 1;
  if (counter == 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
  }

}

function sadFish() {
  totalscore--;
  var sadclickSpan = document.getElementById("score");
  sadclickSpan.innerHTML = totalscore;
  counter = counter - 1;
  if (counter == -10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
  }
}

function StartAnimation() {
  counter = 0;
  totalscore = 0;
  fish_img = document.getElementById("happy_fish");
  f_img = document.getElementById("happy_fish");
  fish_img.classList.add('on');
  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  if (image == "happy") {
    image = "sad";
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
  } else {
    image = "happy";
    fish_img.src =
      "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";
  }
}

<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="" id="happy_fish" onClick="happyFish()">
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png" alt="" id="sad_fish" onClick="sadFish()">
<br>
<h1 id="d">
  Your Score: <span id="score">0</span>
</h1>

Answer 1

我修改了您的StartAnimation和animationfunction方法，使鱼通过拨动消失，而不是尝试修改图像的来源。

我使用css类off做到了这一点，它将使display: none;的鱼消失了

var totalscore = 0;
var counter = 0;
var Schedule;

function happyFish() {
  totalscore++;
  var happyclickSpan = document.getElementById("score");
  happyclickSpan.innerHTML = totalscore;
  counter = counter + 1;
  if (counter == 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Win!";
  }

}

function sadFish() {
  totalscore--;
  var sadclickSpan = document.getElementById("score");
  sadclickSpan.innerHTML = totalscore;
  counter = counter - 1;
  if (counter == -10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + counter + " Game Over. You Lose!";
  }
}

function StartAnimation() {
  counter = 0;
  totalscore = 0;
  var initialWords = document.getElementById("d");
    initialWords.innerHTML = "Your Score: <span id=\"score\">0</span>";

  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  var fish_img = document.getElementById("happy_fish");
  var f_img = document.getElementById("sad_fish");

  fish_img.classList.toggle('off');
  f_img.classList.toggle('off');
}

.off {
  display: none;
}

<button onClick="StartAnimation()">Start Animation</button>
<br>
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="happy" id="happy_fish" onClick="happyFish()">
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png" alt="sad" id="sad_fish" class="off" onClick="sadFish()">
<br>
<h1 id="d">
  Your Score: <span id="score">0</span>
</h1>

Answer 2

通过具有一个img元素和一个单击处理程序，可以使事情变得简单得多。

在代码段中，我将两个单击处理程序合并为一个，并添加了对鱼状态的检查（现在由boolean isHappy表示）。

我将此处理程序附加到HTML中的单个img元素上，并在动画函数中根据isHappy状态在快乐鱼和悲伤鱼之间交替使用了src属性。

此外，由于计数器和总得分相同，因此我仅使用总得分变量。

var isHappy = true;
var totalscore;
var Schedule;

function clickFish() {
  if (isHappy) {
    totalscore++;
  } else {
    totalscore--;
  }
  var scoreSpan = document.getElementById("score");
  scoreSpan.innerHTML = totalscore;
  if (totalscore === 10) {
    clearInterval(Schedule);
    var finalwords = document.getElementById("d");
    finalwords.innerHTML = "Your Score:" + totalscore + " Game Over. You Win!";
  }
}

function StartAnimation() {
  isHappy = true
  totalscore = 0;
  clearInterval(Schedule);
  Schedule = setInterval(animationfunction, 500);
}

function animationfunction() {
  fish_img = document.getElementById("fish");
  isHappy = !isHappy;
  if (isHappy) {
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";
  } else {
    fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
  }
}

<button onclick="StartAnimation()">Start animation</button><br />
<img src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png" alt="" id="fish" onClick="clickFish()">
<br>
<h1 id="d">
  Your Score:
  <span id="score">0</span>
</h1>

如何减少动画的每次点击

2 个答案: