Reaction Game

TheShubham-K · TheShubham-K · commit 2ad3031dea25 · 2020-06-17T09:19:48.000+05:30
diff --git a/ReactionGame/Reaction_Game.html b/ReactionGame/Reaction_Game.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>&#x1F3F4;&#x200D;&#x2620;&#xFE0F; Complete Javascripts Course</title>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
+    <style>
+        .btn {
+            padding: 15px;
+            border: 1px solid #ddd;
+            text-align: center;
+            font-size: 1.6em;
+            display: inline-block;
+            background-color: red;
+            border-radius: 15px;
+            color: white;
+            margin: auto;
+            cursor: pointer;
+        }
+
+        .container {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            margin: auto;
+        }
+
+        .score {
+            font-size: 2em;
+            padding: 5px;
+            width: 40%;
+            margin: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <br />
+    <br />
+    <div class="container">
+        <div class="score">0</div>
+        <div class="startGame btn">Start Game Here</div>
+    </div>
+
+    <script>
+        const container = document.querySelector(".container");
+        const startGame = document.querySelector(".startGame");
+        const scoreArea = document.querySelector(".score");
+        let player = {
+            score: 0
+        };
+        startGame.addEventListener("click", function () {
+            startGame.style.display = "none";
+            let ranTime = Math.random() * 2000 + 1000;
+            setTimeout(makeItem, ranTime);
+        })
+
+        function makeItem() {
+            let boundary = container.getBoundingClientRect();
+            let div = document.createElement("div");
+            div.style.position = "absolute";
+            div.style.left = Math.random() * boundary.width + "px";
+            div.style.top = Math.random() * boundary.height + "px";
+            div.style.width = Math.random() * 10 + 40 + "px";
+            div.style.height = Math.random() * 10 + 40 + "px";
+            div.style.borderRadius = "10%";
+            div.style.cursor = "pointer";
+            div.style.backgroundColor = "#" + Math.random().toString(16).substr(-6);
+            div.style.border = "1px solid black";
+            div.startTime = Date.now();
+            div.addEventListener("click", function () {
+                let endTime = Date.now();
+                let diff = (endTime - div.startTime) / 1000;
+                scoreArea.innerHTML = "Clicked in " + diff + "seconds";
+                //startGame.style.display = "block";
+                clearTimeout(div.timer);
+                container.removeChild(div);
+                makeItem();
+            })
+            div.timer = setTimeout(function () {
+                container.removeChild(div);
+                makeItem();
+            }, 1000);
+            container.appendChild(div);
+        }
+    </script>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
+    </script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
+    </script>
+</body>
+
+</html>
