如何使浮动文本 onclick 像 cookie clicker？

Question

点击 cookie clicker 中的“大 cookie”时，会出现一个弹出窗口，显示您获得了多少 cookie（此图中为 +276.341 septillion），它会缓慢向上移动并逐渐消失。

我想在我的游戏中实现类似的功能，我成功地用 css 动画制作了向上移动和淡出部分，但是，这些数字中会同时出现不止一个，那么如何克隆元素呢？以及如何让它们显示在光标位置？

Answer 1

我不知道您使用的是什么技术，所以这里是如何使用 vanilla HTML 和 JS 来实现的。你说你已经制作了 HTML & CSS，所以把你的 HTML 变成模板

<template id="floating-text-template">
  <!-- your existing code -->
</template>

现在在您的 javascript 中，每次点击都克隆模板

function click(event) {
  const template = document.getElementByID('#floating-text-template').content.cloneNode(true);
  const element = template.querySelector('.floating-text') //replace class with yours
  element.style.left = `${event.clientX}px`
  element.style.top = `${event.clientY}px`
  document.appendChild(element);
}

如何使浮动文本 onclick 像 cookie clicker？

How to make floating text onclick like cookie clicker?

html

javascript

css

css-transitions

css-animations