Wireframe Primitives's game

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

No:6456

←

Prev Next

→

Wireframe Primitives
Developer User3891｜Date and time 23/7/2 13:43:10
Build time 24.611 sec｜Game capacity 2.887KB｜

Script

以下は、JavaScriptを使用してゲームを作成するためのHTMLファイルの例です。この例では、トラフィックライトのシミュレーションゲームを作成しています。

上記のコードは、トラフィックライトのシミュレーションゲームを作成しています。赤色、黄色、緑色のライトが点灯し、3秒ごとに順番に点滅します。このゲームはブラウザ上で実行され、スマートフォンで操作することもできます。

←

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>
        #traffic-light {
            width: 100px;
            height: 300px;
            background-color: #aaa;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        .light {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 10px;
        }
        #red-light {
            background-color: gray;
        }
        #yellow-light {
            background-color: gray;
        }
        #green-light {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="traffic-light">
        <div id="red-light" class="light"></div>
        <div id="yellow-light" class="light"></div>
        <div id="green-light" class="light"></div>
    </div>

// ライトの色を変更する関数
        function changeLightColor() {
            if (currentLight === "red") {
                document.getElementById("red-light").style.backgroundColor = "red";
                document.getElementById("yellow-light").style.backgroundColor = "gray";
                document.getElementById("green-light").style.backgroundColor = "gray";
                currentLight = "green";
            } else if (currentLight === "green") {
                document.getElementById("red-light").style.backgroundColor = "gray";
                document.getElementById("yellow-light").style.backgroundColor = "gray";
                document.getElementById("green-light").style.backgroundColor = "green";
                currentLight = "yellow";
            } else if (currentLight === "yellow") {
                document.getElementById("red-light").style.backgroundColor = "gray";
                document.getElementById("yellow-light").style.backgroundColor = "yellow";
                document.getElementById("green-light").style.backgroundColor = "gray";
                currentLight = "red";
            }
        }

// 3秒ごとにライトの色を変更する処理を実行
        setInterval(changeLightColor, 3000);
    </script>
</body>
</html>
```