Lots of birds attack 🦅 canvas used's game

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

No:7043

4373

←

Prev Next

→

Lots of birds attack 🦅 canvas used
Developer anonymous｜Date and time 70/1/1 10:01:34
Build time unknown sec｜Game capacity 3.694KB｜

Script

了解しました。以下に、鳥が飛んできてクリックで倒すゲームの例を示します。

このプログラムでは、鳥が画面内を飛び回ります。画面上の鳥をクリックすると、スコアが増えます。スコアと鳥の描画はcanvasを使用して行います。スマホで操作する場合、上記のコードをそのままスマホのブラウザで表示することができます。スマホの画面をタップして鳥を倒すことができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、鳥が飛んできてクリックで倒すゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bird Shooting Game</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    <script>
        // ゲームの状態を表す変数
        var score = 0;
        var gameState = "playing";

// 鳥の情報を保持する配列
        var birds = [];

// canvas要素を取得
        var gameCanvas = document.getElementById("gameCanvas");
        var ctx = gameCanvas.getContext("2d");

// クリックイベントのリスナーを設定
        gameCanvas.addEventListener("click", handleClick);

// 鳥オブジェクトの定義
        function Bird(x, y, size, speedX, speedY) {
            this.x = x;
            this.y = y;
            this.size = size;
            this.speedX = speedX;
            this.speedY = speedY;
        }

// 鳥を追加する関数
        function addBird() {
            var x = Math.random() * (gameCanvas.width - 50);
            var y = Math.random() * (gameCanvas.height - 50);
            var size = Math.random() * 30 + 20;
            var speedX = Math.random() * 10 - 5;
            var speedY = Math.random() * 10 - 5;
            birds.push(new Bird(x, y, size, speedX, speedY));
        }

// クリックイベントのハンドラ関数
        function handleClick(event) {
            if (gameState === "playing") {
                var x = event.clientX - gameCanvas.offsetLeft;
                var y = event.clientY - gameCanvas.offsetTop;
                birds.forEach(function (bird, index) {
                    if (x >= bird.x && x <= bird.x + bird.size && y >= bird.y && y <= bird.y + bird.size) {
                        birds.splice(index, 1);
                        score++;
                    }
                });
            }
        }

// 描画関数
        function draw() {
            ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
            ctx.fillStyle = "black";
            ctx.font = "24px Arial";
            ctx.fillText("Score: " + score, 10, 30);
            birds.forEach(function (bird) {
                ctx.fillStyle = "orange";
                ctx.fillRect(bird.x, bird.y, bird.size, bird.size);
            });
        }

// ゲームループ関数
        function gameLoop() {
            if (gameState === "playing") {
                addBird();
                birds.forEach(function (bird) {
                    bird.x += bird.speedX;
                    bird.y += bird.speedY;
                    if (bird.x < 0 || bird.x + bird.size > gameCanvas.width) {
                        bird.speedX *= -1;
                    }
                    if (bird.y < 0 || bird.y + bird.size > gameCanvas.height) {
                        bird.speedY *= -1;
                    }
                });
                draw();
                requestAnimationFrame(gameLoop);
            }
        }

// ゲーム開始
        gameLoop();
    </script>
</body>
</html>
```

このプログラムでは、鳥が画面内を飛び回ります。画面上の鳥をクリックすると、スコアが増えます。スコアと鳥の描画はcanvasを使用して行います。

スマホで操作する場合、上記のコードをそのままスマホのブラウザで表示することができます。スマホの画面をタップして鳥を倒すことができます。