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

No:12015

308

←

Prev Next

→

Troglodyte phenomenon
Developer User1006｜Date and time 23/8/13 14:26:25
Build time 23.287 sec｜Game capacity 3.822KB｜

Script

了解です。では以下に、蛙化現象というゲームを実装したプログラムの例を示します。

蛙化現象

画面をタップして蛙を生成しましょう！

このプログラムでは、画面をタップ（またはクリック）することで蛙が生成されます。そして、画面上でマウスを動かすことで蛙が移動します。蛙が画面外に出た場合は、自動的に削除されます。なお、スマートフォンでもプレイ可能です。画面をタップすることで蛙が生成され、指で画面上をなぞることで蛙が移動します。以上が蛙化現象というゲームを実装したプログラムの例です。htmlファイルとして保存し、ブラウザやスマートフォンで開いて遊んでみてください。

←

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>
    <style>
        body {
            text-align: center;
            background-color: #cfd8dc;
            font-family: "Arial", sans-serif;
        }

h1 {
            margin: 50px 0;
        }

#frog {
            font-size: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>蛙化現象</h1>
    <p>画面をタップして蛙を生成しましょう！</p>

// 蛙を生成する関数
            function createFrog(event) {
                var frog = document.createElement("span");
                frog.innerHTML = "🐸";
                frog.style.position = "fixed";
                frog.style.left = (event.clientX - 50) + "px";
                frog.style.top = (event.clientY - 50) + "px";
                document.body.appendChild(frog);
            }

// 画面をクリックしたら蛙を生成する
            document.addEventListener("click", createFrog);

// 画面がタッチされたら蛙を生成する
            document.addEventListener("touchstart", function(event) {
                createFrog(event.changedTouches[0]);
            });

// 蛙を移動する
            document.addEventListener("mousemove", function(event) {
                var frogs = document.querySelectorAll("span");
                for (var i = 0; i < frogs.length; i++) {
                    var frog = frogs[i];
                    var rect = frog.getBoundingClientRect();
                    var frogX = rect.left + rect.width / 2;
                    var frogY = rect.top + rect.height / 2;
                    var dx = event.clientX - frogX;
                    var dy = event.clientY - frogY;
                    var angle = Math.atan2(dy, dx);
                    var speed = 10;
                    var vx = speed * Math.cos(angle);
                    var vy = speed * Math.sin(angle);
                    frog.style.left = (rect.left + vx) + "px";
                    frog.style.top = (rect.top + vy) + "px";
                }
            });

// 蛙が画面外に出たら削除する
            function removeFrog(event) {
                var frogs = document.querySelectorAll("span");
                for (var i = 0; i < frogs.length; i++) {
                    var frog = frogs[i];
                    var rect = frog.getBoundingClientRect();
                    if (rect.left < 0 || rect.top < 0 || rect.right > window.innerWidth || rect.bottom > window.innerHeight) {
                        frog.remove();
                    }
                }
            };
            document.addEventListener("mouseout", removeFrog);
        });
    </script>
</body>
</html>
```

このプログラムでは、画面をタップ（またはクリック）することで蛙が生成されます。そして、画面上でマウスを動かすことで蛙が移動します。蛙が画面外に出た場合は、自動的に削除されます。

なお、スマートフォンでもプレイ可能です。画面をタップすることで蛙が生成され、指で画面上をなぞることで蛙が移動します。

以上が蛙化現象というゲームを実装したプログラムの例です。htmlファイルとして保存し、ブラウザやスマートフォンで開いて遊んでみてください。