Bad collision

src/components/Amogus/Amogus.tsx

@@ -12,6 +12,9 @@ type Amogus = {
     speedY: number;
 };
 
+const amogusWidth = 70;
+const amogusHeight = 70;
+
 const { innerWidth: width, innerHeight: height } = window;
 
 const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus);
@@ -24,6 +27,9 @@ const makeInitialCrewmates: Amogus[] = () => {
         makeCrewmate(false),
         makeCrewmate(false),
         makeCrewmate(false),
+        makeCrewmate(false),
+        makeCrewmate(false),
+        makeCrewmate(false),
     ];
 };
 
@@ -32,14 +38,15 @@ const randNum: number = (min: number, max: number) =>
 
 const makeCrewmate: Amogus = (imposter: boolean) => ({
     isImposter: imposter,
-    posX: randNum(0, width - 90),
+    posX: randNum(0, width - amogusWidth),
-    posY: randNum(0, height - 120),
+    posY: randNum(0, height - amogusHeight),
-    speedX: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
+    speedX: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
-    speedY: Math.random() > 0.5 ? randNum(5, 15) : randNum(-5, -15),
+    speedY: Math.random() > 0.5 ? randNum(3, 10) : randNum(-3, -10),
 });
 
 const intersect: Bool = (c1: Crewmate, c2: Crewmate) =>
-    Math.abs(c1.posX - c2.posX) < 80 && Math.abs(c1.posY - c2.posY) < 90;
+    Math.abs(c1.posX - c2.posX) < amogusWidth - 20 &&
+    Math.abs(c1.posY - c2.posY) < amogusHeight - 20;
 
 const doMove = (crewmates: Amogus[]) =>
     crewmates.map((c) => ({
@@ -48,16 +55,37 @@ const doMove = (crewmates: Amogus[]) =>
         posY: c.posY + c.speedY,
     }));
 
-const doCollision = (crewmates: Amogus[]) =>
+const doCollisionWalls = (crewmates: Amogus[]) =>
     crewmates.map((c) => {
-        if (c.posX > width - 90) {
+        if (c.posX > width - amogusWidth) {
-            return { ...c, posX: width - 90, speedX: c.speedX * -1 };
+            return {
-        } else if (c.posX < 0) {
+                ...c,
-            return { ...c, posX: 0, speedX: c.speedX * -1 };
+                posX: width - amogusWidth,
-        } else if (c.posY > height - 120) {
+                speedX: c.speedX * -1,
-            return { ...c, posY: height - 120, speedY: c.speedY * -1 };
+            };
-        } else if (c.posY < 0) {
+        } else if (c.posX < -20) {
-            return { ...c, posY: 0, speedY: c.speedY * -1 };
+            return { ...c, posX: -20, speedX: c.speedX * -1 };
+        } else if (c.posY > height - amogusHeight) {
+            return {
+                ...c,
+                posY: height - amogusHeight,
+                speedY: c.speedY * -1,
+            };
+        } else if (c.posY < -20) {
+            return { ...c, posY: -20, speedY: c.speedY * -1 };
+        } else return c;
+    });
+
+const doCollisionOthers = (crewmates: Amogus[]) =>
+    crewmates.map((c) => {
+        const intersections = crewmates
+            .filter((o) => intersect(c, o))
+            .filter((o) => Math.abs(o.posX - c.posX) > 1e-3) // don't collide with yourself pls
+            .filter((o) => Math.abs(o.posY - c.posY) > 1e-3);
+        if (intersections.some((o) => Math.abs(o.posX - c.posX) < 50)) {
+            return { ...c, speedX: c.speedX * -1 };
+        } else if (intersections.some((o) => Math.abs(o.posY - c.posY) < 50)) {
+            return { ...c, speedY: c.speedY * -1 };
         } else return c;
     });
 
@@ -88,7 +116,8 @@ export default function Amogus() {
     useEffect(() => {
         const timer = setInterval(() => {
             setCrewmates((c) => doMove(c));
-            setCrewmates((c) => doCollision(c));
+            setCrewmates((c) => doCollisionWalls(c));
+            setCrewmates((c) => doCollisionOthers(c));
             setCrewmates((c) => doKills(c));
             setCrewmates((c) => checkReset(c));
         }, 50);

src/components/Amogus/style.module.css

@@ -1,4 +1,8 @@
 .container {
     z-index: 100;
     position: absolute;
+    scale: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }