javascript - 如何检测图像是否被点击

Question

我正在尝试检测是否单击了图像。为了提供一些背景信息，我正在制作一个 cookie Clicker 游戏，如果您单击它 10 次，就会出现一个新图像，该图像将给予双倍积分。对于我使用的第一张图片

document.querySelector('#clickme1').onclick=scooore;

然后我使用以下功能添加新图像:

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    document.body.appendChild(img);
}

我的问题是如何添加到我的变量(屏幕)，因为它是本地的，第一种方法需要使用整个 diff 函数。

function scooore() {
  scree = scree + 1;
  document.getElementById("scorez").innerHTML = "Image has been clicked " + scree + " times";

在这个可能只有 1 行代码的解决方案上工作了 40 多分钟，但找不到解决方案，因此向 Stack Overflow 上的好人求助

Answer 1

除了我在下面发布的代码之外，当您继续开发项目时，真正对您有帮助的是每个图像都有一个数据数组(无论是一个对象还是另一个数组).

// Put on outside so that image may change instead of clone
var img = document.createElement("img")
// Fill out initial image specs
img.src = src
img.width = width
img.height = height
img.alt = alt

function show_image(src, width, height, alt) {
    img.src = src
    img.width = width
    img.height = height
    img.alt = alt
}

var scree = 0
function scooore() {
  scree++
  document.getElementById("scorez").innerHTML = "Image has been clicked " + scree + " times"
  // If score is divisible by 10
  if (scree % 10 === 0) {
    show_image(src, width, height, alt)
  }
}

document.querySelector('#clickme1').onclick = scrooore()