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

No:35261

←

Prev Next

→

ひよこそだて
Developer おまめちゃん｜Date and time 24/1/13 18:25:43
Build time 13.383 sec｜Game capacity 2.991KB｜

Script

了解しました。以下にプログラムを実装します。

ひよこそだて

🥚

このプログラムは、「ひよこそだて」というゲームを実装しています。画面をタップすると卵が孵化し、ひよこが現れます。卵の状態から孵化中の状態になり、一定時間経過するとひよこになります。卵の状態や孵化までの時間はJavaScriptの変数で管理しています。また、定期的に処理を実行するために`setInterval`関数を使用しています。画面は中央に卵（🥚の絵文字）を表示し、クリックすると卵が孵化してひよこ（🐥の絵文字）に変わります。

←

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-family: Arial, sans-serif;
        }
        
        #hatchContainer {
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>ひよこそだて</h1>
    
    <div id="hatchContainer">
        🥚 
    </div>
    
    <script>
        // ひよこの状態を表す定数
        const EGG = "egg";
        const HATCHING = "hatching";
        const CHICK = "chick";
        
        // 卵のオブジェクト
        let egg = {
            state: EGG, // 初期状態は卵
            turnCount: 0 // ひよこの孵化までの時間
        };
        
        // 画面をタップしたときの処理
        document.addEventListener("click", function(){
            if(egg.state === EGG) {
                egg.state = HATCHING; // 孵化中の状態へ
            }
        });
        
        // メインの処理（1秒に1回呼び出される）
        function mainLoop() {
            if(egg.state === HATCHING) {
                egg.turnCount++;
                
                // 孵化が完了したらひよこになる
                if(egg.turnCount >= 10) {
                    egg.state = CHICK;
                }
            }
            
            // 画面の更新
            updateDisplay();
        }
        
        // 画面の更新処理
        function updateDisplay() {
            let container = document.getElementById("hatchContainer");
            
            // 状態に応じた表示を設定
            switch(egg.state) {
                case EGG:
                    container.innerText = "🥚";
                    break;
                case HATCHING:
                    container.innerText = "🐣";
                    break;
                case CHICK:
                    container.innerText = "🐥";
                    break;
            }
        }
        
        // メインループを開始
        setInterval(mainLoop, 1000);
    </script>
</body>
</html>
```

画面は中央に卵（🥚の絵文字）を表示し、クリックすると卵が孵化してひよこ（🐥の絵文字）に変わります。