0
219
Vistas¿Cómo hacer que el texto flotante haga clic como un clicker de cookies?
Al hacer clic en la "cookie grande" en el clicker de cookies, aparece una ventana emergente que muestra cuántas cookies ganó (+276.341 septillones en esta imagen), que se mueve lentamente hacia arriba y se desvanece.
Quería implementar una función similar en mi juego, hice con éxito la parte de movimiento hacia arriba y desvanecimiento con animaciones css, sin embargo, aparecerá más de uno de estos números a la vez, entonces, ¿cómo clono elementos? ¿Y cómo hago para que aparezcan en la posición del cursor?
1 Respuestas
Responde la pregunta0
No sé qué tecnologías está utilizando, así que aquí le mostramos cómo hacerlo con HTML y JS estándar. Dices que ya hiciste el HTML y el CSS, así que convierte tu HTML en una plantilla
<template id="floating-text-template"> <!-- your existing code --> </template>Ahora en su javascript, clone la plantilla en cada clic
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); }