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

[igrep]

Problem

Blocks of multi-line inline elements can be broken even if they don't look collided with the ball in some cases.

Here's an example reproduced by the controlMode: "mouse" feature created in https://github.com/canalun/brick-break-anywhere/pull/15, and hard-coding visualizeBlocks: false (checkout my debug branch if you reproduce by yourself):

As you can see, the larger block 12345678901234567890 got broken just as the 12345 got hit.

The source of the screenshot HTML is here.

```html 12345678901234567890 12345 ```

Cause

This is because the blocks of elements are created from the rectangles returned by getBoundingClientRect, which returns only one rectangle from an element. getBoundingClientRect doesn't have a problem with most elements, each of which has only one bounding rectangle. But given a multi-line element, getBoundingClientRect returns an unexpectedly large rectangle including its rightmost bottom edge.

Solution

Use getClientRects instead of getBoundingClientRect to create blocks. It returns all rectangles of elements including multi-line elements.

NOTE

• I recommend you to review with the ignore-spaces mode, and you'll see the changes in updateBall.ts are safe.
• I tested this change only in the example case and my website's top page. Tell me if you think of any side-effect.
• 👍Thanks for reading to the bottom line! This is the last pull request so far. I don't mean I'll stop contributing after this, but I won't do anymore for the time being. 🙇お忙しい中ありがとうございます！お疲れ様です🍵