如何制作像cookie clicker一样的浮动文本onclick？

发布于 2025-01-09 11:54:32 字数 335 浏览 0 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪冰清 2025-01-16 11:54:32

我不知道你正在使用什么技术，所以这里是如何使用普通 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);
}

I don't know what technologies you are using so here is how to do it with vanilla HTML and JS.
You say you already made the HTML & CSS, so turn your HTML into a template

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

Now in your javascript, clone the template on each click

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);
}

回复收藏 0 原文

~没有更多了~