collision detection

mzelder · Jul 25, 2024 · df4039e · df4039e
1 parent f8cac9a
commit df4039e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <div id="fan"></div>
-    <img id="cursor" src="cursor.png">
+    <img id="cursor" src="trash.png">
     <img class="lamp" src="lamp.png">
     <img class="plant" src="plant.png">
     <div class="lamp-hitbox"></div>

diff --git a/script.js b/script.js
@@ -14,6 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const windForce = 0.5; 
     let velocityY = 0;
     let velocityX = 0; 
+    let angle = 0;
 
     let mouseX = 0;
     let mouseY = 0;
@@ -34,7 +35,12 @@ document.addEventListener("DOMContentLoaded", () => {
     // Update cursor position and apply gravity every 10 milliseconds
     setInterval(() => {
         updateCol();
-
+        if (checkColission()) {
+            alert("Game over!");
+        }
+
+        angle += 10;
+        cursor.style.transform = `rotate(${angle}deg)`
 
         // Apply gravity
         velocityY += gravity;
@@ -122,4 +128,23 @@ document.addEventListener("DOMContentLoaded", () => {
             plantHitBox.style.left = plantNewPosition + 60 + 'px';
         }
     }
+
+    function checkColission() {
+        let cursorRect = cursor.getBoundingClientRect();
+        let lampRect = lampHitBox.getBoundingClientRect();
+        let plantRect = plantHitBox.getBoundingClientRect();
+        // Check for collision with the lamp
+        let lampCollision = !(cursorRect.right < lampRect.left ||
+            cursorRect.left > lampRect.right ||
+            cursorRect.bottom < lampRect.top ||
+            cursorRect.top > lampRect.bottom);
+
+        // Check for collision with the plant
+        let plantCollision = !(cursorRect.right < plantRect.left ||
+            cursorRect.left > plantRect.right ||
+            cursorRect.bottom < plantRect.top ||
+            cursorRect.top > plantRect.bottom);
+
+        return lampCollision || plantCollision;
+    }
 });
diff --git a/style.css b/style.css
@@ -10,8 +10,7 @@ body {
 }
 
 #cursor {
-    width: 16px;
-    height: 16px;
+    width: 50px;
     position: absolute;
     top: 100px;
     left: 100px;

diff --git a/trash.png b/trash.png