Cookie clicker game (When you click the cookie, you get 1 point. Hearts appear always and move a random position every second, so if you click a Heart, you get 2 points. And the most rare is a rainbow, which appears every minute in a random position. If you click a rainbow, you get 10 points.)'s game

Click here for free DL of the app version that can save data.

No:26535

←

Prev Next

→

Cookie clicker game (When you click the cookie, yo..ALL
Developer User13175｜Date and time 23/12/1 12:24:28
Build time 65.947 sec｜Game capacity 3.814KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <script>
        var score = 0;
        var timer;
        
        function startTimer() {
            timer = setInterval(moveHearts, 1000);
            setTimeout(spawnRainbow, 60000);
        }
        
        function moveHearts() {
            var hearts = document.getElementsByClassName("heart");
            var container = document.getElementById("container");
            for (var i = 0; i < hearts.length; i++) {
                var randomX = Math.floor(Math.random() * (container.offsetWidth - 100));
                var randomY = Math.floor(Math.random() * (container.offsetHeight - 100));
                hearts[i].style.left = randomX + "px";
                hearts[i].style.top = randomY + "px";
            }
        }
        
        function spawnRainbow() {
            var container = document.getElementById("container");
            var rainbow = document.createElement("div");
            rainbow.classList.add("rainbow");
            var randomX = Math.floor(Math.random() * (container.offsetWidth - 200));
            var randomY = Math.floor(Math.random() * (container.offsetHeight - 200));
            rainbow.style.left = randomX + "px";
            rainbow.style.top = randomY + "px";
            container.appendChild(rainbow);
        }
        
        function onClickCookie() {
            score += 1;
            updateScore();
        }
        
        function onClickHeart() {
            score += 2;
            updateScore();
        }
        
        function onClickRainbow() {
            score += 10;
            updateScore();
        }
        
        function updateScore() {
            document.getElementById("score").textContent = score;
        }
    </script>
    <style>
        #container {
            position: relative;
            width: 600px;
            height: 400px;
            border: 2px solid black;
        }
        
        .cookie {
            width: 100px;
            height: 100px;
            background: url('cookie.png');
            background-size: cover;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .heart {
            width: 50px;
            height: 50px;
            background: url('heart.png');
            background-size: cover;
            position: absolute;
        }
        
        .rainbow {
            width: 200px;
            height: 200px;
            background: url('rainbow.png');
            background-size: cover;
            position: absolute;
        }
    </style>
</head>
<body onload="startTimer()">
    <div id="container">
        <div class="cookie" onclick="onClickCookie()"></div>
    </div>
    <div id="score">0</div>
    <script>
        var container = document.getElementById("container");
        
        container.addEventListener("click", function(event) {
            if (event.target.classList.contains("heart")) {
                onClickHeart();
                container.removeChild(event.target);
            } else if (event.target.classList.contains("rainbow")) {
                onClickRainbow();
                container.removeChild(event.target);
                setTimeout(spawnRainbow, 60000);
            }
        });
        
        container.addEventListener("mousemove", function(event) {
            var hearts = document.getElementsByClassName("heart");
            for (var i = 0; i < hearts.length; i++) {
                hearts[i].style.transitionDuration = "0s";
            }
            setTimeout(function() {
                for (var i = 0; i < hearts.length; i++) {
                    hearts[i].style.transitionDuration = "1s";
                }
            }, 100);
        });
    </script>
</body>
</html>