如何计算 Javascript 中图像的点击次数？答案

【问题标题】：How to count clicks on an image in Javascript?如何计算 Javascript 中图像的点击次数？
【发布时间】：2020-10-17 21:52:27
【问题描述】：

我需要创建一个网页，其中有一个“开始青蛙游戏”按钮。每当用户点击“开始青蛙游戏”按钮时： ● 按钮下方出现“您的分数为 0”的消息；

● 分数信息下，每半秒，5张图片中的一张会随机出现，图像高度应为 150 像素；

●当用户点击青蛙图片时，用户获得1分，分数消息应相应更新；

● 当用户点击其他图片时，用户损失1分，相应更新分数消息（如果用户损失太多，分数可能变为负数）；

● 当分数达到 5 时，用户赢得游戏并且游戏停止（图像停止变化），分数消息应显示“你的分数是 5。游戏结束 - 你赢了！”

● 当分数下降到-5，则用户输掉游戏并且游戏停止（图像停止变化），分数消息应显示“您的分数是-5。游戏结束——你输了！” 用户可以点击“开始青蛙游戏”按钮再次玩游戏，分数应该被重置为0。

我做了什么：

现在已经能够创建一个网页来计算任何图像被点击的次数，并让它在下面显示分数。

我需要什么帮助：

我似乎无法弄清楚如何仅在单击青蛙图像时使点数增加，然后仅在单击其他图像（不是青蛙）时使点数减少。当分数达到 5（你赢）或 -5（你输）时，我也无法让图像停止。

这是我的代码：

function rollImages(){
  var counter = 0;
  var interval = setInterval(function () {
    if (counter === 10000) {
      clearInterval(interval);
      return;
    }

    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";
    var theImage = document.getElementById("display");
    theImage.src = imageFile;
    counter++;
  }, 500);
}

var scoreClick = 0;
function score(){
  scoreClick = scoreClick + 1;
  var scoreSpan = document.getElementById("scoreDisplay");
  scoreSpan.innerHTML = scoreClick;
  if (scoreClick == 5){
    scoreDisplay.innerHTML = " Game over - you win!";
  }
}

function minusScore(){
  scoreClick = scoreClick - 1;
  var scoreSpan = document.getElementById("scoreDisplay");
  scoreSpan.innerHTML = scoreClick;
}

<button onClick="rollImages()">Start frog game</button>
<br /><br />
<img height='150px' id="display" onclick="score()">
<br /><br />
<p id="score">Your score is:
<span id="scoreDisplay">0</span></p>

【问题讨论】：

我们如何知道图像何时是青蛙图像？我可能遗漏了一些东西，但目前我无法看到如何区分图像，因为图像只是根据数字选择的。哪个是青蛙？
onClick 测试 img 的属性 'src' 是青蛙的属性。在您的 onclick 方法中接收“事件”参数。 event.target.src

标签： javascript html

【解决方案1】：

您需要一种方法来识别当前图像是否是青蛙。您可以通过在rollImages() 时向图像添加一个类，或者检查其来源，或给它一个 ID 来做到这一点：

function rollImages() {
  var counter = 0;
  var interval = setInterval(function () {
    if (counter === 10000) {
      clearInterval(interval);
      return;
    }

    var imageValue = Math.floor(Math.random() * 5) + 1;
    var imageFile = "img" + imageValue + ".png";

    var theImage = document.getElementById("display");
    theImage.src = imageFile;
  
    if (imageValue === 1) {   // <--- Whatever imageValues correspond to frogs
      theImage.classList.add("frog");
    } else {
      theImage.classList.remove("frog");
    }

    counter++;
  }, 500);
}

然后您的score 函数（您只需要一个）可以确定图像是否具有“青蛙”类，添加或删除一个点，并在需要时触发残局状态：

function score(event) {
  var img = event.target;
  if (img.classList.contains("frog") {
    scoreClick += 1;
  } else {
    scoreClick -+ 1;
  }

  var scoreSpan = document.getElementById("scoreDisplay");

  if (scoreClick >= 5) {
    scoreSpan.innerHTML = " Game over - you win!";
    return;
  }

  if (scoreClick <= -5) {
    scoreSpan.innerHTML = "LOSER!";
    return;
  }
}

【讨论】：

我需要修改正文中的任何内容吗？

【解决方案2】：

区分青蛙和非青蛙图像的一种简单方法是使用数组。将五个图片的URI存储在一个数组中，让arr[0]为青蛙，然后将图片从0到4随机化。当索引为0时，您知道青蛙图片正在显示。

【讨论】：

【解决方案3】：

所以这个想法是创建 5 个图像 html 代码，青蛙图像 - onclick="frog"，其余的 - onclick="notfrog()"，在 javascript 文件中创建每 500 毫秒重复一次的函数，并生成一张随机图像，另一个函数 - frog()，做 score++，并检查 score==5，最后一个函数是 notfrog()，和最后一个函数非常相似，只是 - score--，并检查 score==-5，

这是我的代码：

html

<style>
    img{
        width: 150px;
        height: 150px;
    }
</style>
<body>
    <img src="./images/frog.jpg" onclick="frog()" id="frog">
    <img src="./images/monkey.jpg" onclick="notfrog()">
    <img src="./images/bird.jpg" onclick="notfrog()">
    <img src="./images/lion.jpg" onclick="notfrog()">
    <img src="./images/giraffe.jpg" onclick="notfrog()">

    <span id="score">0</span>
</body>

javascript

var images = document.querySelectorAll("img");
var score_html = document.getElementById('score');
var score = 0;
var repeat_fn = setInterval(function choose_image(){
    var random = Math.floor(Math.random() * images.length);
    images[random].style.display = 'block';
    for(var i = 0; i<=images.length; i++){
        if(i != random){
            images[i].style.display = 'none';
        }
    }
}, 500)
function frog(){
    score++;
    if(score === 5){
        score_html.innerHTML = "you won";
        score = 0;
    }
    else{

        score_html.innerHTML = score;
    }
}
function notfrog(){
    score--;
    score_html.innerHTML = score;
    if(score === -5){
        score_html.innerHTML = "you lost";
        score = 0;
    }
}

【讨论】：