Breakout Game with Javascript
course from Brad Traversy
Features:
canvas drawing
keydown and keyup
requestAnimationFrame()
HTML
rules section hide at the left side with rules button and close button to controlcanvas is a game container with all the drawing
CSS
set the canvas to display blockJS
select elements DOM neededcanvas context with canvas.getContext('2d')
init the current score and drawing brick row and column counts
position x,y,size,moving speed. dx is the position of x-direction. dy is the y-direction
every time clear the context first with canvas width and height
More about canvasrenderingcontext2d.arc() MDN
more about canvasrenderingcontext2d.rect() MDN
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
if the visible is true, give it the background color,if not, transparent
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
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()