Add files via upload

Naksh-Rathore · Feb 15, 2025 · cf27327 · cf27327
commit cf27327
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 0 deletions.
diff --git a/images/person.png b/images/person.png
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stop & Go</title>
+    <link rel="stylesheet" href="style.css"> 
+</head>
+<body>
+
+
+    <h1>Stop & Go</h1>
+
+    <div id="container">
+        <hr>
+
+        <img src="./images/person.png" alt="person">
+
+        <div id="trafficLight">
+            <button id="redLight" disabled></button><br><br>
+            <button id="greenLight" disabled></button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,77 @@
+const redLight = document.getElementById("redLight");
+const greenLight = document.getElementById("greenLight");
+const player = document.querySelector("img");
+
+const greenLightSound = new Audio("./sounds/start.mp3");
+const redLightSound = new Audio("./sounds/stop.mp3");
+
+const finishLine = document.querySelector("hr");
+
+redLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+
+let yOffset = 0;
+let isRedLight = true;
+let playing = true;
+
+function changeLight() {
+    if (!isRedLight) {
+        redLightSound.currentTime = 0;
+        redLightSound.play();
+
+        redLight.style.backgroundColor = "red";
+        greenLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+        isRedLight = true;
+    } 
+
+    else {
+        greenLightSound.currentTime = 0;
+        greenLightSound.play();
+
+        greenLight.style.backgroundColor = "green";
+        redLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+        isRedLight = false;
+    }
+
+    setTimeout(changeLight, Math.floor(Math.random() * 3001) + 1000);
+}
+
+document.addEventListener("keydown", event => {
+    event.preventDefault();
+
+    if (event.repeat) return;
+
+    if (!playing) return;
+
+    if (isRedLight) {
+        playing = false;
+        yOffset = 0;
+        window.alert("You lost!");
+
+        redLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+        greenLight.style.backgroundColor = "green";
+    }
+
+    const playerRect = player.getBoundingClientRect();
+    const finishLineRect = finishLine.getBoundingClientRect();
+
+    if (playerRect.bottom <= finishLineRect.top) {
+        playing = false;
+
+        redLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+        greenLight.style.backgroundColor = "rgba(89, 87, 87, 0.746)";
+
+        window.alert("You won!");
+    }
+
+    if (event.key === "ArrowUp") {
+        yOffset -= 10;
+    } 
+
+    else if (event.key === "ArrowDown") {
+        yOffset += 10;
+    }
+
+    player.style.transform = `translateY(${yOffset}px)`;
+});
+
+changeLight();
diff --git a/sounds/start.mp3 b/sounds/start.mp3
diff --git a/sounds/stop.mp3 b/sounds/stop.mp3
diff --git a/style.css b/style.css
@@ -0,0 +1,46 @@
+body {
+    font-family: sans-serif;
+    text-align: center;
+    position: relative;
+}
+
+#timeDisplay {
+    transform: translateY(75px);
+}
+
+hr {
+    transform: translateY(75px);
+}
+
+img {
+    position: absolute;
+    width: 100px;
+    top: 590px;
+    left: 300px;
+    transition: transform 0.25s ease;
+}
+
+#trafficLight {
+    background-color: rgb(255, 238, 0);
+    transform: translateY(250px);
+    border: 2px solid grey;
+    padding: 20px;
+    width: 10%;
+    margin-top: -32px;
+    margin-left: 575px;
+}
+
+button {
+    border: solid 1px;
+    width: 75px;
+    height: 75px;
+    border-radius: 50px;
+    background-color: rgba(89, 87, 87, 0.746);
+    transition: background-color 0.2s ease;
+}
+
+hr {
+    height: 5px;
+    background-color: orange;
+    border: none;
+}