0
212
ViewsHow to make floating text onclick like cookie clicker?
When clicking the "big cookie" in cookie clicker, there is a popup showing how many cookies you earned (+276.341 septillion in this image), which slowly moves upward and fades out.
I wanted to implement a similar feature in my game, I sucessfully made the moving up and fading out part with css animations, however, there will be more than one of these numbers showing up at once, so how do I clone elements? And how do I make these show up at the cursor position?
·
Juan Pablo Isaza
1 answers
Answer question0
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);
}
·
Juan Pablo Isaza
Report
Answer question