Breaking out of the routine… by doing the same thing

/**
 * A representation of a rectangle with a colour.
 * @class
 * @augments module:box~Box
 */
class Block extends Box {
	/** 
	 * The block's colour.
	 * @type {String} 
	 * @default #027cb0
	 */
	colour = "#027cb0";
	/**
	 * Create a Block.
	 * Origin of coordinates is at the top left, with x increasing to the right
	 * and y increasing downwards.
	 * @param {Number} [x=0]	  
	 * @param {Number} [y=0]
	 * @param {Number} [width=0]		Cannot be a negative number.
	 * @param {Number} [height=0]	   Cannot be a negative number.
	 * @param {String} [colour=#027cb0] A colour value.
	 */
	constructor( x = 0, y = 0, width = 0, height = 0, colour = "#027cb0" ) {
		super( x, y, width, height );
		this.colour = colour;
	}
}

/**
 * Calculate the box resulting from an intersection of two boxes.
 * @param  {module:box~Box} box1 
 * @param  {module:box~Box} box2
 * @return {(module:box~Box)?}
 * @example <caption>Colliding boxes</caption>
 * const box1 = new Box(  0,  0, 20, 20 );
 * const box2 = new Box( 10, 10, 20, 20 );
 * const box3 = Box.intersect( box1, box2 );
 * box3.bounding; // is `{ x: 10, y: 10, width: 10, height: 10 }`
 * @see {@link module:box~Box#intersect|box.intersect() dynamic method}
 */
static intersect( box1, box2 ) {
	if ( !Box.areColliding( box1, box2 ) ) { return null; }
	const minX = Math.max( box1.minX, box2.minX );
	const minY = Math.max( box1.minY, box2.minY );
	const maxX = Math.min( box1.maxX, box2.maxX );
	const maxY = Math.min( box1.maxY, box2.maxY );
	return Box.createFromObject( {
		x: minX, 
		y: minY,
		width: ( maxX - minX ),
		height: ( maxY - minY )
	} );
}

/**
 * Determine if the box is completely inside `anotherBox`.
 * @param  {module:box~Box} anotherBox
 * @return {Boolean}
 * @example <caption>Box in a box</caption>
 * const box1 = new Box(  0,  0, 30, 30 );
 * const box2 = new Box( 10, 10, 10, 10 );
 * box2.isInside( box1 ); // is `true` 
 * box1.isInside( box2 ); // is `false` 
 */
isInside( anotherBox ) { 
	return (  
		   ( this.minX >= anotherBox.minX )
		&& ( this.maxX <= anotherBox.maxX )
		&& ( this.minY >= anotherBox.minY )
		&& ( this.maxY <= anotherBox.maxY )
	);
}

/**
 * A controller for an arcade game.
 * @class
 */
class PaddleAndBallGame {
	// All the code goes here.
}

/** 
 * The `canvas` element to render the game in.
 * @type {HTMLCanvasElement?}
 */
#canvas = null;
/** 
 * The [`canvas`]{@link PaddleAndBallGame#canvas}' 2d context.
 * @type {CanvasRenderingContext2D?}
 */
#context = null;

/** 
 * The `Block` describing the playing field. 
 * @type {Block?} 
 */
#field = null;

/** 
 * The `Block` describing the paddle. 
 * @type {Block?} 
 */
#paddle = null;

/** 
 * The `Block` describing the ball. 
 * @type {Block?} 
 */
#ball = null;
/** 
 * The ball's velocity vector.
 * @type {Object} 
 * @default { x: 2.8284, y: -2.8284 }
 */
#ballVelocity = {
	x:  4 * Math.cos( Math.PI / 4 ),
	y: -4 * Math.sin( Math.PI / 4 )
};

/** 
 * The collection of `Block` bricks to be destroyed.
 * @type {Block[]} 
 */
#bricks = [];

/** 
 * Minimum duration of a frame. Inversely proportional to the maximum framerate.
 * For example, a 60 FPS limit implies a minFrameDuration of 1000 / 60 ≈ 16.667
 * @type {Number} 
 * @default 16.667
 */
#minFrameDuration = 1000 / 60; // Inverse of 60 frames per thousand miliseconds
/** 
 * The last timestamp a frame was processed at. 
 * @type {Number} 
 */
#previousFrameTimestamp = 0;

/**
 * The requestAnimationFrame identifier.
 * @type {Number}
 */
#requestAnimationFrameId = 0;

/** 
 * Flags when the game is paused, i.e., when ball and paddle do not move.
 * Plus, an informational text overlay will be shown, with the game's stats
 * and instructions to continue playing.
 * @type {Boolean} 
 */
#isPaused = true;
/** 
 * Flags when the game is over, regardless of the cause.
 * @type {Boolean} 
 */
#isGameOver = false;

/**
 * The `mouseup` event handler.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function handleMouseUp
 * @param {MouseEvent} mouseUpEvent 
 */
#handleMouseUp = function( mouseUpEvent ) {  };
/**
 * The `mousemove` event handler.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function handleMouseMove
 * @param {MouseEvent} mouseMoveEvent 
 */
#handleMouseMove = function( mouseMoveEvent ) {  };

/** 
 * Set up the `canvas` element.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function setUpCanvasAndContext
 * @param {HTMLCanvasElement} canvas
 */
#setUpCanvasAndContext( canvas ) {

	const boundingClientRect = canvas.getBoundingClientRect();
	canvas.width = boundingClientRect.width;
	canvas.height = boundingClientRect.height;

	this.#canvas = canvas;

	const contextAttributes = { alpha: false, desynchronized: false };
	this.#context = this.#canvas.getContext( "2d", contextAttributes );

}

/** 
 * Create the game's field. 
 * @memberof PaddleAndBallGame#
 * @access private
 * @function createField
 * @param {String} [colour=#000]
 */
#createField( colour ) {
	this.#field = new Block( 
		0, 0, this.#canvas.width, this.#canvas.height, colour 
	);
}

/** 
 * Create the game's paddle. 
 * @memberof PaddleAndBallGame#
 * @access private
 * @function createPaddle
 * @param {String} [colour=#f90]
 */
#createPaddle( colour = "#f90" ) {
	const width = this.#canvas.width / 10; // In proportion to the canvas' width
	const height = width * 9 / 32;		 // Use an elongated aspect ratio
	this.#paddle = new Block( 
		( this.#canvas.width - width ) / 2,  // Centered horizontally
		this.#canvas.height - height * 3,	// Leaving some space from the bottom
		width, 
		height,
		colour							  
	);
}

/** 
 * Create the game's ball and set its speed.
 * Requires [`createPaddle`](PaddleAndBallGame#createPaddle) to have been run first.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function createBall
 * @param {String} [colour=#fff]
 */
#createBall( colour = "#fff" ) {
	const radius = Math.min( this.#canvas.width, this.#canvas.height ) / 60;
	const length = Math.sqrt( Math.PI * Math.pow( radius, 2 ) );
	this.#ball = new Block( 
		this.#paddle.x + ( this.#paddle.width - length ) / 2, // Center over paddle
		this.#paddle.y - length - 1, // 1px separation to avoid collision
		length, 
		length,
		colour
	);
	const ballVelocityMagnitude = this.#canvas.height / 60;
	const piFourth = Math.PI / 4;
	this.#ballVelocity = {
		x:  ballVelocityMagnitude * Math.cos( piFourth ),
		y: -ballVelocityMagnitude * Math.sin( piFourth )
	};
}

	/**
	 * Create the bricks' boxes.
	 * @memberof PaddleAndBallGame#
   * @access private
	 * @function createBricks
	 * @param {Number} [numberOfColumns=15]
	 * @param {Number} [numberOfRows=6]
	 */
	#createBricks( numberOfColumns = 15, numberOfRows = 6 ) {

		this.#bricks = [];

		const bricksWidth = this.#canvas.width * 0.75; // Use 75% of the canvas' width
		const bricksXOffset = ( this.#canvas.width - bricksWidth ) / 2;
		const bricksYOffset = this.#canvas.height * 0.05; // Leave 5% vertical space

		const brickWidth = bricksWidth / numberOfColumns; // Individual brick width
		const brickHeight = brickWidth * 9 / 16; // Use a convenient aspect ratio

		const numberOfColours = Math.floor( 1.25 * numberOfRows );
		const colours = PaddleAndBallGame.#generateColourCycle( numberOfColours );

		for( let r = numberOfRows - 1; r >= 0; r = r - 1 ) {
			for ( let c  = numberOfColumns - 1; c >= 0; c = c - 1 ) {
				this.#bricks.push( new Block(
					bricksXOffset + c * brickWidth, 
					bricksYOffset + r * brickHeight, 
					brickWidth, 
					brickHeight,
					colours[ r ]
				) );
			}
		}

	}

/** 
 * Initialise all of the game's required elements.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function createElements
 */
#createElements() {
	this.#field = new Block( 
		0, 0, this.#canvas.width, this.#canvas.height, "#000"
	);
	this.#createPaddle(); // Default colour: #f90
	this.#createBall();   // Default colour: #fff
	this.#createBricks(); // Default columns×rows: 15×6
}

/** 
 * Draw an overlay with information relevant to the game's state.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function paintPauseOverlay
 */
#paintPauseOverlay() {
	if ( !this.#isPaused ) { return; }
	if ( !this.#isGameOver ) {
		// TODO: Show current score and instructions to resume game. For example: 
		// "There are 37 out of 90 bricks left."
		// "Click on the game to play."
		return;
	}
	if ( this.#bricks.length === 0 ) {
		// TODO: Show "YOU WON!" message, and instructionts to play again.
		return;
	}
	// TODO: Show "GAME OVER" message, and instructionts to play again.
}

/** 
 * Draw all elements on the canvas.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function paintFrame
 */
#paintFrame() {

	this.#context.fillStyle = this.#field.colour;
	this.#context.fillRect( ...this.#field.rect );

	this.#context.fillStyle = this.#paddle.colour;
	this.#context.fillRect( ...this.#paddle.rect );

	this.#context.fillStyle = this.#ball.colour;
	this.#context.fillRect( ...this.#ball.rect );

	this.#context.strokeStyle = this.#field.colour;
	for( let b = this.#bricks.length - 1; b >= 0; b = b - 1 ) {
		const brick = this.#bricks[ b ];
		// Paint brick body.
		this.#context.fillStyle = brick.colour;
		this.#context.fillRect( ...brick.rect );
		// Add contour to visually separate brick from adjacent elements.
		this.#context.beginPath();
		this.#context.rect( ...brick.rect );
		this.#context.stroke();
	}

	this.#paintPauseOverlay();

}

/**
 * Handle the main animation loop.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function handleAnimationFrame
 * @param {Number} timestamp 
 */
#handleAnimationFrame( timestamp ) {
	const handler = this.#handleAnimationFrame.bind( this );
	this.#requestAnimationFrameId = window.requestAnimationFrame( handler );
	if ( timestamp - this.#previousFrameTimestamp < this.#minFrameDuration ) {
		return;
	}
	this.#previousFrameTimestamp = timestamp;
	// TODO: Update the game's state to the next frame
	this.#paintFrame();
}

/**
 * Create a new Paddle and Ball game.
 * @param {HTMLCanvasElement} canvas The `canvas` where the game will be rendered.
 */
constructor( canvas ) {
	
	if ( !( canvas instanceof HTMLCanvasElement ) ) { 
		console.error( "Game requires a canvas element" );
		return; 
	}
	this.#setUpCanvasAndContext();

	this.#createElements();

	// TODO: Bind inputs to control the paddle and pause/unpause

	const handler = this.#handleAnimationFrame.bind( this );
	this.#requestAnimationFrameId = window.requestAnimationFrame( handler );

}

/** 
 * Update the state of the game's objects.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function updateGameState
 */
#updateGameState() {

	if ( this.#isPaused ) { return; }

	// Move ball
	this.#ball.x += this.#ballVelocity.x;
	this.#ball.y += this.#ballVelocity.y;

	// TODO: Check and account for ball vs. wall collision, 
	// updating this.#isGameOver. Something like:
	// this.#isGameOver = this.#processBallVsWallCollision();
	if ( this.#isGameOver ) { 
		this.#isPaused = true; 
		return;
	}

	// TODO: Check and account for ball vs. paddle collision. Something like:
	// this.#processBallVsPaddleCollision();

	// TODO: Check and account for ball vs. brick collision, 
	// updating this.#isGameOver. Something like:
	// this.#isGameOver = this.#processBallVsBrickCollision();
	if ( this.#isGameOver ) { this.#isPaused = true; }

}

/** 
 * Check if the ball is colliding with a wall and react accordingly.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function processBallVsWallCollision
 * @return {Boolean} `true` if the ball has hit the bottom of the field.
 */
#processBallVsWallCollision() {
	// Early exit if the ball has not exceeded the field limits.
	if ( this.#ball.isInside( this.#field ) ) { return false; }
	// Check for GAME OVER condition
	if ( this.#ball.maxY >= this.#field.maxY ) { return true; }
	// Check for collision against the left or right boundaries
	if (
		   ( this.#ball.minX <= this.#field.minX )
		|| ( this.#ball.maxX >= this.#field.maxX )
	) {
		this.#ballVelocity.x *= -1;
		this.#ball.x += this.#ballVelocity.x; // Put ball back inside field
	}
	// Check for collision against the top boundary
	if ( this.#ball.minY <= this.#field.minY ) {
		this.#ballVelocity.y *= -1;
		this.#ball.y += this.#ballVelocity.y; // Put ball back inside field
	}
}

/** 
 * Check if the ball is colliding with a brick and react accordingly.
 * If the ball is colliding with multiple bricks, it only considers the brick
 * that has a bigger intersection area.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function processBallVsBricksCollision
 * @return {Boolean} `true` if the all bricks have been destroyed.
 */
#processBallVsBricksCollision() {
	const numberOfBricks = this.#bricks.length;
	if ( numberOfBricks === 0 ) { return true; } // Signal Game Over
	// Determine the brick that has the biggest intersection area with the ball.
	let collidedBrickIdx = -1;
	let collisionArea = 0;
	for( let b = numberOfBricks - 1; b >= 0; b = b - 1 ) {
		const intersection = this.#bricks[ b ].intersect( this.#ball );
		if ( !intersection ) { continue; }
		if ( intersection.area >= collisionArea ) {
			collidedBrickIdx = b;
			collisionArea = intersection.area;
		}
	}
	// If none is found, the ball has not hit any bricks.
	if ( collidedBrickIdx == -1 ) { return false; }
	// Revert the ball's position.
	this.#ball.x -= this.#ballVelocity.x;
	this.#ball.y -= this.#ballVelocity.y;
	// Determine the rebound for the ball's position relative to the brick.
	const brick = this.#bricks[ collidedBrickIdx ];
	if ( this.#ball.isLeft( brick ) || this.#ball.isRight( brick ) ) {
		this.#ballVelocity.x *= -1;
	}
	if ( this.#ball.isAbove( brick ) || this.#ball.isBelow( brick ) ) {
		this.#ballVelocity.y *= -1;
	}
	// Remove brick from collection.
	this.#bricks.splice( collidedBrickIdx, 1 );
	// Signal Game Over (when one brick was left and has been destroyed)
	return ( numberOfBricks === 1 );
}

/** 
 * Check if the paddle has hit the ball (or viceversa) and react accordingly.
 * The paddle will change the ball's movement direction in a degree relative
 * to the impact position.
 * @memberof PaddleAndBallGame#
 * @access private
 * @function processBallVsPaddleCollision
 * @return {Boolean} `true` if paddle and ball have collided
 */
#processBallVsPaddleCollision() {

	const intersection = this.#ball.intersect( this.#paddle );

	// Early exit if the ball has not hit the paddle (or viceversa).
	if ( !intersection ) { return false; }

	// Push the ball above the paddle
	this.#ball.y -= intersection.height; 

	// Determine constant values
	const DEG2RAD = Math.PI / 180; // Truly constant, hence uppercase
	const velocityMagnitude = Math.sqrt(
			Math.pow( this.#ballVelocity.x, 2 )
		+ Math.pow( this.#ballVelocity.y, 2 )
	);

	// Determine reference x coordinates
	const halfBallWidth = this.#ball.width / 2;
	const ballMiddleX = ( this.#ball.x + halfBallWidth );
	const halfPaddleWidth = this.#paddle.width / 2
	const paddleMiddleX = ( this.#paddle.x + halfPaddleWidth );
	// Determine in which side of the paddle is the point of impact
	const hasHitLeft = ballMiddleX < paddleMiddleX;

	// Determine the new direction's angle range. Remember, `y` values increase
	// from the top to the bottom, so the angles that point "up" in the screen
	// are those that have a negative sine, between 180° and 360°.
	const minAngle = ( hasHitLeft ? 200 : 290 ) * DEG2RAD;
	const maxAngle = ( hasHitLeft ? 250 : 340 ) * DEG2RAD;

	// Establish the extrema of the ball's position relative to the segment
	const segmentMinX = hasHitLeft 
		? ( this.#paddle.x - halfBallWidth )
		: paddleMiddleX
	;
	const segmentMaxX = hasHitLeft 
		? paddleMiddleX
		: ( this.#paddle.maxX + halfBallWidth )
	;

	let perunit = ( ballMiddleX - segmentMinX ) / ( segmentMaxX - segmentMinX );
	if ( perunit < 0 ) { perunit = 0; }
	if ( perunit > 1 ) { perunit = 1; }
	
	// LERP
	const angle = minAngle + perunit * ( maxAngle - minAngle );

	this.#ballVelocity.x = velocityMagnitude * Math.cos( angle );
	this.#ballVelocity.y = velocityMagnitude * Math.sin( angle );

	return true;
	
}

/**
 * Start/pause the game. 
 * @memberof PaddleAndBallGame#
 * @access private
 * @function onMouseUp
 * @param {MouseEvent} mouseUpEvent 
 */
#onMouseUp( mouseUpEvent ) {
	// Pause/unpause
	if ( !this.#isGameOver ) {
		this.#isPaused = !this.#isPaused;
		return;
	}
	// Re-position all the game elements by re-creating them. Not very elegant.
	this.#createElements(); 
	// Restart the game.
	this.#isGameOver = false;
	this.#isPaused = false;
}

/**
 * Move the paddle following the mouse. 
 * @memberof PaddleAndBallGame#
 * @access private
 * @function onMouseMove
 * @param {MouseEvent} mouseMoveEvent 
 */
#onMouseMove( mouseMoveEvent ) {
	if (
		   this.#isPaused
		|| ( 
			   this.#ball.isBelow( this.#paddle ) 
			&& ( 
				   this.#ball.isLeft( this.#paddle ) 
				|| this.#ball.isRight( this.#paddle ) 
			)
		) 
	) { 
		return true; 
	}
	const maxX = this.#canvas.width - this.#paddle.width;
	const canvasClientX = this.#canvas.getBoundingClientRect().x;
	let x = mouseEvent.clientX - canvasClientX - this.#paddle.width / 2;
	if ( x < 0 ) { x = 0; }
	if ( x > maxX ) { x = maxX; }
	this.#paddle.x = x;
}

/**
 * Bind events to their appropriate handlers. 
 * @memberof PaddleAndBallGame#
 * @access private
 * @function addEventListeners
 */
#addEventListeners() {
	this.#handleMouseUp = this.#onMouseUp.bind( this );
	window.addEventListener( "mouseup", this.#handleMouseUp );
	this.#handleMouseMove = this.#onMouseMove.bind( this );
	window.addEventListener( "mousemove", this.#handleMouseMove );
}

/** A method to free all the game's resources. */
dispose() {
	window.cancelAnimationFrame( this.#requestAnimationFrameId );
	window.removeEventListener( "mousemove", this.#handleMouseMove );
	window.removeEventListener( "mouseup", this.#handleMouseUp );
}