step 3

iOliverNguyen · Sep 21, 2022 · 7922288 · 7922288
1 parent 7875f1b
commit 7922288
Show file tree

Hide file tree

Showing 4 changed files with 899 additions and 2 deletions.
diff --git a/heart.png b/heart.png
diff --git a/index.html b/index.html
@@ -2,9 +2,17 @@
 <html lang="en">
 <head>
   <title>Emoji Drop</title>
+  <script src="pathseg.js"></script>
   <script type="module" src="index.mts"></script>
+  <style>
+    svg { display: none }
+  </style>
 </head>
 <body>
 <canvas id="canvas"></canvas>
+<svg id="svg">
+  <path id="path-heart"
+        d="M20.1,37.828 L20.072,37.828 C14.906,37.732 0,24.264 0,11.508 C0,5.38 5.05,0 10.806,0 C15.386,0 18.466,3.16 20.098,5.46 C21.726,3.164 24.806,8.8817842e-16 29.388,8.8817842e-16 C35.148,8.8817842e-16 40.196,5.38 40.196,11.51 C40.196,24.262 25.288,37.73 20.122,37.824 L20.1,37.824 L20.1,37.828 Z"></path>
+</svg>
 </body>
 </html>
diff --git a/index.mts b/index.mts
@@ -6,6 +6,9 @@ const canvas = document.getElementById('canvas') as HTMLCanvasElement
 canvas.width = 791;
 canvas.height = 500;
 
+const heartPath = document.getElementById('path-heart');
+const heartVertices = Svg.pathToVertices(heartPath, 1)
+
 const engine = Engine.create();
 
 const render = Render.create({
@@ -30,9 +33,9 @@ Render.run(render);
 const runner = Runner.create();
 Runner.run(runner, engine);
 
-for (let i = 0; i < 10; i++) {
+for (let i = 0; i < 20; i++) {
   setTimeout(() => {
-    const body = Bodies.rectangle(150 + i*50, 0, 40, 40);
+    const body = createHeartBall();
     Composite.add(engine.world, [body]);
   }, i * 500)
 }
@@ -84,3 +87,25 @@ function createObstacles(): Body[] {
   }
   return circles;
 }
+
+
+function createHeartBall() {
+  return Bodies.fromVertices(
+    random(300, 491), 0,
+    [heartVertices],
+    {
+      restitution: random(0.5, 0.9),
+      render: {
+        sprite: {
+          texture: "heart.png",
+          xScale: 1,
+          yScale: 1
+        }
+      }
+    }
+  );
+}
+
+function random(a: number, b: number) {
+  return Math.random() * (b - a) + a;
+}