AI game creator

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

No:6895

←

Prev Next

→

amoeba
Developer User3840｜Date and time 23/7/4 4:51:31
Build time 24.397 sec｜Game capacity 2.26KB｜

Script

了解しました。以下に1枚のhtmlファイルとして実装されたゲームの例を示します。

この例では、アメーバと呼ばれる要素をスマートフォン画面内でランダムに移動させるゲームです。アメーバは一定の時間ごとにランダムな位置に移動し、次の移動先に向かってアニメーションで移動します。画面をタップしてアメーバを追いかけたり、アメーバがタップされたときに反応するなど、さらにゲーム性を追加することも可能です。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に1枚のhtmlファイルとして実装されたゲームの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>アメーバゲーム</title>
    <style>
        #ameba {
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="gameArea">
        <div id="ameba"></div>
    </div>

var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;
        var amebaWidth = ameba.offsetWidth;
        var amebaHeight = ameba.offsetHeight;

// アメーバの初期位置をランダムに設定
        var initialX = Math.random() * (screenWidth - amebaWidth);
        var initialY = Math.random() * (screenHeight - amebaHeight);
        ameba.style.left = initialX + "px";
        ameba.style.top = initialY + "px";

// ランダムな方向とスピードでアメーバを移動させる
        setInterval(function() {
            var randomX = Math.random() * screenWidth;
            var randomY = Math.random() * screenHeight;
            var deltaX = randomX - ameba.offsetLeft;
            var deltaY = randomY - ameba.offsetTop;
            var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
            var speed = Math.random() * 5 + 1;
            var time = distance / speed;

ameba.style.transition = "left " + time + "s, top " + time + "s";
            ameba.style.left = randomX - amebaWidth / 2 + "px";
            ameba.style.top = randomY - amebaHeight / 2 + "px";
        }, 3000);
    </script>
</body>
</html>
```