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

No:21176

101

←

Prev Next

→

Make a red light green light game two buttons one ..ALL
Developer User9369｜Date and time 23/10/13 23:15:59
Build time 75.902 sec｜Game capacity 2.985KB｜

Script

Sure! Here's a simple implementation of a Red Light Green Light game using JavaScript and HTML:

Red Light Green Light Game

This code will create a Red Light Green Light game with two buttons: "GO" and "STOP". Clicking the "GO" button will start changing the traffic light colors every second, simulating the game. Clicking the "STOP" button will refresh the page, stopping the game. The traffic light is represented using three colored circles: red, green, and yellow. The active light will be fully visible, while the inactive lights will be semi-transparent.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a Red Light Green Light game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Red Light Green Light Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        .traffic-light {
            width: 150px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            margin-top: 50px;
        }
        
        .light {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        
        #red {
            background-color: red;
        }
        
        #yellow {
            background-color: yellow;
        }
        
        #green {
            background-color: green;
        }
    </style>
</head>

<body>
    <h1>Red Light Green Light Game</h1>
    <div class="traffic-light">
        <div id="red" class="light"></div>
        <div id="yellow" class="light"></div>
        <div id="green" class="light"></div>
    </div>
    <button id="go">GO</button>
    <button id="stop">STOP</button>

function activateLight(light) {
            document.getElementById(light).style.opacity = 1; // Make the specified light fully visible
        }

function deactivateLight(light) {
            document.getElementById(light).style.opacity = 0.3; // Make the specified light semi-transparent
        }

function changeLight() {
            deactivateLight(activeLight); // Deactivate the current light

if (activeLight === "red") {
                activeLight = "green";
            } else if (activeLight === "green") {
                activeLight = "yellow";
            } else {
                activeLight = "red";
            }

activateLight(activeLight); // Activate the new light
        }

document.getElementById("go").addEventListener("click", function() {
            setInterval(changeLight, 1000); // Start changing lights every second
        });

document.getElementById("stop").addEventListener("click", function() {
            location.reload(); // Reload the page to stop the game
        });
    </script>
</body>

</html>
```

The traffic light is represented using three colored circles: red, green, and yellow. The active light will be fully visible, while the inactive lights will be semi-transparent.