2d Break-out game using JavaScript Part-1 (in Hindi)

In this video, we will build a 2d Break-out game using only JavaScript and HTML Canvas. This video is beginner-friendly so if you are starting then you have come to the right place. This video includes a detailed explanation of each and every step. Also after completing this game we will push our code to Github and learn how we can use GitHub pages to host our projects. So let's Build this game from scratch.

The source code for this project can be found here:

To Play This Game open this link on your PC Browser:

[avneetbhatiab]

Keep it up Anmol. Gonna try it for sure!

[tushargupta]

Sir please upload these tutorials more frequently... These tutorials are extremely useful for beginners like me 🙏🏻🙏🏻

[jaisapkal]

Sir this video is very helpful for me to get a bost to start of coding life 🔥🔥

[jaypratapsingh]

drawBall function is not working.kindly suggest me solution

const
const ctx=cvs.getContext("2d");

const PADDLE_WIDTH=100;
const PADDLE_HEIGHT=20;
const PADDLE_MARGIN_BOTTOM=50;
const BALL_RADIUS=8;
const BackGround=new Image;
BackGround.src="bg2.jpg";

let ArrowLeft=false;
let ArrowRight=false;

const paddle={
x:cvs.width/2-PADDLE_WIDTH/2,
y:cvs.height-PADDLE_MARGIN_BOTTOM-PADDLE_HEIGHT,
width:PADDLE_WIDTH,
height:PADDLE_HEIGHT,
dx:5
}


function drawPaddle(){
ctx.fillStyle="pink";

ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

ctx.strokeStyle="purple";
ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height)

}

document.addEventListener ( "keydown", function(event){

ArrowLeft=true;

}
else
ArrowRight=true;
}
});

document.addEventListener("keyup", function(event){

ArrowLeft=false;
}
else
ArrowRight=false;
}
});

function movePaddle(){
if(ArrowRight &&
paddle.x +=paddle.dx;
}

else if(ArrowLeft && paddle.x>0){
paddle.x -=paddle.dx;
}
}

const ball={
x:cvs.width/2,
y:paddle.y-BALL_RADIUS,
radius:BALL_RADIUS,
speed:4,
dx:3 * (Math.random() *2 - 1),
dy:-3
}

function drawBall(){
ctx.beginPath();

ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
ctx.fillStyle="yellow";
ctx.fill();

ctx.strokeStyle="orange";
ctx.stroke();

ctx.closePath();


}


function draw(){
drawPaddle();
drawBall();
}

function update(){

movePaddle();

}


function loop(){
ctx.drawImage(BackGround, 0, 0);

drawPaddle();

update();

requestAnimationFrame(loop)
}

loop();