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

No:7399

2486

←

Prev Next

→

slime mold computer
Developer User3997｜Date and time 23/7/7 14:00:25
Build time 16.379 sec｜Game capacity 3.328KB｜

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>
    <style>
        body {
            text-align: center;
            font-size: 24px;
        }
        #container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        .button {
            width: 80px;
            height: 80px;
            margin: 10px;
            border-radius: 50%;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>粘菌コンピュータ</h1>
    <p id="score">0</p>
    <div id="container">
        <div id="left" class="button">⬅️</div>
        <div id="right" class="button">➡️</div>
        <div id="up" class="button">⬆️</div>
        <div id="down" class="button">⬇️</div>
    </div>

// スコアを更新
        function updateScore() {
            scoreElement.textContent = score;
        }

// ボタンクリック時の処理
        function handleClick(direction) {
            // スコアを増やす
            score++;
            updateScore();

// 粘菌を移動する
            const container = document.getElementById("container");
            switch (direction) {
                case "left":
                    container.prepend(container.lastElementChild);
                    break;
                case "right":
                    container.append(container.firstElementChild);
                    break;
                case "up":
                    container.insertBefore(container.lastElementChild, container.firstElementChild);
                    break;
                case "down":
                    container.insertBefore(container.firstElementChild, container.lastElementChild.nextSibling);
                    break;
            }
        }

// ボタンにイベントリスナーを追加
        const leftButton = document.getElementById("left");
        const rightButton = document.getElementById("right");
        const upButton = document.getElementById("up");
        const downButton = document.getElementById("down");

leftButton.addEventListener("click", () => handleClick("left"));
        rightButton.addEventListener("click", () => handleClick("right"));
        upButton.addEventListener("click", () => handleClick("up"));
        downButton.addEventListener("click", () => handleClick("down"));
    </script>
</body>
</html>
```