Breakout Game with Javascript

 

course from Brad Traversy

Github code

Features:

canvas drawing 

keydown and keyup

requestAnimationFrame()

HTML

rules section hide at the left side with rules button and close button to control

canvas is a game container with all the drawing

CSS

set the canvas to display block

side rules lay at the left side and transform with x-axis when adding the class name show

JS

select elements DOM needed

canvas context with canvas.getContext('2d')

init the current score and drawing brick row and column counts

init the data of ball, paddle, and bricks

position x,y,size,moving speed. dx is the position of x-direction. dy is the y-direction

First, drawing all the shapes on the canvas. ball, paddle, score, and bricks

every time clear the context first with canvas width and height

drawBall() with ctx.arc(x,y,radius,start angle,end angle) 

More about canvasrenderingcontext2d.arc() MDN

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

drawPaddle() with rect()

more about canvasrenderingcontext2d.rect() MDN

ctx.rect(x, y, width, height);

drawScore() with fillText()

more about canvasrenderingcontext2d.fillText() MDN

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

store all the bricks in the array. the bricks are a grid blocks

with for...loop the row of bricks and column of bricks to calc each brick of x and y,then store in the bricks array with brickInfo

drawBricks() with rect() with the width,height and x,y position 

if the visible is true, give it the background color,if not, transparent

After drawing the canvas, it's time to move the ball and paddle

with requestAnimationFrame() to run the animation

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

more about requestAnimationFrame() MDN

the x-axis of the paddle added the changed x 

if hit the right side of the wall, which the position x of paddle and width of paddle larger than the width of the canvas, paddle x should stay in canvas

if hit the left side of the wall which the x of the paddle is smaller than 0, then stay in 0

moving ball should consider the situations like hitting the wall, hitting the paddle and hitting the bricks

when the ball hit the wall with the x-axis or y-axis, the direction change

if the ball hit the paddle, the direction changes

when hitting the brick, the direction changes and the brick is invisible,then incresing the score

when the ball hit the outside of paddle, restart the game with brick refreshed and score reset

when all the bricks are disappeared, reset the game with showAllBricks()

when all the brick is visible, the rectangular fill with color

to manipulate the paddle,with the left and right keys.

when keydown, the moving x changed with speed

when keuup, the moving x stop

events 

show the rules with toggle class