Javascript 如何为我正在开发的增量游戏添加一些功能？

嘿，伙计们，希望能在这方面得到一些帮助，我搜索了一整夜，找不到一个简单的方法来解释如何实现这三个功能：

这是我想要的效果之一-

当您单击cookie时，它会弹出+1，然后淡出，如果应用升级，它会更改显示的数字并递增

实现这一点的最佳方式是什么？我搜索了又搜索，只找到了一两个jquery插件，在使用时会显示弹出窗口，但是没有足够的文档或说明如何达到我想要的效果。还有，如何使它出现在我的鼠标所在的位置？我甚至会很高兴，如果它只是显示在我点击的图像的中间。

还有没有更好的方法来存储我的号码？目前，我的计数器是一个名为“snowballs”的变量，显示的是一个每秒更新一次的范围。是否有更好的方法存储和显示此号码？我很想使用像flipclockjs这样的定制计数器，这可能吗

我已将所有代码放入JSFIDLE页面，但我单击的图像是本地文件，因此不会显示。但至少你可以看到我的代码，我提供了链接

非常感谢你的帮助

代码如下

//升级
var雪球=0；
var企鹅=0；
var=0.1；
var冰屋=0；
var冰屋=0.5；
爱斯基摩人变量=0；
var eskimosps=1.0；
var polarBears=0；
var PolarBearsp=2.0；
//snowball函数可以增加值
功能单击（编号）{
雪球=雪球+数量；
document.getElementById（“雪球”）.innerHTML=prettify（雪球）；
}
功能用户点击（编号）{
雪球=雪球+数量；
document.getElementById（“雪球”）.innerHTML=prettify（雪球）；
}
//购买功能
函数buyPenguin（）{
var penguinCost=Math.floor（10*Math.pow（1.15，penguins））；//计算出这个游标的成本
如果（雪球>=企鹅成本）{//检查玩家是否能负担得起光标
企鹅=企鹅+1；//增加光标的数量
snowballs=snowballs-penguinCost；//删除花费的cookies
document.getElementById（'penguins'）。innerHTML=penguins；//更新用户的游标数
document.getElementById（'snowballs'）。innerHTML=snowballs；//更新用户的cookie数量
};
var nextCost=Math.floor（10*Math.pow（1.15，企鹅））；//计算出下一个游标的成本
document.getElementById（'PenguingCost'）。innerHTML=nextCost；//更新用户的游标成本
};
函数buyPolarBear（）{
var polarBearCost=Math.floor（200*Math.pow（1.15，polarBearCost））；//计算出这个游标的成本
如果（雪球>=polarBearCost）{//检查玩家是否能负担得起光标
polarBears=polarBears+1；//增加光标的数量
snowballs=snowballs-polarBearCost；//删除花费的cookies
document.getElementById（'polarBears'）。innerHTML=polarBears；//更新用户的游标数
document.getElementById（'snowballs'）。innerHTML=snowballs；//更新用户的cookie数量
};
var nextPolarBearCost=Math.floor（200*Math.pow（1.15，polarBears））；//计算下一个光标的成本
document.getElementById（'polarBearCost'）。innerHTML=nextPolarBearCost；//更新用户的游标成本
};
功能小屋（）{
var iglooCost=Math.floor（50*Math.pow（1.15，igloos））；//计算出这个游标的成本
如果（雪球>=iglooCost）{//检查玩家是否能负担得起光标
冰屋=冰屋+1；//增加光标的数量
snowballs=snowballs-iglooCost；//删除花费的cookies
document.getElementById（'penguins'）。innerHTML=penguins；//更新用户的游标数
document.getElementById（'snowballs'）。innerHTML=snowballs；//更新用户的cookie数量
document.getElementById（'igloos'）。innerHTML=igloos；
};
var nextIglooCost=Math.floor（50*Math.pow（1.15，冰屋））；//计算出下一个游标的成本
document.getElementById（'iglooCost'）。innerHTML=nextIglooCost；//更新用户的游标成本
};
函数buyEskimo（）{
var eskimoCost=Math.floor（100*Math.pow（1.15，爱斯基摩人））；//计算出这个游标的成本
如果（雪球>=eskimoCost）{//检查玩家是否能负担得起光标
爱斯基摩人=爱斯基摩人+1；//增加游标的数量
snowballs=snowballs-eskimoCost；//删除花费的cookies
document.getElementById（'eskimos'）。innerHTML=eskimos；//更新用户的游标数
document.getElementById（'snowballs'）。innerHTML=snowballs；//更新用户的cookie数量
};
var nextEskimoCost=Math.floor（100*Math.pow（1.15，爱斯基摩人））；//计算出下一个游标的成本
document.getElementById（'eskimoCost'）。innerHTML=nextEskimoCost；//更新用户的游标成本
};
//使数字更整洁
函数美化（输入）{
var输出=数学四舍五入（输入*1000000）/1000000；
返回输出；
}
//保存、加载和删除函数
函数save（）{
变量保存={
雪球：雪球，
企鹅：企鹅，
冰屋：冰屋，
爱斯基摩人：爱斯基摩人，
北极熊：北极熊
}
setItem（“save”，JSON.stringify（save））；
};
函数加载（）{
var savegame=JSON.parse（localStorage.getItem（“save”）；
if（sav类型）
    $( "#myClickDiv").click( function(event) {
        // get current time in milliseconds since 1970/01/01 to use as a unique id for the popups
        var id= new Date().getTime(); 

        // use Ternary opperator to ask "does a value exist for `ownedPenguins` in local storage"
        // if yes get that value, if no set val to 0

        var val= localStorage.getItem("ownedPenguins") ?  localStorage.getItem("ownedPenguins") : 0;

       // create a div and add it to the main div 
       $( "#main").append('<div class="countDiv" id="'+id+'">'+val+'</div>');

        // get the added div and set its position to that of the cursor
       $("#"+id).css( {position:"absolute", top:event.pageY, left: event.pageX});

         // annimate the added div
              $("#"+id).animate({ "top": "-=100px","opacity": "0" }, "slow",function(){
                            $(this).remove();
                        }
              );
            // in the above
            // "top": "-=100px" tells it to animate the div 100px up
            // "opacity": "0" tells it to animate the div's opacity to 0
            // "slow" is a shorthand speed setting
            // function() {$(this).remove();} is a callback that will remove the element upon ompletion of the animation
    });


// use `localStorage` to track how many of each thing a user has
$( "#myBtn").click( function(event) {
    // use Ternary opperator to ask "does a value exist for `ownedPenguins` in local storage"
    // if yes get that value, if no set val to 0
    //get, increment, and set the value of `ownedPenguins` in `localStorage`
    var val= localStorage.getItem("ownedPenguins") ?  localStorage.getItem("ownedPenguins") : 0;
        val++;    
    localStorage.setItem("ownedPenguins", val);
})