Skip to content

Commit b951694

Browse files
committed
Add docs for getBoundingClientRect()
1 parent d334ebe commit b951694

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

bootcamp_content/projects/breakout/exercises/take-control/introduction.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ In this exercise we're going to make your nascent Breakout game playable!
44

55
Your job is to add a paddle, which moves as you move your mouse around the screen. The ball should bounce off it, and the game should stop if the ball hits the ground.
66

7+
## The `getBoundingClientRect()` method
8+
9+
For this exercise, you might want to use the [`getBoundingClientRect()` method](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). You can call it on any DOM Element, and that will give you back a [`DOMRect` object](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) with properties like `left` and `width`.
10+
11+
This allows you to work out in pixel values the left and width of your game area (or other components), which might be helpful in understanding where the mouse is relative to the game area.
12+
713
## Instructions
814

915
There's a few steps involved in this:

0 commit comments

Comments
 (0)