Flinging rocks.

MichaelDiBernardo · Aug 25, 2024 · 00bd062 · 00bd062
1 parent a8eb760
commit 00bd062
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/img/rock1.png b/img/rock1.png
diff --git a/index.html b/index.html
@@ -89,6 +89,13 @@
   <body>
     <div id="scrollable-area">
       <div id="center-point"></div>
+      <div id="rocks-container"></div>
     </div>
+
+    <template id="rock-template">
+      <div class="rock">
+        <img src="./img/rock1.png" alt="Rock" />
+      </div>
+    </template>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const rocksContainer = document.getElementById("rocks-container");
+  const rockTemplate = document.getElementById("rock-template");
+  const numRocks = 20; // Number of rocks to create
+
+  function createRock() {
+    const rock = rockTemplate.content.cloneNode(true).querySelector(".rock");
+    rock.style.left = `${Math.random() * 100}%`;
+    rock.style.top = `${Math.random() * 100}%`;
+    rock.addEventListener("click", flingRock);
+    rocksContainer.appendChild(rock);
+  }
+
+  function flingRock(event) {
+    const rock = event.currentTarget;
+    const angle = Math.random() * Math.PI * 2;
+    const distance = 1000 + Math.random() * 1000;
+    const duration = 500 + Math.random() * 500;
+
+    rock.style.transform = `translate(${Math.cos(angle) * distance}px, ${
+      Math.sin(angle) * distance
+    }px) rotate(${Math.random() * 720 - 360}deg)`;
+    rock.style.opacity = "0";
+    rock.style.transition = `all ${duration}ms cubic-bezier(0.25, 0.1, 0.25, 1)`;
+
+    setTimeout(() => {
+      rock.remove();
+    }, duration);
+  }
+
+  for (let i = 0; i < numRocks; i++) {
+    createRock();
+  }
+});
diff --git a/style.css b/style.css
@@ -83,8 +83,21 @@ body {
 }
 
 #scrollable-area {
-  width: 50000px;
-  height: 50000px;
+  width: 5000px;
+  height: 5000px;
   background-image: url("./img/forest-tile-512x512.jpg");
   background-repeat: repeat;
 }
+
+.rock {
+  position: absolute;
+  width: 256px;
+  height: 256px;
+  cursor: pointer;
+  transition: all 0.5s ease-out;
+}
+
+.rock img {
+  width: 100%;
+  height: 100%;
+}