html head title Breakout Game title style body margin 0 padding 0 game width 600px height 400px border 1px solid black position relative paddle width 80px height 10px background color blue position absolute bottom 10px left 260px ball width 10px height 10px background color red position absolute bottom 30px left 295px border radius 50 brick width 50px height 20px background color green position absolute top 50px left 50px margin 5px style head body onload init div id game div id paddle div div id ball div div class brick style top 50px left 50px div div class brick style top 50px left 110px div div class brick style top 50px left 170px div div class brick style top 50px left 230px div div class brick style top 50px left 290px div div class brick style top 50px left 350px div div class brick style top 50px left 410px div div class brick style top 50px left 470px div div class brick style top 50px left 530px div div script var ball document getElementById ball var paddle document getElementById paddle var bricks document getElementsByClassName brick var x 295 var y 50 var dx 2 var dy 2 var paddleX 260 var rightPressed false var leftPressed false var score 0 function init document addEventListener keydown keyDownHandler false document addEventListener keyup keyUpHandler false setInterval draw 10 function draw Move ball x dx y dy Check for collision with walls if x 0 x 590 dx dx if y 390 dy dy if y 0 console log GAME OVER alert GAME OVER document location reload Move paddle if rightPressed paddleX 520 paddleX 7 else if leftPressed paddleX 0 paddleX 7 paddle style left paddleX px Check for collision with paddle if y dy 30 x dx paddleX x dx paddleX 80 dy dy Check for collision with bricks for var i 0 i bricks length i var brick bricks i if brick style display none x dx brick offsetLeft x dx brick offsetLeft brick offsetWidth 370 y dy brick offsetTop 370 y dy brick offsetTop brick offsetHeight dy dy brick style display none score if score bricks length alert YOU WIN document location reload Update ball position ball style left x px ball style bottom y px function keyDownHandler e if e keyCode 39 rightPressed true else if e keyCode 37 leftPressed true function keyUpHandler e if e keyCode 39 rightPressed false else if e keyCode 37 leftPressed false script body html
r false document addEventListener keyup keyUpHandler false setInterval draw 10 function draw Move ball x dx y dy Check for collision with walls if x 0 x 590 dx dx if y 390 dy dy if y 0 console log GAME OVER alert GAME OVER document location reload Move paddle if rightPressed paddleX 520 paddleX 7 else if leftPressed paddleX 0 paddleX 7 paddle style left paddleX px Check for collision with paddle if y dy 30 x dx paddleX x dx paddleX 80 dy dy Check for collision with bricks for var i 0 i bricks length i var brick bricks i if brick style display none x dx brick offsetLeft x dx brick offsetLeft brick offsetWidth 370 y dy brick offsetTop 370 y dy brick offsetTop brick offsetHeight dy dy brick style display none score if score bricks length alert YOU WIN document location reload Update ball position ball style left x px ball style bottom y px function keyDownHandler e if e keyCode 39 rightPressed true else if e keyCode 37 leftPressed true function keyUpHandler e if e keyCode 39 rightPressed false else if e keyCode 37 leftPressed false script body html