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

No:4933

1932

←

Prev Next

→

swarm of grasshoppers
Developer User3796｜Date and time 23/6/29 1:01:18
Build time 22.471 sec｜Game capacity 2.252KB｜

Script

了解です。以下に、スマホ操作前提で遊べるバッタの大群というゲームの実装例を示します。

バッタの大群

このゲームは、クリックして画面上のバッタの群れを消すという簡単なゲームです。画面をタップすると、タップした位置にバッタがいる場合、そのバッタが消えます。全てのバッタが消されると、再度ランダムに新しいバッタの群れが生成されます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、スマホ操作前提で遊べるバッタの大群というゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バッタの大群</title>
</head>
<body>
    <h1>バッタの大群</h1>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const battaEmoji = '🦗';
        const maxBatta = 50;
        let battas = [];

canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            battas = battas.filter(batta => !isClicked(x, y, batta));
            if (battas.length === 0) {
                generateBattas();
            }
        });

function drawBatta(x, y) {
            ctx.font = '30px Arial';
            ctx.fillText(battaEmoji, x, y);
        }

function isClicked(clickX, clickY, batta) {
            const battaSize = 30;
            return (clickX >= batta.x && clickX <= batta.x + battaSize &&
                clickY >= batta.y && clickY <= batta.y + battaSize);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            battas.forEach(batta => {
                drawBatta(batta.x, batta.y);
            });

requestAnimationFrame(draw);
        }

generateBattas();
        draw();
    </script>
</body>
</html>
```