Fix: Blocks of multi-line inline elements are too large

src/game/animation/updateBall.ts

@@ -153,69 +153,69 @@ export function updateBallDirectionByCollisionWithBlocks(
       if (!block.remain) {
         continue
       }
-      // bottom edge
-      if (
-        block.rect.left <= collisionPointOnBall.x &&
-        collisionPointOnBall.x <= block.rect.right &&
-        0 <= block.rect.bottom - collisionPointOnBall.y &&
-        block.rect.bottom - collisionPointOnBall.y <=
-          redundancyOfCollisionWithBlocks
-      ) {
-        block.remain = false
-        process.env.NODE_ENV === "development" &&
-          console.log(
-            "block removed by collision with bottom edge:",
-            block.element
-          )
-        return getFlippedVector(currentBallDirection, "vertical")
-      }
-      // top edge
-      if (
-        block.rect.left <= collisionPointOnBall.x &&
-        collisionPointOnBall.x <= block.rect.right &&
-        0 <= collisionPointOnBall.y - block.rect.top &&
-        collisionPointOnBall.y - block.rect.top <=
-          redundancyOfCollisionWithBlocks
-      ) {
-        block.remain = false
-        process.env.NODE_ENV === "development" &&
-          console.log(
-            "block removed by collision with top edge:",
-            block.element
-          )
-        return getFlippedVector(currentBallDirection, "vertical")
-      }
-      // left edge
-      if (
-        0 <= block.rect.left - collisionPointOnBall.x &&
-        block.rect.left - collisionPointOnBall.x <=
-          redundancyOfCollisionWithBlocks &&
-        block.rect.bottom <= collisionPointOnBall.y &&
-        collisionPointOnBall.y <= block.rect.top
-      ) {
-        block.remain = false
-        process.env.NODE_ENV === "development" &&
-          console.log(
-            "block removed by collision with left edge:",
-            block.element
-          )
-        return getFlippedVector(currentBallDirection, "horizontal")
-      }
-      // right edge
-      if (
-        0 <= collisionPointOnBall.x - block.rect.right &&
-        collisionPointOnBall.x - block.rect.right <=
-          redundancyOfCollisionWithBlocks &&
-        block.rect.bottom <= collisionPointOnBall.y &&
-        collisionPointOnBall.y <= block.rect.top
-      ) {
-        block.remain = false
-        process.env.NODE_ENV === "development" &&
-          console.log(
-            "block removed by collision with right edge:",
-            block.element
-          )
-        return getFlippedVector(currentBallDirection, "horizontal")
+      for (let h = 0; h < block.rects.length; h++) {
+        const rect = block.rects[h]
+        // bottom edge
+        if (
+          rect.left <= collisionPointOnBall.x &&
+          collisionPointOnBall.x <= rect.right &&
+          0 <= rect.bottom - collisionPointOnBall.y &&
+          rect.bottom - collisionPointOnBall.y <=
+            redundancyOfCollisionWithBlocks
+        ) {
+          block.remain = false
+          process.env.NODE_ENV === "development" &&
+            console.log(
+              "block removed by collision with bottom edge:",
+              block.element
+            )
+          return getFlippedVector(currentBallDirection, "vertical")
+        }
+        // top edge
+        if (
+          rect.left <= collisionPointOnBall.x &&
+          collisionPointOnBall.x <= rect.right &&
+          0 <= collisionPointOnBall.y - rect.top &&
+          collisionPointOnBall.y - rect.top <= redundancyOfCollisionWithBlocks
+        ) {
+          block.remain = false
+          process.env.NODE_ENV === "development" &&
+            console.log(
+              "block removed by collision with top edge:",
+              block.element
+            )
+          return getFlippedVector(currentBallDirection, "vertical")
+        }
+        // left edge
+        if (
+          0 <= rect.left - collisionPointOnBall.x &&
+          rect.left - collisionPointOnBall.x <= redundancyOfCollisionWithBlocks &&
+          rect.bottom <= collisionPointOnBall.y &&
+          collisionPointOnBall.y <= rect.top
+        ) {
+          block.remain = false
+          process.env.NODE_ENV === "development" &&
+            console.log(
+              "block removed by collision with left edge:",
+              block.element
+            )
+          return getFlippedVector(currentBallDirection, "horizontal")
+        }
+        // right edge
+        if (
+          0 <= collisionPointOnBall.x - rect.right &&
+          collisionPointOnBall.x - rect.right <= redundancyOfCollisionWithBlocks &&
+          rect.bottom <= collisionPointOnBall.y &&
+          collisionPointOnBall.y <= rect.top
+        ) {
+          block.remain = false
+          process.env.NODE_ENV === "development" &&
+            console.log(
+              "block removed by collision with right edge:",
+              block.element
+            )
+          return getFlippedVector(currentBallDirection, "horizontal")
+        }
       }
     }
   }

src/game/animation/updateBlocks.ts

@@ -1,4 +1,4 @@
-import { getRectOfBlock, type Block } from "../object/blocks"
+import { getRectsOfBlock, type Block } from "../object/blocks"
 import type { Scoreboard } from "../object/scoreboard"
 import {
   assert,
@@ -129,7 +129,7 @@ function updatePositionOfRemainingBlocks(blocks: Block[]) {
     if (!blocks[i].remain) {
       return
     }
-    const rect = getRectOfBlock(blocks[i].element)
-    Object.assign(blocks[i], { rect })
+    const rects = getRectsOfBlock(blocks[i].element)
+    Object.assign(blocks[i], { rects })
   }
 }

src/game/object/blocks.ts

@@ -7,16 +7,18 @@ import { getBlockElements } from "./getBlockElements"
 export type Block = {
   uuid: string
   element: Element // this includes not only HTMLElement but also others like SVGElement.
-  rect: {
-    top: number
-    bottom: number
-    left: number
-    right: number
-  }
+  rects: Rect[]
   remain: boolean
   removed: boolean
 }
 
+export type Rect = {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
 export function getBlocks(): Block[] {
   return getBlockElements().map(convertElementToBlock)
 }
@@ -27,42 +29,34 @@ function convertElementToBlock(element: Element): Block {
     // e.g. http://abehiroshi.la.coocan.jp/
     uuid: Math.random().toString(36).slice(-8),
     element,
-    rect: getRectOfBlock(element),
+    rects: getRectsOfBlock(element),
     remain: true,
     removed: false
   }
 }
 
-export function getRectOfBlock(element: Element) {
-  const __rect = element.getBoundingClientRect()
-  const _rect = {
-    top: __rect.top,
-    bottom: __rect.bottom,
-    left: __rect.left,
-    right: __rect.right
-  }
-
-  const offsetAddedRect = addFrameOffsetToRect(element, _rect)
-
-  const rect = {
-    top: window.innerHeight - offsetAddedRect.top,
-    bottom: window.innerHeight - offsetAddedRect.bottom,
-    left: offsetAddedRect.left,
-    right: offsetAddedRect.right
+export function getRectsOfBlock(element: Element): Rect[] {
+  const result: Rect[] = [];
+  const rects = element.getClientRects();
+  for (let i = 0; i < rects.length; i++) {
+    const { top, bottom, left, right } = rects[i];
+    const rect = { top, bottom, left, right }
+    const offsetAddedRect = addFrameOffsetToRect(element, rect)
+    result.push({
+      top: window.innerHeight - offsetAddedRect.top,
+      bottom: window.innerHeight - offsetAddedRect.bottom,
+      left: offsetAddedRect.left,
+      right: offsetAddedRect.right
+    });
   }
-
-  return rect
+  return result;
 }
 
 function addFrameOffsetToRect(
   element: Element,
-  rect: {
-    top: number
-    bottom: number
-    left: number
-    right: number
-  }
-) {
+  rect: Rect
+): Rect {
+  const result = { ...rect };
   let currentOwnerDocument: Document | null = element.ownerDocument
   assert(!!window.top, "window.top not found")
   while (currentOwnerDocument && currentOwnerDocument !== window.top.document) {
@@ -72,13 +66,13 @@ function addFrameOffsetToRect(
       throw new Error("srcFrameRect not found")
     }
 
-    rect.top += _srcFrameRect.top
-    rect.bottom += _srcFrameRect.top
-    rect.left += _srcFrameRect.left
-    rect.right += _srcFrameRect.left
+    result.top += _srcFrameRect.top
+    result.bottom += _srcFrameRect.top
+    result.left += _srcFrameRect.left
+    result.right += _srcFrameRect.left
 
     currentOwnerDocument =
       currentOwnerDocument.defaultView?.frameElement?.ownerDocument || null
   }
-  return rect
+  return result
 }