HTML + INLINE JAVA

<!DOCTYPE html>

    <link rel="stylesheet" href="styles.css" />
    <title>Sam Kisser</title>
    <h1><button onclick="punchsam(1)"><div class="test"><img src= "https://pbs.twimg.com/profile_images/756024570507821056/CIWAI61j.jpg"></div></button> KISSES: <span id="money">0</span></h1>

    <h3>Need More Lips?</h3>
    <p>Girlfriends (1x): <span id="beginner">0</span> </p>
    <p>Kiss Machine(5x): <span id="novice">0</span> </p>
    <p>Tejas Rao(15x): <span id="scrub">0</span> </p>


</head>
<body>

   <audio autoplay loop>
<source src="Romantic.mp3" type="audio/mpeg" />

   <h3><button onclick="buyBeginner()">Buy More Girlfriends</button> Cost: <span id="beginnerCost">10</span> </h3>
   <h3><button onclick="buyNovice()">Buy More Kiss Machines</button> Cost: <span id="noviceCost">100</span> </h3>
   <h3><button onclick="buyScrub()">Buy More of Tejas Rao</button> Cost: <span id="scrubCost">1000</span> </h3>
    <script>
        var money = 0;

        function punchsam(number){
            money = money + number;
            document.getElementById("money").innerHTML = money;
        };
        var beginner = 0;

        function buyBeginner (){
            var beginnerCost = Math.floor(10 * Math.pow(1.5,beginner));
            if (money >= beginnerCost) {
                beginner = beginner + 1;
                money = money - beginnerCost;
                document.getElementById('beginner').innerHTML = beginner;
                document.getElementById('money').innerHTML = money;
            };
            var nextCost = Math.floor(10 * Math.pow(1.5,beginner));
            document.getElementById('beginnerCost').innerHTML = nextCost;
        };

        window.setInterval(function(){
            punchsam(beginner);
        }, 1000);


         var novice = 0;

        function buyNovice (){
            var noviceCost = Math.floor(100 * Math.pow(1.5,novice));
            if (money >= noviceCost) {
                novice = novice + 1;
                money = money - noviceCost;
                document.getElementById('novice').innerHTML = novice;
                document.getElementById('money').innerHTML = money;
            };
            var nextCost = Math.floor(100 * Math.pow(1.5,novice));
            document.getElementById('noviceCost').innerHTML = nextCost;
        };

        window.setInterval(function(){
            punchsam(novice*5);
        }, 1000);



         var scrub = 0;

        function buyScrub (){
            var scrubCost = Math.floor(1000 * Math.pow(1.5,scrub));
            if (money >= scrubCost) {
                scrub = scrub + 1;
                money = money - scrubCost;
                document.getElementById('scrub').innerHTML = scrub;
                document.getElementById('money').innerHTML = money;
            };
            var nextCost = Math.floor(1000 * Math.pow(1.5,scrub));
            document.getElementById('scrubCost').innerHTML = nextCost;
        };

        window.setInterval(function(){
            punchsam(scrub*15);
        }, 1000);


    </script>

</body>

CSS

h1 { font-size:100px; text-align: center; }

img { width: 300px ; }

p, h3 { text-align: center; font-family:"Impact"; font-size: 25px; }

body { background-image: url("http://www.consultingroom.com/uploads/Image_Directory/Blog%20Images/Lips.jpg"); }

body, .test {

cursor: url(http://emojipedia-us.s3.amazonaws.com/cache/cc/50/cc5000010823dfba3dfd8c7bec863d70.png), auto; }

Built With

Share this project:
×

Updates