JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="canvas"></div>

CSS

.button {
    border:1px solid black;
    width:50px;
    height:50px;
    line-height:50px;
    text-align:center;
    cursor:pointer;
}

JavaScript

var params = [0,0,1,1];//nb clicks,nb money,lvl clic(degats), lvl button(pv)
$('#canvas').append('<div id="money" class="money"><span id="money-number">'+params[1]+'</span>$</div>');
genButton();
function genButton() {
    var hpButton = params[3]+parseInt(Math.exp(params[3]/10));
    $('#canvas').append('<div id="button" class="button">Click</div><div id="life" class="hp"><span id="hp">'+hpButton+'</span>/'+hpButton+'</div>');
    $('#button').mousedown(function(e) {
        e.preventDefault();
        hpButton=hpButton-params[2];
        params[0]+=1;
        if (hpButton<=0) {
            $('#button').remove();
            $('#life').remove();
            params[1]=params[1]+params[3]
            params[3]=params[3]+1;
            $('#money-number').html(params[1]);
            genButton();
        } else {
            $('#hp').html(hpButton);
        }
        //
        //$('#money-number').html(params[0]);
        //alert(params[0]);
    });
}