Timer Viimane

<html>

<head>
<meta charset=”utf-8? />
<meta name=”format-detection” content=”telephone=no” />
<meta name=”msapplication-tap-highlight” content=”no” />
<meta name=”viewport” content=”user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width” />
<meta http-equiv=”Content-Security-Policy” content=”default-src * ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; media-src *” />
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<title>Cookie clicker</title>

</head>
<style>
    body{
        font-size: 3vh;
    }
    img {
        max-width:100%;
        height:auto;
    }
    .game{
        height: 25vw;
        width: 25vw;
    }

    table, td, tr {
        border: 1px solid black;
    }

    .clickable{
        background-color: red;
    }

    .ui-btn{
        font-size: 3vh;
    }

</style>

<body>
    <center>
    <h1>Cookie clicker</h1>
    <div style="height: 550px;">
        <img id="cookie" src="PerfectCookie.png">
    </div>
    <p>Cookies: <text id="currentCookies">0</text></p>

    <h3>Shop</h3>
    <table>
        <tr><td><img id="mineShop" src="Mine_new.png"></td><td><img id="farmShop" src="Farm.png"></td></tr>
        <tr><td id="minePrice">15</td><td id="farmPrice">10</td></tr>
    </table>
    </center>
</body>

<script>

    var cookiesInBank = 0;
    var cookiesPerSecond = 0;
    var minesPrice = 15;
    var farmsPrice = 10;
    var mines = 0;
    var farms = 0;

    function animateClickOnCookie(){
        $( "#cookie" ).animate({
            width: "540px",
            height: "540px"
          }, 100 );

        $( "#cookie" ).animate({
            width: "512px",
            height: "512px"
          }, 100 );
    }

    function changeCookiesInBank(value){
        cookiesInBank += value;
        $("#currentCookies").html(Math.round(cookiesInBank));
    }

    function increaseMinePrice(){
        minesPrice = Math.floor(minesPrice*1.2);
        $("#minePrice").html(minesPrice);
    }

    function increaseFarmPrice(){
        farmsPrice =  Math.floor(farmsPrice*1.2);
        $("#farmPrice").html(farmsPrice);
    }

    setInterval(function(){
        changeCookiesInBank(cookiesPerSecond);
    }, 1000);

    $("#cookie").click(function(){
        animateClickOnCookie();
        changeCookiesInBank(1 + mines*3 + farms*2);
    });

    $("#mineShop").click(function(){
        if(cookiesInBank >= minesPrice){
            mines += 1;
            cookiesPerSecond += 0.3;
            changeCookiesInBank(-1*minesPrice);
            increaseMinePrice();
        }else{
            alert("Not enought cookies!");
        }
    });

    $("#farmShop").click(function(){
        if(cookiesInBank >= farmsPrice){
            farms += 1;
            cookiesPerSecond += 0.1;
            changeCookiesInBank(-1*farmsPrice);
            increaseFarmPrice();
        }else{
            alert("Not enought cookies!");
        }
    });


</script>

</html>