Collect coins's game | AI game creator

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

No:41463

90

Collect coins
Developer User18502｜Date and time 24/2/7 16:09:16
Build time 13.711 sec｜Game capacity 3.751KB｜

→ 　

0　

0　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f3f3f3;
            font-family: Arial, sans-serif;
        }
        
        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            height: 300px;
        }
        
        .cell {
            width: 33.33%;
            height: 33.33%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        
        .coin {
            font-size: 40px;
        }
        
        .empty {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="game-board">
        <div class="cell empty" onclick="collectCoin(0)"></div>
        <div class="cell empty" onclick="collectCoin(1)"></div>
        <div class="cell empty" onclick="collectCoin(2)"></div>
        <div class="cell empty" onclick="collectCoin(3)"></div>
        <div class="cell empty" onclick="collectCoin(4)"></div>
        <div class="cell empty" onclick="collectCoin(5)"></div>
        <div class="cell empty" onclick="collectCoin(6)"></div>
        <div class="cell empty" onclick="collectCoin(7)"></div>
        <div class="cell empty" onclick="collectCoin(8)"></div>
        <div class="cell empty" onclick="collectCoin(9)"></div>
        <div class="cell empty" onclick="collectCoin(10)"></div>
        <div class="cell empty" onclick="collectCoin(11)"></div>
        <div class="cell empty" onclick="collectCoin(12)"></div>
        <div class="cell empty" onclick="collectCoin(13)"></div>
        <div class="cell empty" onclick="collectCoin(14)"></div>
        <div class="cell empty" onclick="collectCoin(15)"></div>
        <div class="cell empty" onclick="collectCoin(16)"></div>
        <div class="cell empty" onclick="collectCoin(17)"></div>
        <div class="cell empty" onclick="collectCoin(18)"></div>
        <div class="cell empty" onclick="collectCoin(19)"></div>
        <div class="cell empty" onclick="collectCoin(20)"></div>
        <div class="cell empty" onclick="collectCoin(21)"></div>
        <div class="cell empty" onclick="collectCoin(22)"></div>
        <div class="cell empty" onclick="collectCoin(23)"></div>
        <div class="cell empty" onclick="collectCoin(24)"></div>
        <div class="cell empty" onclick="collectCoin(25)"></div>
        <div class="cell empty" onclick="collectCoin(26)"></div>
        <div class="cell empty" onclick="collectCoin(27)"></div>
        <div class="cell empty" onclick="collectCoin(28)"></div>
        <div class="cell empty" onclick="collectCoin(29)"></div>
    </div>

<script>
        var coins = 0;

function collectCoin(index) {
            var cell = document.getElementsByClassName("cell")[index];
            if (cell.classList.contains("empty")) {
                cell.classList.remove("empty");
                cell.innerHTML = "💰"; // Coin pictogram
                coins++;
                if (coins === 30) {
                    alert("Congratulations! You collected all the coins.");
                    resetGame();
                }
            }
        }

function resetGame() {
            var cells = document.getElementsByClassName("cell");
            for (var i = 0; i < cells.length; i++) {
                cells[i].classList.add("empty");
                cells[i].innerHTML = "";
            }
            coins = 0;
        }
    </script>
</body>

</html>