Square monster hunter's game | AI game creator

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

No:50034

109

Square monster hunter
Developer User21218｜Date and time 24/3/7 14:16:28
Build time 8.589 sec｜Game capacity 1.956KB｜

👹

👹

👹

👹

👹

👹

👹

👹

👹

→ 　

0　

0　

[PR]現在のフィギュア売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

<head>
    <title>Square Monster Hunter</title>
    <style>
        .game {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 5px;
            max-width: 300px;
            margin: auto;
        }

.square {
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
        }

.monster {
            background-color: red;
        }
    </style>
</head>

<body>

<div class="game">
        <div class="square" onclick="attackMonster(1)">👹</div>
        <div class="square" onclick="attackMonster(2)">👹</div>
        <div class="square" onclick="attackMonster(3)">👹</div>
        <div class="square" onclick="attackMonster(4)">👹</div>
        <div class="square" onclick="attackMonster(5)">👹</div>
        <div class="square" onclick="attackMonster(6)">👹</div>
        <div class="square" onclick="attackMonster(7)">👹</div>
        <div class="square" onclick="attackMonster(8)">👹</div>
        <div class="square" onclick="attackMonster(9)">👹</div>
    </div>

<script>
        let monstersAlive = 9;

function attackMonster(monsterNumber) {
            const monsterSquare = document.getElementsByClassName("square")[monsterNumber - 1];
            if (monsterSquare.classList.contains("monster")) {
                monstersAlive--;
                monsterSquare.classList.remove("monster");
                monsterSquare.innerText = "💀";
                if (monstersAlive === 0) {
                    alert("Congratulations! You defeated all the monsters!");
                }
            } else {
                alert("Oops, it's not a monster!");
            }
        }
    </script>

</body>

</html>