A simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 <canvas>.
The original game used "document.location.reload()" method when a player won or lost the game and would refresh the page. Since I wanted to embed this game in a landing page with other games and elements I didn't want a full page reload every time someone played. My workaround for this involved creating a reset() function that called a reloadVars() function that reset all global variables to their initial value and added the overlay to the canvas - which serves as the game title and a 'start game' button.
I added a random color generator for the bricks and a random starting trajectory (right or left) for the ball. Since I used a custom image for the ball, I had to offset the x and y position to match the image. Originally the game's x and y position were at the center of the ball but I offset this to be at the top. As you play, you will notice this in how the ball behaves when it collides and "breaks" the bricks.
Tutorial Link: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
