init

2026-06-06 19:04:01 -04:00
commit e02696b245
2 changed files with 91 additions and 0 deletions
@@ -0,0 +1 @@
+a basic reaction time game
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            * {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 0;
+            }
+            html {
+                height: 100vh;
+                width: 100vw;
+                background-color: #161616;
+            }
+            body {
+                display: flex;
+                justify-content: center;
+            }
+            #target {
+                height: 20px;
+                width: 20px;
+                background-color: red;
+                position: relative;
+            }
+            #frame {
+                width: 75%;
+                height: 100vh;
+                border: 1px solid white;
+            }
+        </style>
+    </head>
+    <body>
+
+        <div id="frame">
+
+        </div>
+
+        <script>
+
+            const targetWidth = 20;
+            const targetHeight = 20;
+
+            let pageWidth = window.innerWidth;
+            let pageHeight = window.innerHeight;
+
+            const frameElement = document.getElementById("frame");
+            let frameHeight = frameElement.offsetHeight - targetHeight;
+            let frameWidth = frameElement.offsetWidth - targetWidth;
+            
+            let target;
+
+
+            window.addEventListener("resize", (e) => {
+                this.pageWidth = window.innerWidth;
+                this.pageHeight = window.innerHeight;
+                this.frameHeight = frameElement.offsetHeight;
+                this.frameWidth = frameElement.offsetWidth;
+                console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight);
+                console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
+            });
+
+            generateTarget();
+
+            // init logs:
+            console.log('page: ' + pageWidth + ' x ' + pageHeight);
+            console.log('frame: ' + frameWidth + ' x ' + frameHeight);
+
+
+            
+
+            
+            
+            function generateTarget() {
+                const target = document.createElement("div");
+                target.id = "target";
+                target.style.top = getRandomInt(0, frameHeight) + 'px';
+                target.style.left = getRandomInt(0, frameWidth) + 'px';
+                console.log(target);
+                document.getElementById("frame").insertAdjacentElement("afterbegin", target);
+            }
+
+
+            function getRandomInt(min, max) {
+                const minCeiled = Math.ceil(min);
+                const maxFloored = Math.floor(max);
+                return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive
+            }
+        </script>
+    </body>
+</html>