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

No:143

246

←

Prev Next

→

Ants Nest Games
Developer ひさひさ｜Date and time 23/5/27 17:17:32
Build time 46.272 sec｜Game capacity 2.366KB｜

Script

アリの巣ゲーム

Ants Nest Games

🕳Let the ants enter the nest!

🐜

️、Manipulate ants.、新しいアリが生成されます。スマホでも操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>アリの巣ゲーム</title>
    <style>
        body {
            text-align: center;
            font-size: 30px;
        }
        
        #ant {
            font-size: 50px;
            cursor: pointer;
        }
        
        #nest {
            display: inline-block;
            position: relative;
            margin-top: 100px;
        }
        
        #ants {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <h1>アリの巣ゲーム</h1>
    <p>アリを巣に入れましょう！</p>
    
    <div id="nest">🕳️</div>
    
    <div id="ants">
        <div id="ant">🐜</div>
    </div>
    
    <script>
        let ant = document.getElementById("ant");
        let nest = document.getElementById("nest");
        let ants = document.getElementById("ants");
        let score = 0;
        
        function moveAnt(e) {
            let x = e.clientX;
            let y = e.clientY;
            ant.style.top = y + "px";
            ant.style.left = x + "px";
        }
        
        function detectCollision() {
            let circle1 = ant.getBoundingClientRect();
            let circle2 = nest.getBoundingClientRect();
            let distance = Math.sqrt(Math.pow(circle1.x - circle2.x, 2) + Math.pow(circle1.y - circle2.y, 2));
            if (distance < circle1.width/2 + circle2.width/2) {
                score++;
                displayScore();
                ants.removeChild(ant);
                ants.innerHTML += "<div id='ant'>🐜</div>";
            }
        }
        
        function displayScore() {
            nest.innerHTML = "🕳️" + score;
        }
        
        ant.addEventListener("mousedown", function() {
            document.addEventListener("mousemove", moveAnt);
        });
        
        document.addEventListener("mouseup", function() {
            document.removeEventListener("mousemove", moveAnt);
            detectCollision();
        });
    </script>
</body>
</html>

アリを操作して、巣に入れてスコアを稼いでいくゲームです。アリをクリックしたままドラッグすると移動します。巣に接触するとスコアが加算され、新しいアリが生成されます。スマホでも操作可能です。