Start with a predictable paddle
Cosmic Breakout places an 80-pixel paddle near the bottom of a 400-pixel board. Its paddle variable stores the left edge, not the center. Keyboard movement is 300 pixels per second, and the clamp from 0 to 320 keeps the entire paddle on the board. Mouse and touch positions are converted from the displayed canvas size into the same internal coordinate system.
Play a round using only the keyboard before editing. Then try pointer control. Both paths should reach the same left and right limits. If you later widen the paddle to 100 pixels, update the drawing width, the clamp, the pointer centering, and the collision math together. A visual change alone does not change the hitbox.
Read the bounce calculation
The paddle's center is paddle + 40. Subtracting it from the ball position and dividing by 40 produces an offset around zero. A center hit sends the ball mostly upward; an edge hit adds more sideways movement. This is the existing calculation, spaced out for reading:
const offset = (ball.x - paddle - 40) / 40;
ball.vx = offset * 220;
ball.vy = -Math.sqrt(Math.max(18000,
260 * 260 - ball.vx * ball.vx));The negative vertical velocity sends the ball upward. The square-root expression aims for a consistent total speed while keeping enough vertical movement near the edges. The lower bound also prevents an invalid square root if you experiment with larger sideways values. It is a small arcade response, rather than a general physics simulation.
Try one controlled adjustment
Change the 220 multiplier to 160 for gentler sideways bounces. Leave 260 and 18000 as they are for this experiment. Hit the center, the middle of each half, and both edges. Record whether you can deliberately aim at the last few bricks. A faster ball can feel exciting but make those final shots frustrating.
If you want the ball to stay moving sideways after a perfect center hit, introduce a small minimum horizontal speed with an explicit direction choice. Do not simply add a positive amount to every bounce: that would bias play toward the right side of the board.
Separate collision from repeated overlap
The original paddle check only runs while the ball moves down. It also checks the previous vertical position and moves the ball above the paddle after a hit. These details prevent the ball from flipping direction repeatedly while overlapping the paddle. A broad rectangle-overlap test without movement direction can accidentally bounce a ball off the underside.
Brick hits turn an alive brick off, add 10 points, reverse vertical velocity, and move the ball outside that brick. The starter checks the ball in three smaller movement steps per frame. Substeps reduce the chance of skipping thin objects, although they do not guarantee correct collisions at every possible speed. Keep speed changes modest unless you also implement a swept collision test.
Debug an awkward final brick
If a ball appears trapped on a repeated path, inspect vx and vy in the browser debugger. A nearly vertical path often comes from a center hit; a nearly horizontal path comes from an aggressive sideways setting. Test the rule itself before moving bricks to hide the symptom.
- Clear the original 28-brick board; the final score should be 280.
- Miss the paddle on each side and confirm the loss message appears.
- Restart while the ball moves and confirm all bricks return.
- Resize the page, then steer to each edge using a pointer.
A useful extension is a second brick layout. Keep layout creation inside reset, and preserve each brick's alive field so the completion check still works. Start with layout changes before introducing lives, power-ups, and multiple balls.