Эффект щелчка. текст (+1) всплывает из курсора (как на cookie-кликере)

Question

Недавно я сделал веб-страницу, очень похожую на известную игру "Cookie Clicker" (Google Cookie Clicker, если вы не знаете, что это такое), и мне было интересно, как эффект "onclick" для cookie (от cookie clicker) готово.

Когда вы нажимаете cookie на Cookie Clicker, текстовое поле с надписью +1 появляется из вашего курсора, а затем исчезает. Не стесняйтесь сами проверить эффект на оригинальной странице Cookie Clicker (я ДЕЙСТВИТЕЛЬНО предпочитаю эффект для классического cookie-кликера, который вы можете найти по ссылке href в правом верхнем углу текущей версии cookie-кликера).

Мое изображение onclick (которое, кстати, не является cookie) уже имеет эффекты onclick/mouseover (clickcounter/audio Effect), поэтому мне нужно что-то, что будет взаимодействовать с тем, что у меня уже есть. Кроме того, кликер с cookie-файлами также предоставляет небольшой cookie-файл, который всплывает и исчезает так же, как текст +1, что также было бы поразительно на моем сайте.

Вы также можете проверить мою страницу, нажав на ссылку в моем профиле StackExchange.

Я сидел здесь весь день, пытаясь написать скрипт, но мои единственные результаты - мой скрипт скрипит или мои кнопки исчезают с моей веб-страницы. Может ли кто-нибудь помочь мне с этим? Дополнительная информация о моем скрипте будет предоставлена ​​при необходимости (в комментариях).

Спасибо всем заранее!

-Daniel

(это мои текущие сценарии для моих эффектов / кнопки onclick. Все источники - локальные файлы.)

Javascript

function clickCounter(){
     var audio = document.getElementById("audio");
     audio.play();
     if(typeof(Storage)!=="undefined"){
         if (localStorage.clickcount)
         {
             localStorage.clickcount=Number(localStorage.clickcount)+1;
         }
         else
         {
             localStorage.clickcount=1;
         }
         document.getElementById("result").innerHTML="<center><b>You have clicked the poop
         </b>"+ localStorage.clickcount + "<b> times!</b></center>";
     }
     else{
         document.getElementById("result").innerHTML="I'm sorry to inform you that your browser
         does not support this web storage... I guess you could say that your browser is...
         shit! awwww yeaahh!";
     }
     cursor: pointer;
}

HTML

<center>
     <font face="chiller" color="#603913" "font size="300" <align="center"><b>Click the
     poop!</b>
</center>
<center>
    <p><picture onclick="clickCounter()"><picture
     onmouseover="document.getElementById('touch').play()"><img src="poop.png"></button></p>
</center>
<audio id="audio" src="fart-01.wav"></audio>
<audio id="touch" src="sticky goo.wav"></audio>
<div id="result"></div>