settingsAccountsettings
Menusettings

Q: Brick breaker game with JavaScript + HTML + Canvas

+2 votes

I need to create a game: Brick breaker game with:

  • JavaScript
  • HTML
  • Canvas

It must consist of bricks and a ball on a paddle must destroy them;

See the screenshot provided. Thanks

brick breaker ball game with javascript HTML and Canvas

asked in JavaScript category by user hues
retagged by user golearnweb

1 Answer

+1 vote

>> HERE IS THE GAME ONLINE << (GitHub io page)


See the game in action HERE

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
   <!-- To disable zooming , I have setup my viewport so that it is not user scalable -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Game Arima</title>
   <META NAME="robots" CONTENT="noindex, nofollow">


   <link rel="stylesheet prefetch" type="text/css" href="css/game.css">
   <script src="js/game.js" defer></script>
   
</head>

<body>
<canvas id="myCanvas" width="500" height="500"></canvas>

</body>
</html>

CSS file:

body{
background-color:#fff;
}

#myCanvas
{
    display: block;
    margin: 0 auto;
	margin-top:10px;
	background-image: url("http://arima.bg/game/game.jpg");
	/*background-color:#2A2927;*/
    border-radius: 10px;
	border-bottom:35px solid #C2AA83;
	box-shadow: 3px 3px 0px #888888;
	padding-top:25px;
}

JavaScript file:

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");

var x=canvas.width/2;
var y=canvas.height-80;
var paddleHeight=10;
var paddleWidth=75;
var paddleX=(canvas.width-paddleWidth)/2;
var rightPressed=false;  // Whether right control button is pressed
var leftPressed=false;  // Whether left control button is pressed
var ballRadius=10;
var brickRowCount=7;
var brickColumnCount=5;

var count=brickRowCount*brickColumnCount;
var rem=count;

var score = 0;
var lives = 50;  // How many lives player has to complete the game

var brickWidth=80;
var brickHeight=20;
var brickPadding=7;
var brickOffsetTop=30;
var brickOffsetLeft=40;
var speedup1=0;
var speedup2=0;
var speedup3=0;
var speedup4=0;
var speedup5=0;
var speedup6=0;
var speedup7=0;

var bricks=[];
for(c=0;c<brickColumnCount;++c){
  bricks[c]=[];
  for(r=0;r<brickRowCount;++r){
    bricks[c][r]={x:0,y:0,status:1};
  }

}

var dx=3.5;
var dy=-3.5;

function drawBall(){

  ctx.beginPath();
  ctx.arc(x,y,ballRadius,0,Math.PI*2);
  ctx.fillStyle="#fff";
  ctx.fillStroke="#fff";
  ctx.stroke="10";
  ctx.fill();
  ctx.closePath();
}

function drawPaddle(){

  ctx.beginPath();
  ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
  ctx.fillStyle="#00ffff";
  ctx.fill();
  ctx.closePath();

}

function drawBricks(){

  for(c=0;c<brickColumnCount;++c){
    for(r=0;r<brickRowCount;++r){
       if(bricks[c][r].status==1){

         var brickX=(c*(brickWidth+brickPadding))+brickOffsetLeft;
         var brickY=(r*(brickHeight+brickPadding))+brickOffsetTop;
         bricks[c][r].x=brickX;
         bricks[c][r].y=brickY;
         ctx.beginPath();
         ctx.rect(brickX,brickY,brickWidth,brickHeight);
         if(c%2!=0)
           ctx.fillStyle="#fff";
         else
           ctx.fillStyle="#C2AA83";
         ctx.fill();
         ctx.closePath();

      }
    }
  }

}
function collisionDetection(){

  for(c=0;c<brickColumnCount;++c){

    for(r=0;r<brickRowCount;++r){

       var b=bricks[c][r];

       if(b.status==1){

          if(x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
             var snd=new Audio("./music/paddleBall.wav");
             snd.play();
             dy=-dy;
             b.status=0;
             score++;
             count--;
             /*** Change color of ball when it hits a brick ****/
             ctx.beginPath();
             ctx.arc(x,y,ballRadius,0,Math.PI*2);
             ctx.fillStyle="#00ffff";
             ctx.fillStroke="#00ffff";
             ctx.stroke="10";
             ctx.fill();
             ctx.closePath();
             /**************************************************/
             /*** If count of total bricks decreases to 30
                  Increase the speed of ball ***/
                  if(count<=(rem-rem/7) && speedup1==0){
                     if(dy<0)
                       dy-=0.5;
                     else
                       dy+=0.5;
                     if(dx<0)
                      dx-=0.5;
                     else
                       dx+=0.5;
                     paddleWidth+=2;
                     speedup1=1;
                  }
             /*** If count of total bricks decreases to 20
                  Increase the speed of ball and increase paddleWidth***/
                  if(count<=(rem-2*rem/7) && speedup2==0){
                     if(dy<0)
                       dy-=1;
                     else
                       dy+=1;
                     if(dx<0)
                       dx-=1;
                     else
                       dx+=1;


                     paddleWidth+=3;
                     speedup2=1;
                  }
             /*** If count of total bricks decreases to 10
                  Increase the speed of ball ******/
                  if(count<=(rem-3*rem/7) && speedup3==0){
                     if(dy<0)
                       dy-=1;
                     else
                       dy+=1;
                     if(dx<0)
                       dx-=1;
                     else
                       dx+=1;

                     paddleWidth+=4;
                     speedup3=1;
                  }

                  if(count<=(rem-4*rem/7) && speedup4==0){

                    if(dy<0)
                      dy-=1;
                    else
                      dy+=1;
                    if(dx<0)
                      dx-=1;
                    else
                      dx+=1;
                     paddleWidth+=5;
                     speedup4=1;

                  }

                  if(count<=(rem-5*rem/7) && speedup5==0){

                     if(dy<0)
                       dy-=1;
                     else
                      dy+=1;
                     if(dx<0)
                       dx-=1;
                     else
                      dx+=1;
                     paddleWidth+=6;
                     speedup5=1;

                  }

                  if(count<=(rem-6*rem/7) && speedup6==0){

                    if(dy<0)
                      dy-=1;
                    else
                      dy+=1;
                    if(dx<0)
                      dx-=1;
                    else
                      dx+=1;
                     paddleWidth+=7;
                     speedup6=1;

                  }



                  if(count<=20){

                     alert("You WON!!! Good job champ!");
                     document.location.reload();
                  }
          }

      }

    }

  }

}

function drawScore(){

   ctx.font="18px Arial";
   ctx.fillStyle="#fff";
   ctx.fillText("score: "+score,40,20);
//   console.log(parseInt(brickRowCount)*parseInt(brickColumnCount)-parseInt(count));

}

function drawLives() {
    ctx.font = "18px Arial";
    ctx.fillStyle = "#fff";
    ctx.fillText("ARIMA'S GAME                lives: "+lives, canvas.width-310, 20);
}

function draw(){

    ctx.clearRect(0,0,canvas.width,canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();

    collisionDetection();


    if(y+dy<ballRadius)
      dy=-dy;
    else if(y+dy>canvas.height-ballRadius){

       if(x>=paddleX && x<=paddleX+paddleWidth){

          var snd=new Audio("./music/paddleBall2.wav");
          snd.play();
          dy=-dy;

       }
       else{
          lives--;
          if(!lives) {
            alert("Sorry, you've lost...\nTry again! :-)");
            document.location.reload();

          }
          else{
            x=canvas.width/2;
            y = canvas.height-30;
            paddleWidth=80;
            rem=count;
            paddleX=(canvas.width-paddleWidth)/2;
           }
      }


    }
    else
      y+=dy;

    if(x+dx<ballRadius || x+dx>canvas.width-ballRadius)
       dx=-dx;
    else
       x+=dx;

    if(rightPressed && paddleX<canvas.width-paddleWidth)
       paddleX+=7;
    else if(leftPressed && paddleX>0)
       paddleX-=7;



}

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;
   if(e.keyCode==37)
     leftPressed=false;

}

function mouseMoveHandler(e){

  var relativeX=e.clientX-canvas.offsetLeft;

  if(relativeX>0 && relativeX<canvas.width){

     if((relativeX-paddleWidth/2>=0) && (relativeX-paddleWidth/2<=(canvas.width-paddleWidth)))
        paddleX=relativeX-paddleWidth/2;

  }


}

document.addEventListener("keydown",keyDownHandler,false);
document.addEventListener("keyup",keyUpHandler,false);
document.addEventListener("mousemove", mouseMoveHandler, false);


setInterval(draw,20);
answered by user sam
edited by user golearnweb
...